Table of Contents
Lightness Contrast
the difference in brightness
between two colors
Lightness contrast is the contrast of value
— how light or dark
one color is compared to another.
It is the most fundamental form of contrast in design because
the human eye perceives value differences
before hue or saturation.
Lightness contrast is what
makes text readable,
shapes hierarchy,
and sets tone.
What lightness contrast does
- Reveals text clearly — dark text on a light background, or vice‑versa
- Creates hierarchy — stronger value differences speak first
- Shapes tone — high value contrast feels bold; low value contrast feels soft
- Supports accessibility — especially for users with low vision
- Defines separation — between surfaces, cards, and layers
Lightness contrast is
the backbone of visual clarity.
How we describe lightness contrast when working with AI
These phrases give AI precise, predictable direction:
“Increase the lightness contrast between text and background.”
“Lower the value contrast for a softer tone.”
“Keep the lightness contrast consistent across surfaces.”
“Use stronger value contrast for primary actions.”
“Reduce contrast so the background stays quiet.”
Naming value avoids ambiguity
about hue or saturation.
Why lightness contrast matters more than hue
Hue differences (blue vs. red) do not guarantee readability.
Two different colors can have nearly identical lightness values
and therefore blend together.
Lightness contrast is what determines:
- whether text is readable
- whether layers feel distinct
- whether hierarchy is visible at a glance
Hue adds personality.
Lightness adds clarity.
Accessibility and lightness contrast
WCAG contrast ratios are based entirely on value,
not hue:
4.5:1for normal text3:1for large text
But beyond compliance,
value contrast is about comfort:
- too low → strain
- too high → glare
- balanced → readable, calm, intentional
Lightness contrast is both a requirement
and a design choice.
Related concepts
- Color Contrast — the broader category lightness belongs to
- Tone — value contrast shapes emotional temperature
- Hierarchy — contrast determines what speaks first
- Readability — value contrast supports comfort
—- Tony de Araujo —New York | Lisbon
