Kelly Mears

Color Contrast

The measured luminance difference between foreground and background, and the accessibility floor it must clear.

Design & Interface2 min read213 words14 out · 20 in
also calledContrast ratioWCAG contrast

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