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 plate
Reach for this when
- Generating a colour ramp.
- Verifying accessibility compliance.
- Building light and dark themes from one source.
Common mistakes
- Equal-lightness colours used to distinguish meaning.
- Ramps stepped in HSL, which bunch perceptually.
- Contrast checked only on the primary pairing.
- Treating a numeric step as a contrast guarantee across different hues.
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. |
Building and using a lightness ramp
Do
- Space steps by perceived lightness, so the same gap looks the same across the ramp.
- Give each step a job before you give it a name.
- Check the pairs you will actually use, not every theoretical combination.
- Keep the same number of steps across hues, so swapping a hue does not break a layout.
Do not
- Generate a ramp by mixing with white and black, which desaturates unevenly.
- Assume step 500 in one hue matches step 500 in another for contrast.
- Add a step to solve one screen. That is how eleven-step ramps become nineteen.
In practice
- i.
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.
- ii.
Two hues, same number, different contrast
Why numbering is not a guaranteeYellow 500 and blue 500 differ by several points of perceived lightness in most palettes. Text that passes on one fails on the other, which is why the check has to be per pair rather than per step number.
Local chart
FND·022 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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·057 · Term
- OKLCHTERM·065 · Term
Related concept
Connected closely enough to change how you apply this.
- Design TokensSYS·001 · Design system
- Brand Color in InterfacesFND·024 · UI foundation
- Color AccessibilityFND·028 · UI foundation
- Color SystemsFND·026 · UI foundation
- Color Theory for InterfacesFND·019 · UI foundation
- ContrastFND·002 · UI foundation
- Dark ModeFND·027 · UI foundation
- NeutralsFND·025 · UI foundation
- SaturationFND·021 · UI foundation