How to Check Color Contrast for WCAG Accessibility (2026)
Light-grey text on white might look fine to you and be unreadable to someone with low vision, which is exactly why WCAG sets minimum contrast ratios. The Color Contrast Checker takes a text colour and a background colour as hex and shows the contrast ratio (1:1 to 21:1) with AA and AAA pass/fail badges for normal and large text, so you can fix a failing pair before it ships.
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.
What if my brand colour fails AA?
Darken or lighten it until the ratio crosses 4.5:1 (3:1 for large text): often a small lightness change is enough. You can build a set of compliant shades from your brand hue using the Hex, RGB & HSL guide.
Shipping a new palette or theme? Check every text-on-background pair in the Color Contrast Checker against AA first, and for building accessible shades from one brand colour, see Hex, RGB & HSL.