Color Contrast Checker

Test foreground and background color combinations against WCAG 2.1 AA and AAA accessibility standards.

About WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) define contrast ratio requirements to ensure that text is readable by people with visual impairments, including low vision and color blindness. Meeting these standards is also a legal requirement for many websites under laws such as the Americans with Disabilities Act (ADA) and the European Accessibility Act.

The contrast ratio is calculated from the relative luminance of each color, which accounts for how human eyes perceive brightness. Pure white (#ffffff) has a luminance of 1.0 and pure black (#000000) has a luminance of 0.0, giving the maximum possible ratio of 21:1.

How to Fix Low Contrast

  • Darken the text color or lighten the background (or both)
  • Increase font size to 18pt+ to qualify for the more lenient large-text threshold
  • Use bold weight at 14pt+ as it also qualifies as large text
  • Avoid light grey text on white backgrounds — a common accessibility failure
  • Test your full color palette, not just primary brand colors

Frequently Asked Questions

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with low vision or color blindness. A ratio of 4.5:1 is required for normal text at AA level, and 7:1 for AAA.

What is the difference between WCAG AA and AAA?

AA is the standard compliance level required by most laws and regulations (ADA, EN 301 549). It requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA is the enhanced level (7:1 normal, 4.5:1 large) — recommended but not always legally mandated.

What counts as “large text” in WCAG?

Large text is 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text has lower contrast requirements because it is inherently easier to read.

My contrast ratio is 4.49:1 — does it pass?

No. The minimum required ratio for WCAG AA normal text is 4.5:1. A ratio of 4.49:1 fails. Try darkening the text color or lightening the background slightly to push past the threshold.

Does this tool work with transparent backgrounds?

This tool works with solid opaque colors. For transparent or semi-transparent backgrounds, first composite the actual rendered background color, then use that as the background input.

Why do some design tools show different contrast ratios?

Some tools round differently or use slightly different linearization formulas. The WCAG 2.1 algorithm is well-defined, but floating-point rounding can cause minor differences. This tool follows the official WCAG 2.1 specification.