Color Contrast Checker
Check the contrast ratio between a text color and a background color against the WCAG accessibility guidelines.
- Contrast ratio
- 12.63 : 1
- Normal text, level AA (4.5:1)
- Pass
- Large text, level AA (3:1)
- Pass
- Normal text, level AAA (7:1)
- Pass
- Large text, level AAA (4.5:1)
- Pass
- Interface parts and graphics (3:1)
- Pass
What is Color Contrast Checker?
Text is hard to read when it does not stand out from its background. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios so that text is readable by people with low vision.
What this tool does
Takes two hex colors, works out their contrast ratio and shows whether they pass levels AA and AAA for normal text, large text and interface elements.
How to use it
- Enter the text color and the background color as hex codes.
- Read the ratio.
- Adjust the colors until the checks you need pass.
Did you know?
- Level AA needs a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
- Pure black on white has the highest possible ratio, 21 to 1.