WCAG Color Contrast Checker

Understanding WCAG Color Contrast

Color contrast is one of the most common accessibility failures on the web — and one of the easiest to fix. The Web Content Accessibility Guidelines (WCAG) define a measurable contrast ratio between text and its background, ranging from 1:1 (no contrast) to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read, especially for people with low vision or color deficiencies.

The Thresholds You Need to Hit

• AA — Normal text: 4.5:1. The baseline requirement for body copy. Most legal and procurement accessibility standards reference WCAG AA.
• AA — Large text: 3:1. "Large" means 18.66px (14pt) bold or 24px (18pt) regular and above.
• AAA — Normal text: 7:1. The enhanced level for maximum readability.
• AAA — Large text: 4.5:1.
• UI components & graphics: 3:1. Buttons, form borders, icons, and focus indicators must reach 3:1 against adjacent colors.

How the Ratio Is Calculated

Contrast isn't a simple color difference. WCAG computes the relative luminance of each color — a weighted measure of perceived brightness that accounts for how the human eye is more sensitive to green than to red or blue — then divides the lighter value by the darker one (with a small offset). That's why two colors can look different yet still fail: it's brightness, not hue, that drives readability.

Designing for Contrast

If a pairing fails, you usually don't need to abandon your palette — just adjust lightness. Darken the text or lighten the background until you cross the threshold. Avoid relying on color alone to convey meaning (pair it with text or icons), and remember that placeholder text, disabled states, and text over images all need to meet contrast too. Aim for AA as a minimum and AAA where readability is critical, such as long-form content.