Contrast Checker
Check the contrast ratio between a text color and a background color against the WCAG AA and AAA accessibility standards. Free, instant and private — everything is computed in your browser.
Normal text (16px): The quick brown fox jumps over the lazy dog.
Large text (24px bold): Pack my box.
Contrast ratio (1:1 = no contrast, 21:1 = black on white)
How to check color contrast
- Pick your two colors. Set the text (foreground) color and the background color using the color pickers or by typing HEX codes like #333333.
- Read the ratio and preview. The contrast ratio updates instantly, and the preview shows real sample text at normal and large sizes so you can judge readability with your own eyes.
- Check the WCAG results. Green "Pass" badges show which WCAG 2.1 levels the pair meets — AA and AAA, for normal text, large text and UI components. Use Swap colors to test the inverse pairing.
About this tool
The Web Content Accessibility Guidelines (WCAG) define how much luminance contrast text needs against its background to stay readable, including for the roughly 1 in 12 men and 1 in 200 women with some form of color vision deficiency. This free contrast checker computes the official WCAG contrast ratio — (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker color — and compares it against every threshold: 4.5:1 for AA normal text, 3:1 for AA large text and UI components, and the stricter 7:1 and 4.5:1 for AAA.
Everything is calculated locally in your browser, so nothing about your brand palette leaves your device. Designers and developers use this tool to validate text colors, button labels, form borders and icons before an accessibility audit does it for them. If a pair fails, try darkening the text or lightening the background — the Darken Color and Lighten Color tools generate adjusted variants you can re-test here.
Frequently asked questions
What counts as "large text" in WCAG?
Text that is at least 24px (18pt) at regular weight, or at least 18.66px (14pt) if it is bold. Large text is easier to read, so it only needs a 3:1 ratio for AA and 4.5:1 for AAA instead of 4.5:1 and 7:1.
Should I aim for AA or AAA?
AA is the level required by most laws and standards worldwide (including the ADA guidance and the European Accessibility Act), and it is the practical target for most sites. AAA is stricter and worth pursuing for body text on reading-heavy pages, but it is often not achievable for every element, such as logos or decorative text, which are exempt anyway.
Does the ratio depend on which color is the text?
No — the contrast ratio is symmetric, so swapping text and background gives the same number. The swap button is still useful for previewing how the inverted pairing actually looks, for example for dark-mode variants of the same palette.
What is the 3:1 "UI components" requirement?
WCAG 2.1 success criterion 1.4.11 (Non-text Contrast) requires at least 3:1 between a UI component or meaningful graphic and its adjacent colors — think button borders, form field outlines, focus indicators, toggle states and chart lines. This checker reports that threshold alongside the text ones.