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 also13
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface9 connections
OKLCH
A perceptually uniform color space that makes lightness and chroma behave predictably.
Design & Interface15 connections
Dark Mode
Serving an alternate palette for low-light preference, and the three states that implies.
Design & Interface19 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface23 connections
Reduced Motion
An operating-system preference signaling that animation should be minimized, for real medical reasons.
Design & Interface21 connections
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface21 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behavior layered on top.
Web Platform26 connections
Easing
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
Design & Interface16 connections
Call to Action
The button or link that asks a visitor to take the next step, such as signing up or buying, whose wording, prominence, and placement are heavily tested and easily turned manipulative.
Design & Interface9 connections
Focus Indicator
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
Design & Interface12 connections
HSL and HSV
Two rearrangements of the RGB color cube into hue, saturation, and lightness or value, made in the 1970s so people could pick colors intuitively, which are convenient for color pickers but don't match how bright colors actually look.
Graphics & Rendering6 connections
Glassmorphism
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
Design & Interface9 connections
Accessibility Testing
Checking that people using screen readers, keyboards, magnification, or other assistive technology can actually use an interface, through a mix of automated scans and hands-on testing.
Testing & Verification14 connections
Linked from20
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- Accessibility TestingTesting & Verification
Checking that people using screen readers, keyboards, magnification, or other assistive technology can actually use an interface, through a mix of automated scans and hands-on testing.
- Assist ModePlay & Games
Difficulty and accessibility settings offered as separate, combinable toggles instead of one difficulty slider.
- Call to ActionDesign & Interface
The button or link that asks a visitor to take the next step, such as signing up or buying, whose wording, prominence, and placement are heavily tested and easily turned manipulative.
- Color GamutGraphics & Rendering
The range of colors a device or color space can represent, drawn as a triangle of primaries inside the larger region of colors humans can see.
- 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.
- Focus IndicatorDesign & Interface
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
- GlassmorphismDesign & Interface
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
- High Dynamic RangeGraphics & Rendering
Representing and displaying brightness over a much wider range than the conventional 0–1 signal, so highlights can be brighter without the rest getting darker.
- HSL and HSVGraphics & Rendering
Two rearrangements of the RGB color cube into hue, saturation, and lightness or value, made in the 1970s so people could pick colors intuitively, which are convenient for color pickers but don't match how bright colors actually look.
- 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.
- Visual HierarchyDesign & Interface
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.