What does the value preview show?

It converts your palette to grayscale so you can check the lightness differences between colors and confirm hierarchy holds without hue.

Why check colors in grayscale?

If two colors collapse to the same gray, they'll be indistinguishable to some colorblind users and in black-and-white print. Grayscale reveals it.

How much value difference do I need?

Enough that adjacent elements stay distinct in grayscale; for text and background, that lightness gap also drives your contrast ratio.

Value Contrast / Black & White Preview

Convert the palette to grayscale to check whether hierarchy, focus and blocks are still distinguishable

Risk Threshold 18

Value Preview Color Check visual hierarchy after desaturation

Lightness Palette

Left: original color; Right: perceptual gray; click to view details

Adjacent Value Difference

Adjacent colors below the threshold tend to merge in B&W

About Value Contrast Preview

Convert your palette to grayscale to verify luminance differences and hierarchy. Ensure readability in black-and-white print and color-blind viewing. The palette converts to grayscale instantly, making lightness differences obvious without mentally estimating each color's luminance.

Worth a check before submitting black-and-white print materials, or when accounting for colorblind users — confirming hierarchy survives once hue is stripped away.

Common questions

What does the value preview show? It converts your palette to grayscale so you can check the lightness differences between colors and confirm hierarchy holds without hue.
Why check colors in grayscale? If two colors collapse to the same gray, they'll be indistinguishable to some colorblind users and in black-and-white print. Grayscale reveals it.
How much value difference do I need? Enough that adjacent elements stay distinct in grayscale; for text and background, that lightness gap also drives your contrast ratio.