Test the pair that reaches the screen
Design tokens can look clear in a palette and fail when they meet in a component. The Colour Contrast Checker compares a text colour with the background directly beneath it. You can use the colour pickers or enter six-digit hex values. The preview updates with the same pair, and the result shows the calculated contrast ratio. If the interface uses transparency, a gradient, or an image, first work out the final colours visible at the point you are testing.
How the ratio is calculated
The tool converts each sRGB colour to relative luminance. It then compares the lighter value with the darker value using the WCAG contrast formula. The order of the colours does not change the ratio, although their roles in the design still matter. The displayed number is rounded to two decimal places. This is useful when reviewing a token change because it shows the actual distance between the colours instead of relying on how they look on one monitor.
Reading the pass labels
The current interface reports AA for normal text at 4.5:1, AA for large text at 3:1, and AAA for normal text at 7:1. These are separate results. A pair that passes the large-text line may still fail for body copy. Size and weight affect whether text qualifies as large, so check the rendered component as well as the ratio. The tool does not currently report every WCAG case, such as graphical objects or component boundaries.
Check states, not only the default
A button may pass until its hover colour changes. A form hint may be readable while the disabled label is not. Test navigation, links, input labels, helper text, errors, and status messages. Repeat the comparison for focus, hover, pressed, selected, disabled, and visited states when they use different colours. If text sits over an image, test the lightest and darkest areas it can cross or provide a solid surface behind it.
A passing ratio is one check
Contrast does not prove that a whole interface is accessible. People still need a clear focus indicator, correct HTML, useful labels, sensible reading order, keyboard access, and text that survives zoom. Colour should not be the only way to communicate an error or selected state. A green success message, for example, still needs words or another clear cue. Use the ratio as an early gate, then test the finished interface in context.