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.
Assumptions and limitations
The tool measures the WCAG contrast ratio between two solid colours and reports pass or fail against the AA and AAA thresholds. It assumes opaque colours over a plain background, so semi-transparent layers, gradients, images behind text, or text shadows are not accounted for in the calculated ratio.
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.
Who should use this tool
Web developers and designers building accessible interfaces, and anyone checking that text is legible against its background before shipping. Especially useful when meeting WCAG requirements for a client, an audit, or a public-sector project where accessibility compliance is mandatory rather than optional.
Benefits
- Calculates the exact WCAG contrast ratio between two colours
- Tells you whether text meets AA and AAA levels
- Distinguishes thresholds for normal and large text
- Checks colours instantly and entirely in your browser
Practical use cases
- Verifying body text passes WCAG AA on a page
- Choosing a readable link colour for a background
- Auditing a colour palette for accessibility compliance
- Testing button label contrast before launch
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.
What counts as large text for WCAG contrast?
WCAG treats text as large when it is at least 24px regular weight or about 18.66px bold. Large text needs a lower contrast ratio of 3:1 for AA, while normal text needs 4.5:1. Bigger, bolder letters are easier to read, so the standard relaxes the requirement.
How is the contrast ratio actually calculated?
The ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker. Values range from 1:1 for identical colours up to 21:1 for pure black on white, the maximum possible contrast.