Check the WCAG contrast ratio between two colours for accessible text.
Calculated instantly in your browser.
How do you check the color contrast ratio?
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. Black on white is 21:1, the maximum. WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text; aim for AAA where you can for the best readability.
Understanding your result
Large text is roughly 18.66px bold or 24px regular and up. Aim for AA on body text and AAA where you can for the best readability.
Formula and method
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours.
Worked example
Black on white is 21:1 (the maximum). WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text.
How to use this tool
- Pick the text colour and the background colour.
- Read the ratio and the AA/AAA pass or fail results.
About the Color Contrast Checker
The Color Contrast Checker measures the WCAG contrast ratio between a text colour and its background and tells you whether it meets accessibility standards.
Explore all Developer Tools tools
Frequently asked questions
What ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to pass WCAG AA; 7:1 and 4.5:1 respectively for the stricter AAA level.