How to check color contrast for WCAG
A color pair that looks fine on your monitor can still fail WCAG for your users. Paste the two HEX values, read the exact ratio, and see at a glance which thresholds it passes — before the palette goes into the design system.
Step by step
Open the contrast checker
Start the free checker — the calculation runs in your browser.
Enter the foreground color
Type the text or icon color as a HEX value, for example #0F172A.
Enter the background color
Type the surface it sits on, for example #FFFFFF.
Read the ratio
The pair is scored with the WCAG formula — #0F172A on #FFFFFF gives 17.85:1, passing AA and AAA for normal and large text.
Check every threshold
See AA (4.5:1), AAA (7:1), large-text (3:1), and the 3:1 non-text UI-component level evaluated separately, with a live preview of the pair.
Tips that save a second try
Swapping foreground and background never changes the ratio — lighter luminance always goes over darker — but the preview can still look different in context.
Large text means at least 18 point, or 14 point bold, in WCAG 2 terms; the tool reports the ratio but cannot infer your rendered font size or weight.
Only opaque HEX colors are evaluated — alpha compositing, gradients, and background images are outside this calculation, and a passing ratio alone does not make an interface accessible.
Common questions
What counts as large text in the displayed WCAG checks?
WCAG 2 defines large-scale text as at least 18 point, or at least 14 point when bold. The tool reports the ratio and threshold but cannot infer the rendered font size or weight of your product UI.
Does swapping the two colors change the contrast ratio?
No. The ratio always places the lighter luminance over the darker luminance, so foreground and background order does not change the numeric result.