About the Color Contrast Checker
If text doesn't contrast enough with its background, it's hard to read — especially for people with low vision. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that text should meet. This checker measures the contrast between a text colour and a background colour and tells you whether it passes.
Enter a text colour and a background colour to get the exact contrast ratio and see which WCAG levels (AA and AAA) it passes for normal and large text. It runs in your browser.
How to use it
- 1Choose or enter the text colour.
- 2Choose or enter the background colour.
- 3Read the calculated contrast ratio.
- 4Check which WCAG levels it passes for normal and large text.
- 5Adjust the colours until it meets the level you need.
Common uses
- →Making sure body text on your website is readable.
- →Checking button and link colours meet accessibility standards.
- →Verifying a brand colour pairing before launch.
- →Meeting WCAG AA or AAA requirements for a client or audit.
- →Improving readability for users with low vision.
Tips & good to know
- WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Large text (roughly 18pt, or 14pt bold) has a lower threshold because it's easier to read.
- Don't rely on colour alone to convey meaning — pair it with text or icons.
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively.
- What's the difference between AA and AAA?
- AA is the common standard most sites aim for; AAA is a stricter, enhanced level for maximum readability.
- Is anything uploaded?
- No. The contrast is calculated entirely in your browser.