Color Contrast Checker
Check the WCAG contrast ratio between a text colour and a background colour, see Pass or Fail for AA and AAA, and get a nearby passing colour — free and private, in your browser.
Report a problem- AA normal text needs 4.5:1
- AA large text needs 3:1
- AAA normal text needs 7:1
- AAA large text needs 4.5:1
- UI & graphics needs 3:1
Normal text — the quick brown fox jumps over the lazy dog.
Large bold text 18pt
How to use
- Choose a text colour and a background colour with the two pickers, or type a hex code like #2B2A26 into either box.
- Read the big contrast ratio and check the Pass or Fail badges for AA and AAA on normal and large text.
- If the text fails, tap “Use this” to drop in the nearest colour that passes, or swap the two colours to test the reverse.
FAQ
What does the contrast ratio mean?
The ratio compares how light the text is against how light the background is, on a scale from 1:1 (identical, invisible) up to 21:1 (pure black on pure white). The bigger the number, the easier the text is to read. The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that people with low vision or colour blindness can still read your text, and this tool measures that exact number for you.
What is the difference between AA and AAA?
AA is the standard most websites aim for and many laws require: at least 4.5:1 for normal text and 3:1 for large text. AAA is the stricter, enhanced level: 7:1 for normal text and 4.5:1 for large text. Hitting AA makes a page widely accessible; AAA is a higher bar that is great for body-heavy reading but not always achievable with brand colours.
What counts as large text?
WCAG treats text as “large” when it is at least 18pt (about 24px), or at least 14pt (about 18.66px) when it is bold. Large text is given a gentler threshold because thicker, bigger letters stay legible at lower contrast. Small or thin text needs the higher ratio to be just as readable.