Color & design

Choose the Right Contrast-Ratio Comparison for Accessibility

Select the relevant foreground and adjacent surface, distinguish text from essential control boundaries, and evaluate ratios against the right criterion.

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

Identify the visual information before comparing colors

To check a contrast ratio for accessibility, first identify which feature carries the information. A text label is compared with its background under a text criterion. An essential input boundary or selected-state mark may require a non-text comparison with an adjacent color. A decorative flourish can have a different role. Choosing the pair and criterion correctly is as important as calculating the ratio accurately.

Write the question in component terms: “Can this boundary be identified against the form surface?” is clearer than “Does this gray pass?” The same gray can be used for a divider, a required control boundary and ordinary text. Those uses do not automatically share the same requirement or exception.

Measure an essential border against its surface

Suppose a white form identifies an input primarily through a border colored #cbd5e1. Compare that color with #ffffff in the contrast checker. The ratio is about 1.48:1. Where that border is the visual information necessary to identify the control, it is below the non-text criterion’s 3:1 requirement against the adjacent white surface.

Changing the border to #64748b gives about 4.76:1 against white. That exceeds three and also happens to meet the ordinary-text AA threshold, but those are separate interpretations. The tool reports text classifications; for this border test, use its numerical ratio with the non-text role you have established. Do not treat the normal-text row as the definition of a control boundary requirement.

Use typography to select a text threshold

For ordinary text, WCAG AA minimum contrast is 4.5:1. Qualifying large text uses 3:1, based on its actual size and weight rather than its HTML heading level. When reviewing a component with both a heading and a caption, classify them separately. The caption cannot borrow the heading’s large-text classification because it appears in the same card.

Read the computed styles for the layout under review. A responsive heading can cross the size boundary at a narrow viewport. A color ratio remains the same for a fixed pair, but the applicable threshold can change when the typography changes. Record both the pair and the classification so that another reviewer can reproduce the decision.

Choose the adjacent colors that matter

A focus indicator can sit against a component on one side and the surrounding page on the other. A chart line can cross several fills. Review the actual feature and the neighboring colors that are relevant to identifying it under the applicable criterion. One convenient comparison with the page’s main background may not describe all of those relationships.

For text, follow transparent backgrounds to the surface that is actually visible. Alpha and blending can change the final displayed pair. The local tool accepts opaque six-digit hex colors and does not inspect those layers. Resolve the composition first or use a contextual page review; entering an uncomposited foreground color can produce a ratio that does not represent what the user sees.

Handle images and gradients as variable comparisons

If text crosses a photograph or gradient, examine the least favorable relevant area behind the letters. The original desktop crop may not be the crop used on a phone. A content editor might replace the image or lengthen the heading. Test the range of permitted presentations instead of assuming one sampled pixel characterizes the entire component.

When that range cannot be controlled, consider a solid text surface or a design that separates the label from the image. An overlay can help, but it still needs evaluation with the image beneath it. The goal is a predictable foreground/background relationship, not merely a darker-looking screenshot that has not been measured.

Compare the unrounded value and keep a record

Thresholds are minimum values. Do not round a value below three or 4.5 upward and call it a pass. The local checker displays a rounded ratio while using the original value for its text indicators. For a manual non-text comparison, retain adequate precision or choose a color with useful headroom rather than relying on the last displayed digit.

Record the feature, state, pair, ratio, selected criterion and any applicable exception. Consult the non-text contrast guidance and text contrast guidance when interpreting a complex component. Keep use-of-color, keyboard focus behavior and accessible labels as separate checks. A correctly selected contrast comparison answers one defined accessibility question; it does not replace those other requirements.