Lightness
The dimension that determines contrast, hierarchy and whether text can be read at all.
Definition
Lightness is how light or dark a colour appears. It is the dimension that governs contrast ratios, and therefore the one that determines accessibility compliance. Perceptual lightness, as in OKLCH, corresponds to appearance far better than HSL lightness does.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Lightness is the load-bearing dimension
Hue and saturation are largely aesthetic. Lightness decides whether text is readable, whether a border is visible and whether a hierarchy survives greyscale. Two colours with the same lightness will be indistinguishable to some readers no matter how different their hues.
This is why ramps are built by stepping lightness, and why a design system's colour documentation should show the contrast ratio of every usable pair rather than leaving it to be discovered later.
A typical lightness ramp and its uses
Approximate roles for an eleven-step ramp. Exact values depend on the hue and the space.
| Step | Typical use |
|---|---|
| 50 to 100 | Page and surface backgrounds in light mode. |
| 200 to 300 | Borders, dividers, disabled surfaces. |
| 400 to 500 | Placeholder text, icons on light backgrounds, chart fills. |
| 600 to 700 | Body text on light backgrounds, primary interactive fills. |
| 800 to 950 | Headings, high-emphasis text, dark mode surfaces. |
In practice
Contrast matrix in system documentation
Design systemsA table showing which text steps pass against which surface steps turns an accessibility question into a lookup, and removes it from every future design review.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Short definition
The one-paragraph version, for when that is all you need.
- Contrast RatioTerm
- OKLCHTerm
Related concept
Connected closely enough to change how you apply this.
- Design TokensDesign system
- Brand Color in InterfacesUI foundation
- Color AccessibilityUI foundation
- Color SystemsUI foundation
- Color Theory for InterfacesUI foundation
- ContrastUI foundation
- Dark ModeUI foundation
- NeutralsUI foundation
- SaturationUI foundation