Test foreground and background color combinations for WCAG 2.1 accessibility compliance. Check AA and AAA contrast ratios.
Choose your colors — Use the color picker to visually select foreground (text) and background colors, or type hex values directly into the text inputs.
Watch live preview — The preview area updates instantly showing exactly how text appears on your chosen background.
Read the results — The contrast ratio and WCAG pass/fail badges update automatically for AA and AAA levels, both for normal and large text.
Iterate — Adjust colors until you see green pass badges. Aim for at least AA compliance (4.5:1 for normal text).
The tool calculates the relative luminance of each color using the sRGB formula from the WCAG 2.1 specification. The contrast ratio is then computed as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker color's luminance. The result is compared against WCAG thresholds: AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1).
Get accurate WCAG compliance results:
WCAG (Web Content Accessibility Guidelines) is an internationally recognized standard for web accessibility, maintained by the W3C. Many countries (including the US, UK, EU members, and Canada) have laws referencing WCAG — meaning if your website is not compliant, you could face legal action. Beyond legal risk, accessible design simply reaches more people: roughly 1 in 12 men has some form of color blindness.
It depends on your compliance target. WCAG AA (the legal minimum in many jurisdictions) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA (the gold standard) requires 7:1 for normal text and 4.5:1 for large text.
Yes. Any text on your site — whether in a <p> tag or baked into a hero banner image — must meet WCAG contrast requirements. For image text, check the contrast between the text color and the portion of the image directly behind it.
Yes. Inactive UI components, disabled elements, decorative text (like logos), and text that is part of a disabled control don't need to meet contrast requirements. However, body text, headings, form labels, and button text absolutely must comply.
No. All our tools are free to use and work directly in your browser without registration or sign-in. Just open the page and start using the tool.
Yes. The tool is fully responsive and works on any modern browser on iPhone, iPad, Android phones and tablets. The interface adapts to your screen size automatically.