Free tool · No sign-up
WCAG contrast checker for text and background colours
This free contrast checker calculates the ratio between text and background colour and compares it with the WCAG AA and AAA thresholds. Change the hex values or pick colours. The calculation runs directly in your browser.
Check colours
Enter a text and background colour. The preview and results update instantly.
Large text
Normal body text for the preview.
Contrast ratio 5.47 to 1
- AA · normal textPassed · min. 4.5 : 1
- AA · large textPassed · min. 3 : 1
- AAA · normal textFailed · min. 7 : 1
- AAA · large textPassed · min. 4.5 : 1
- AA · UI components and graphicsPassed · min. 3 : 1
3 or 6 hex digits, for example #0F766E or #FFF. The unrounded value is assessed.
Which values do you need?
For text at normal size, WCAG 2.2 AA generally requires at least 4.5:1. Large text needs 3:1. Large means at least 18 pt, or 14 pt in bold, roughly 24 or 18.67 CSS pixels respectively. AAA requires 7:1 for normal and 4.5:1 for large text.
For visual information needed to identify important user interface components and graphics, a ratio of at least 3:1 against adjacent colours applies under the conditions of success criterion 1.4.11. The criteria contain defined exceptions.
What this test covers
The calculator compares two opaque sRGB colours using the WCAG formula for relative luminance. With gradients, images or transparency, first determine the colours that are actually visible at the least favourable spot.
A passing colour pair rates this contrast. It does not prove that a website is fully accessible. Also check focus states, error messages, hover states and whether colour carries meaning without an additional cue.
Original sources for the calculation
- W3C: Text contrast, sizes and thresholds
- W3C: Contrast for UI components and graphics
- WCAG 2.2: Relative luminance and contrast formula
You will find more practical checks in the WCAG checklist.
Ready for the first step?
The scanner works without an installed widget too. Start by checking an important page of your website.
Scan for freeCreate a free projectPractical knowledge for your next steps
All articles in the knowledge baseDesign & content
Contrast and colour: a testing workflow for your web design
Make text, buttons and error messages clear: measure WCAG contrast correctly and check colours across your whole design.
Development & testing
Mobile accessibility: small screens, complete journeys
Check mobile websites for zoom, touch targets, gestures and orientation. With a checklist for real devices and key tasks.
Your next step
What does your website need?
Check a public page for automatically detectable barriers. The results show specific findings and help you prioritise.
Free website checkA sensible testing process
- Find automatically detectable issues
- Test the keyboard and real journeys manually
- Fix, re-check and document