WCAG Color Contrast Checker
WCAG Color Contrast Checker is a tool designed to evaluate the color contrast between text and background according to the Web Content Accessibility Guidelines (WCAG). Its primary purpose is to ensure that color combinations are accessible to users with visual impairments, including low vision and color blindness.
Contrast Results
| WCAG AA | WCAG AAA | |
|---|---|---|
| Normal Text | - | - |
| Large Text | - | - |
| Bold Text | - | - |
Preview
Conformance Levels: AA and AAA
WCAG defines three levels of conformance: A (lowest), AA (intermediate), and AAA (highest). When it comes to color contrast, the most relevant levels are AA and AAA, as they specify the minimum contrast ratios required for readability.
Level AA Requirements
For normal text: The contrast ratio must be at least 4.5:1
For large text (at least 18pt regular or 14pt bold): The contrast ratio must be at least 3:1.
Level AAA Requirements
For normal text: The contrast ratio must be at least 7:1.
-
For large text: The contrast ratio must be at least 4.5:1.
The WCAG Color Contrast Checker calculates the contrast ratio between two colors (e.g., #FFFFFF on #000000) and indicates whether the combination passes the AA and/or AAA criteria.
WCAG Documentation
Detailed information about color contrast requirements can be found in the official WCAG documentation published by the W3C:
-
WCAG 2.1, Success Criterion 1.4.3 (Contrast – Minimum):
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html -
WCAG 2.1, Success Criterion 1.4.6 (Contrast – Enhanced):
https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
The full WCAG 2.1 specification is available here:
https://www.w3.org/TR/WCAG21/