Developer Tools
WCAG Color Contrast Checker
Check colour contrast ratio against WCAG AA and AAA accessibility levels.
Free foreverRuns in your browserNo sign-up
Almost before we knew it
we had left the ground. The quick brown fox jumps over the lazy dog.
Contrast ratio
7.58:1
AA normalPass
AA largePass
AAA normalPass
AAA largePass
WCAG requires 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18.66px bold or 24px) needs 3:1 for AA and 4.5:1 for AAA.
About the WCAG Color Contrast Checker
Readable text needs enough contrast between the text and its background. The WCAG accessibility guidelines set minimum contrast ratios.
This checker computes the contrast ratio between two colours and shows whether it passes AA and AAA for normal and large text, with a live preview.
It helps you design interfaces that are readable for everyone, including people with low vision.
Key features
- Live contrast ratio and preview
- AA and AAA pass/fail for normal and large text
- Colour pickers and hex input
- Runs entirely in your browser
How to use
- 1Pick or enter the text and background colours.
- 2Read the contrast ratio and the AA/AAA results.
- 3Adjust the colours until they pass the level you need.
Examples
Grey on white
Input:
#475569 on #FFFFFFOutput:
About 7.5:1 - passes AA and AAAA high ratio means the text is easy to read for most people.
Frequently asked questions
- What ratio do I need?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large text.
- What counts as large text?
- Text that is at least 24px, or 18.66px if bold. Large text is allowed a lower contrast ratio.
- How is the ratio calculated?
- It uses the WCAG relative luminance formula for each colour, then compares the lighter and darker values as (L1 + 0.05) / (L2 + 0.05).