Color & design

Evaluate Color Contrast with Reproducible Evidence

Define a contrast test case, separate computed ratios from contextual judgments, handle indeterminate backgrounds, and verify fixes across component states.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Define what one evaluation covers

A useful color contrast evaluation identifies a specific visual feature in a specific state. “The website passes contrast” is too broad when only one brand color was measured. Write a test case such as the helper text below a form field, in the light theme, at the narrow layout. Include the foreground, actual background, typography and applicable criterion. That record explains what a pass or failure means.

Separate the numerical question from the contextual one. A calculator can determine the ratio for two opaque colors. A reviewer must still determine whether those are the colors used by the component, whether the text qualifies as large, whether the background changes and whether a criterion exception applies. Neither part is a substitute for the other.

Check the evaluator with known inputs

Use #000000 on #ffffff as a baseline: the WCAG ratio is 21:1. Use white on white as a second input: the ratio is 1:1. The local checker reports these values and normal- and large-text AA/AAA indicators. If a tool reports something different, inspect its input parsing, contrast model or interpretation before relying on additional results.

For a boundary test, #777777 on white is approximately 4.47809:1 and fails a 4.5:1 requirement. The evaluator should compare the unrounded value with the threshold even if it displays fewer digits. A rounded display of 4.5 is not permission to call a below-threshold pair compliant. Preserve exact input values so another reviewer can reproduce that distinction.

Establish the final painted colors

Inspect the element’s foreground and all relevant background layers. A transparent element may reveal an ancestor, and opacity on a parent can affect both text and background. When an image or gradient supplies the surface, there may be multiple valid background comparisons across one line of text. Record the least favorable relevant combination or explain why the context cannot be represented by a single pair.

Do not report an indeterminate result as a pass simply because an automated scanner did not flag it. A scanner may skip a case it cannot resolve. Mark it for manual review, capture the component context and determine whether an opaque surface or another design change would make the relationship predictable. The local checker has no URL scan or page-rendering analysis; its scope is the supplied colors.

Apply a criterion to the role being evaluated

For ordinary text, WCAG AA minimum contrast is 4.5:1. Qualifying large text uses 3:1. A control’s essential boundary or state indication belongs to a separate non-text contrast review. A strong text contrast result does not establish that an adjacent icon, input outline or selected tab indicator remains distinguishable. Include those meaningful features as separate test cases when their roles require it.

Use criterion exceptions carefully. A real disabled control can be inactive, but an active button styled to look faint is not thereby exempt. Branded body copy is not a logotype simply because its color comes from a brand system. Record the reason for an exception in language that explains the element’s purpose and state, so it can be checked when the design changes.

Verify the repair in the implemented component

When a color changes, first recompute the pair and then inspect the deployed component. A design-file fix may not reach the CSS token actually used by the page. A browser developer-tools adjustment can disappear on reload unless it is saved to the source. Check hover, focus, selected and error states as well as the default appearance, especially when several components share a token.

Use a second viewport when wrapping or image cropping affects the surface behind text. If a heading becomes smaller at a breakpoint, reconsider the typography classification. Keep a before-and-after record with the original failure, the implemented values and the new result. This makes a regression review more reliable than replacing the failed measurement with an unexplained pass label.

Report measured, failed and unresolved cases separately

A review should distinguish confirmed passes, confirmed failures, justified exceptions and cases still needing contextual analysis. Include enough information to reproduce each measurement without guessing where the colors came from. The numerical result can be copied from the local checker, while the component and state description must be supplied by the reviewer.

The text-contrast guidance and non-text contrast guidance define the relevant context. Keep this evidence alongside other accessibility tests. A completed color review does not establish that the interface has correct labels, logical focus order, usable keyboard controls or sufficient support for text resizing.