How to Check Color Contrast for WCAG Accessibility (2026)
You can check whether your color combination meets WCAG accessibility standards in seconds with our free Color Contrast Checker. Enter a text color and a background color as hex codes, and instantly see the contrast ratio from 1:1 to 21:1 along with AA and AA A pass/fail badges for normal and large text.
What Is Color Contrast and Why Does It Matter?
Color contrast measures the difference in luminance between two colors — typically text and its background. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios to ensure text is readable by people with low vision, color vision deficiencies, or in less-than-ideal viewing conditions. The ratio is calculated by comparing the relative luminance of the lighter color to the darker one. WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these thresholds is essential for inclusive web design and is often a legal requirement for public-sector and enterprise websites.
How to Use Our Color Contrast Checker
- Open the Color Contrast Checker and enter the Text Color as a hex code.
- Enter the Background Color as a hex code.
- Read the Contrast Ratio and check the AA and AAA badges for both normal and large text.
- Adjust either color until you reach the required level, then copy the passing combination.
Example Contrast Results
| Text | Background | Ratio | AA Normal | AAA Normal |
|---|---|---|---|---|
#000000 | #ffffff | 21:1 | Pass | Pass |
#333333 | #f5f5f5 | 12.6:1 | Pass | Pass |
#666666 | #ffffff | 5.4:1 | Pass | Fail |
#999999 | #ffffff | 2.8:1 | Fail | Fail |
#ffffff | #3B82F6 | 4.6:1 | Pass | Fail |
Common Use Cases
- Web design audits — verify every text-background combination in your color palette passes AA as a baseline.
- Brand color selection — test whether your brand colors work as text on white, black, or tinted backgrounds.
- Dark mode design — ensure light text on dark backgrounds has sufficient contrast, which can be harder to achieve than the reverse.
- Form and UI text — check helper text, placeholder text, and labels that often use lighter, lower-contrast colors.
FAQ
What contrast ratio does WCAG AA require?
WCAG AA requires a minimum of 4.5:1 for normal-sized text and 3:1 for large text (18pt or larger, or 14pt bold or larger). These are the most common targets for web accessibility compliance.
What is the difference between AA and AAA?
AAA is a stricter standard that requires 7:1 for normal text and 4.5:1 for large text. While not always achievable with brand colors, aiming for AAA where possible improves readability for all users, including those with significant vision loss.
How is contrast ratio calculated?
The ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color. Luminance is computed from the sRGB color space using weighted RGB channel values. Our Color Contrast Checker applies the official WCAG formula.
Does this work for links and non-text elements?
WCAG also defines contrast requirements for non-text elements like icons, form inputs, and focus indicators (at least 3:1 against adjacent colors). The checker works for any two colors — test your link color against the background separately.
Is the Contrast Checker free?
Yes. The Color Contrast Checker is completely free with no signup and runs entirely in your browser.
Try our free Color Contrast Checker to ensure your color combinations are accessible.