WCAG Color Contrast Explained for Designers and Developers

What a contrast ratio represents

A contrast ratio ranges from 1:1 for identical luminance to 21:1 for the strongest black-and-white difference. The calculation is based on luminance rather than the apparent distance between HEX values, so two colors that look far apart numerically can still produce weak contrast.

The ratio is directional only in presentation: dark text on a light background and light text on a dark background produce the same mathematical ratio. Readability can still feel different because of font weight, glare, anti-aliasing, and the amount of colored area.

Text size changes the requirement

Accessibility guidance distinguishes ordinary text from larger text because larger letterforms are easier to perceive. Do not treat a bold label as large text unless its rendered size and weight meet the relevant definition. Responsive layouts can also reduce a heading below the size assumed in the design.

For practical work, test the exact CSS size and weight. Small navigation labels, helper text, placeholders, table values, and text inside compact buttons deserve particular attention.

Non-text contrast matters too

Form boundaries, selected controls, focus indicators, icons that communicate meaning, and chart elements may also need sufficient contrast against adjacent colors. A text-only audit can miss an input that has no visible border or a focus ring that disappears against a card background.

Decorative shapes do not need to communicate, but once a graphic is necessary to understand or operate the interface, its visibility becomes functional.

Where automated tools can mislead

A checker evaluates the colors you enter. It cannot always determine the effective color over a photograph, video, translucent layer, gradient, or blend mode. It also cannot confirm that the correct element was sampled or that the tested state is the state users actually encounter.

Use automated results as one layer of review. Inspect the rendered page, keyboard through controls, test at browser zoom, and verify all component states—not only the default screenshot.

A reliable review workflow

Create a list of color pairs from your design tokens, test them in bulk, and mark which roles are permitted. Then review representative pages for unexpected combinations introduced by local CSS or content. Repeat the check after dark mode, theming, or rebranding changes.

Colorrow’s Contrast Checker is useful for quick pair testing. Record the result with the component name so the decision can be reviewed later rather than rediscovered during every release.