Check the actual foreground and background
Enter a HEX color for the text and another for the background. The checker converts their sRGB channels to relative luminance and reports the contrast between the lighter and darker colors. The ratio ranges from 1:1 for identical colors to 21:1 for black against white. This calculation is more informative than judging colors by eye because two hues with different names can have similar luminance. The preview shows the selected pair as text on a real background.
Use the colors that actually appear together on the page. A design token may specify one background, while an overlay, gradient or translucent layer produces another color at the text position. This tool accepts opaque three- or six-digit HEX values. If your design uses transparency, first determine the composited visible color and test that result. Reversing the two colors gives the same numeric ratio, though the visual appearance still changes.
Interpret AA and AAA thresholds
WCAG 2.2 requires at least 4.5:1 for normal text at level AA and 3:1 for qualifying large text. The enhanced AAA targets are 7:1 and 4.5:1 respectively. The checker displays four separate pass or fail results so you need not infer one from another. A color combination can pass AA for large text while failing AA for ordinary body copy. Select the criterion that matches the rendered text, not the intended style name.
For a worked example, dark blue #1A365D on white #FFFFFF gives a ratio of about 12.14:1 in this calculator. It passes all four displayed text thresholds. Change the foreground to a lighter shade and watch the ratio move; the pass marks update when a threshold is crossed. This is useful when adjusting link color, button labels or caption text without changing the surrounding design more than necessary.
Use the number during design review
Test body text first because it usually needs the stricter normal-text threshold. Then inspect headings, form labels, navigation and text inside controls in their actual states, including hover, focus and disabled appearance where applicable. Keep a record of the exact color pair that was checked so a later theme change can be retested. The immediate preview makes it easy to compare candidate palettes while the numeric result prevents a purely aesthetic guess.
Contrast for non-text user-interface components follows a different WCAG criterion. Passing the text checks here does not certify icons, outlines, focus indicators or an entire page. Real font size and weight also determine whether the large-text exception applies. A complete accessibility review needs keyboard use, readable zoom behavior and other criteria beyond color contrast.
Avoid common measurement errors
Do not compare a text color against white merely because the canvas is white if the text actually sits on a colored card. Test the color behind that exact text. Do not round a ratio upward before checking a threshold: the calculator compares the unrounded value, then displays a rounded number for reading. A displayed 4.50:1 near the boundary deserves inspection of the precise colors and the final rendering.
A browser, display or screenshot can make colors appear different, but the WCAG calculation uses the specified sRGB values. Use the tool to assess the declared color pair, then inspect the implemented page for overlays and state changes. When a pairing fails, choose a darker foreground, lighter background or another combination and retest; changing font size without confirming that the result qualifies as large text can misapply the rule.