Value contrast (tonal contrast)

The lightness gap between elements, hue aside. If the design still reads as a grayscale screenshot, the contrast is real.

squint testdoes it still read in black and whitetonal contrastvaule contrastlight dark contrastgrayscale testeverything on the page is the same darkness

See it

Live demo coming soon

What it is

Value is how light or dark a color is once you forget its hue. Value contrast is the gap in that lightness between two things: text and its background, a card and the page, a logo and the photo behind it. It is the contrast your eye actually uses to separate shapes, which is why painters do a grayscale value study (and why the Japanese notan tradition works in pure black and white) before touching color at all.

Reach for it whenever a layout feels flat, busy, or oddly tiring despite having plenty of color. Screenshot it, desaturate it, and look again: if the hierarchy disappears in grayscale, the color was doing the work that lightness should have been doing. Squinting does the same job in two seconds.

Gotcha: hue difference is not contrast. Pure red on pure green is a shouting match with almost zero value contrast, so it vibrates, blurs at small sizes, and vanishes for a red-green colorblind reader. WCAG contrast ratios are essentially a value measurement, which is why picking a prettier hue never fixes a failing one.

Ask AI for it

Audit this design for value contrast: convert the palette to grayscale lightness values, list any two adjacent elements whose lightness differs by less than 25%, and propose fixes that change lightness only (keep every hue and chroma where it is). Give me the before and after lightness numbers plus the resulting text contrast ratios.

You might have meant

cielab lightnesshue contrastcolor scaleachromatic paletteneutral palette