Colour Contrast Checker
Check whether your text and background colours are readable for everyone, using the WCAG contrast standards.
- AA Normal text 4.5:1
- AA Large text 3:1
- AAA Normal text 7:1
- AAA Large text 4.5:1
- AA UI & icons 3:1
Private by design — everything is processed on your device. Nothing you type or upload is sent to our servers.
What it does and why it matters
Low-contrast text is hard to read on phones in sunlight and for people with low vision. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA.
Use this checker while choosing brand colours, designing social posts or building a website. It calculates the exact ratio, shows pass or fail for each level and previews your colours live.
How to use the Colour Contrast Checker
- Pick the text colourUse the picker or type a hex code.
- Pick the backgroundChoose the colour the text sits on.
- Read the resultAim for AA at minimum; AAA for long reading.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 24 px regular or 19 px bold). AAA requires 7:1 and 4.5:1.
Does contrast affect SEO?
Indirectly. Accessibility audits such as Google Lighthouse flag low contrast, and readable pages keep visitors engaged.
What counts as large text?
Text at least 18 pt (24 px) regular, or 14 pt (about 18.7 px) bold.
Is black on white always best?
It has the highest ratio (21:1), but very dark grey on off-white is often more comfortable while still passing AAA.
Does this check images?
No. It compares two solid colours. For text over photos, add an overlay and check the overlay colour.