Color Contrast Checker
Pick a text colour and a background colour to see the WCAG contrast ratio and whether it passes AA and AAA for normal and large text, with a live preview. Everything runs in your browser — nothing is sent anywhere and nothing is stored.
Normal text sample — the quick brown fox jumps over the lazy dog.
Large text sample 18.66px bold
How to use the contrast checker
- Choose your text colour and background colour with the pickers, or type a hex value like
#1a1a1a. - Read the contrast ratio and check which WCAG levels pass.
- Aim for AA (4.5:1) for body text; AAA (7:1) is the strictest, most accessible target.
Large text (about 24px, or 18.66px bold and up) only needs 3:1 for AA and 4.5:1 for AAA, so headings have a little more freedom than body copy.
More PAYATE tools
Frequently asked questions
What is a contrast ratio?
A contrast ratio measures how different two colours are in brightness, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG computes it from each colour’s relative luminance as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Higher ratios mean text is easier to read.
What do AA and AAA mean?
They are the WCAG conformance levels. AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. “Large” means about 18pt (24px) or 14pt (about 18.66px) bold and larger.
Why does colour contrast matter?
Sufficient contrast keeps text readable for people with low vision, colour-blindness or anyone on a dim screen or in bright sunlight. It is a core accessibility requirement and is often legally expected, so meeting AA improves usability for everyone.
Is my data stored?
No. The ratio is calculated entirely in your browser as you change the colours — nothing is uploaded to a server and nothing is stored.