Color Contrast Checker
Instantly calculate the contrast ratio between your background and text colors, and check whether the combination meets the WCAG accessibility standards (Level AA / AAA).
This tool has been used … times.
Preview
Heading Text
This is a sample of body text. Check how readable your text is when you build a real web page with this color combination. It helps you choose accessible, easy-to-read colors.
Small text (12px): copyright notices, disclaimers, and other supplementary information.
Adjust Contrast
Check the current contrast ratio. If it falls short, use the buttons below to adjust the text color.
How to Use
- Set the “Background” and “Text” colors using the color pickers or by typing a hex code.
- The “Contrast Ratio” is calculated and displayed in real time.
- Check the pass/fail result for each accessibility level (AA / AAA) in the WCAG table.
- Use the “Preview” to simulate how real UI parts (heading, button, link, etc.) will look.
- If the contrast is insufficient, click “Auto-fix to AA” to adjust the text color to the passing line in one click. For fine-tuning, use “Lighten text” / “Darken text”.
About the WCAG 2.2 standards
- Level AA (recommended): normal text 4.5:1 or higher / large text 3.0:1 or higher
- Level AAA (highest): normal text 7.0:1 or higher / large text 4.5:1 or higher
- Large text: 18pt (about 24px) or larger, or 14pt (about 18.7px) or larger when bold
FAQ
What is a contrast ratio and how is it calculated?
A contrast ratio expresses the difference in brightness (relative luminance) between the background and text colors as a value from 1:1 to 21:1. It is calculated with the WCAG formula “(luminance of the lighter color + 0.05) ÷ (luminance of the darker color + 0.05)”, so black on white reaches the maximum of 21:1. This tool computes the ratio automatically using that formula.
What is the difference between WCAG “AA” and “AAA”?
They are two levels of strictness. Level AA (4.5:1 or higher for normal text) is the practical standard recommended for typical websites, and it is widely adopted by public-sector sites. Level AAA (7.0:1 or higher for normal text) is a stricter, top-tier standard; because meeting it everywhere is difficult, it is realistic to target it only for important text such as body copy.
How large does text have to be to count as “large text”?
WCAG treats text of 18pt (about 24px) or larger, or 14pt (about 18.7px) or larger when bold, as “large text”. Large characters stay legible even at a somewhat lower contrast, so a more lenient standard applies (AA: 3.0:1, AAA: 4.5:1). Page headings and large button labels are typical examples.
What happens if I use a color combination that fails the standard?
Text with insufficient contrast is hard to read not only for users with low vision or color vision deficiency, but also for anyone viewing a phone in bright sunlight or for older users, which leads to people leaving the page. When it falls short, the “Auto-fix to AA” button adjusts the text color to the passing line in one click while keeping its hue.