Check Color Contrast for Accessibility
This contrast checker measures how readable your text is against its background and tells you whether the combination meets the Web Content Accessibility Guidelines (WCAG). Choose a text color and a background color to see the exact contrast ratio, a live preview, and clear pass or fail results for AA and AAA at both normal and large text sizes. It runs entirely in your browser.
Why contrast matters
Low-contrast text is hard to read, especially for people with low vision, color vision deficiencies, or anyone using a screen in bright sunlight. Poor contrast is the most common accessibility problem on the web, and it is also one of the easiest to fix. Meeting the guidelines makes your content readable for far more people and is a basic requirement for accessibility compliance.
What the WCAG levels mean
- AA normal text requires a ratio of at least 4.5:1. This is the common baseline for body text.
- AA large text requires at least 3:1. Large text is roughly 18pt, or 14pt bold, and above.
- AAA normal text requires at least 7:1 for the highest standard of readability.
- AAA large text requires at least 4.5:1.
User interface components and meaningful graphics, such as form field borders and icons, need at least 3:1 under WCAG 1.4.11.
How the ratio is calculated
The checker converts each color to its relative luminance using the official WCAG formula, then compares the lighter and darker values. The result ranges from 1:1, where the two colors are identical, to 21:1 for black on white. Because the math follows the specification exactly, the pass and fail results match other standards-based tools.
Tips for passing
If a combination fails, darken the text or lighten the background to push the ratio up. Reserve very light greys for large headings rather than body copy, and always test your real text color against your real background rather than guessing. Aim for AA as a minimum and AAA where the design allows.