How to use WCAG contrast ratios in real interfaces

A ratio describes two rendered colors

WCAG contrast calculations compare relative luminance between a foreground and background. A ratio of 1:1 means the luminance is the same, while higher ratios indicate more separation. For WCAG 2.x Level AA, normal text generally needs at least 4.5:1 and large text at least 3:1, subject to the definitions and exceptions in the standard.

The calculator needs the colors that are actually rendered together. A design token may use opacity, blend over another surface, sit on a gradient, or appear above an image. Calculate the composited result or sample the implemented state instead of checking two source tokens that never meet as solid colors on screen.

Text size, weight, and state change the review

Large-text thresholds apply only when the rendered text meets the standard's size and weight definition. Browser zoom, responsive typography, and font availability can affect the result. Do not label ordinary body text as large simply because a design file uses a bold style.

Check default, hover, active, focus, visited, selected, disabled, error, and placeholder states. A component that passes at rest may fail when the background changes or opacity is reduced. Focus indicators and essential non-text graphics have additional contrast considerations that a text-only result does not cover.

Passing contrast does not guarantee readability

A passing ratio is necessary for covered content but is not a complete measure of accessibility. Font choice, line length, spacing, motion, glare, cognitive load, color vision differences, and the clarity of the language all affect whether a person can use the interface.

Color must not be the only way information is communicated. Error fields need text or another programmatically available cue, charts need labels or patterns, and links within paragraphs need a visual distinction that does not disappear for users who perceive color differently.

Test the implemented product

Use a calculator while choosing a palette, then repeat the check in browser developer tools or an accessibility audit after implementation. Automated tools can find many deterministic failures, but a keyboard and screen-reader review is still needed for semantics, focus order, labels, announcements, and interaction behavior.

Record the exact component, state, foreground, background, ratio, criterion, and remediation. This makes the finding reproducible and prevents a passing replacement color from being applied to the wrong state or surface.

• Check real composited colors.
• Verify the correct text-size category.
• Review every interactive state.
• Combine automated checks with manual use.