Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Color contrast is the ratio between the relative luminance of text and its background. The Web Content Accessibility Guidelines set floors — commonly 4.5:1 for body text and 3:1 for large text and meaningful non-text elements — below which text becomes hard or impossible for many people to read.
Two things about it are consistently underappreciated.
It constrains design decisions, not just checks them. A brand color that fails against its intended background is not a validation error to be waived; it means one of the two has to change. A shade specified by a designer may need to be lightened to clear the floor on a dark surface, and that is a real deviation to record rather than quietly ignore.
It is measured on the final rendered state. A color that passes at rest can fail mid-transition, which is why an automated accessibility sweep run at the wrong moment reports contrast violations on text that is simply part-way through a fade. Elements that pulse or breathe in opacity can never pass while carrying text — the same effect applied to a decorative element hidden from assistive technology is fine.
Contrast is one of the few accessibility criteria a machine can genuinely evaluate, which makes it the one worth automating hardest. See Accessibility.
See also5
OKLCH
A perceptually uniform color space that makes lightness and chroma behave predictably.
Design & Interface13 connections
Dark Mode
Serving an alternate palette for low-light preference, and the three states that implies.
Design & Interface13 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface27 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface17 connections
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface8 connections
Related4
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from12
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- Assist ModePlay & Games
Difficulty and accessibility settings offered as separate, combinable toggles instead of one difficulty slider.
- Dark ModeDesign & Interface
Serving an alternate palette for low-light preference, and the three states that implies.
- Diegetic InterfacePlay & Games
An interface that exists inside the fiction, readable by the character as well as the player.
- DispersionMatter & Energy
Refractive index varies with wavelength, so a medium bends colors by different amounts.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- OKLCHDesign & Interface
A perceptually uniform color space that makes lightness and chroma behave predictably.
- Opponent Process TheoryDesign & Interface
Color is recoded after the cones into red-green, blue-yellow and light-dark opponent channels.
- Polarized LightMatter & Energy
Light whose electric field oscillates in a preferred orientation, and the filters that select for it.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.