Text contrast checker for UI color pairs

1. Enter the colors the text actually uses

Enter the foreground and background as three- or six-digit HEX values. Use the computed colors from the rendered state you are reviewing when possible. A token name alone does not establish which value is applied after theme rules, component styles, and local overrides.

This tool accepts opaque colors. It does not flatten transparency, sample an image, or evaluate a gradient. If text is drawn over one of those backgrounds, establish the relevant rendered colors or use a testing method that accounts for the actual composition.

2. Choose the appropriate text category

Select normal text unless the rendered text qualifies for the large-text exception. W3C defines qualifying large text as at least 18 point regular or 14 point bold; at the standard CSS conversion, those correspond to 24 CSS pixels and approximately 18.67 CSS pixels respectively.

The sample changes with the selected category to make the comparison easier to inspect. It does not inspect your website’s font size or weight. Confirm the classification in the actual component before using a large-text result as evidence for a review.

3. Interpret the result within its scope

The displayed ratio is rounded for readability, while the pass or fail decision uses the unrounded calculation. A value close to the boundary can therefore display as 4.50 while remaining slightly below the required ratio. Keep that distinction when discussing a borderline pair.

A passing pair does not establish that the whole component is accessible. Review focus indicators, state meaning, keyboard access, labels, and any applicable non-text contrast requirements separately. Text over changing content can also need more than a single sampled pair.

• Confirm the pair and theme match the reported state.
• Check supporting text and error messages as well as headings.
• Use visible text to communicate the result, not color alone.
• Treat the output as evidence for one criterion and one pair.

4. Turn a failed pair into a useful correction

Copy the result and add the route, component, theme, and intended token role. Ask for a correction that preserves the component’s meaning. If a shared text token is the cause, review representative consumers before approving a global value change.

Recheck the actual rendered pair after implementation. Keep the original observation with its verification result so the next reviewer can see what changed. These calculations run in your browser; the tool does not submit the entered colors to CRRT or create feedback automatically.

Common questions