CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary:lightness_contrast

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 tonehigh 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:1 for normal text
  • 3:1 for 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
.


  • 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


vocabulary/css_visual_vocabulary/lightness_contrast.txt · Last modified: by editor