Color Contrast Checker

WCAG 2.1 Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with moderately low vision. Contrast ratio is expressed as a value between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, black on white). The requirements are organized into two conformance levels:

• AA (minimum) — 4.5:1 for normal text, 3:1 for large text
• AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text

Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold (font-weight 700 or greater). Non-text UI components and graphical objects require a minimum of 3:1 contrast against adjacent colors under WCAG 2.1 Success Criterion 1.4.11.

How Contrast Ratio Is Calculated

The contrast ratio formula uses the relative luminance of two colors. Relative luminance measures the perceived brightness of a color on a scale from 0 (black) to 1 (white), weighted according to human visual sensitivity to different wavelengths.

The calculation involves three steps:

// Step 1: Linearize RGB channels (remove gamma)
function linearize(channel) {
  const c = channel / 255;
  return c <= 0.04045
    ? c / 12.92
    : Math.pow((c + 0.055) / 1.055, 2.4);
}

// Step 2: Calculate relative luminance
function luminance(r, g, b) {
  const R = linearize(r);
  const G = linearize(g);
  const B = linearize(b);
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}

// Step 3: Calculate contrast ratio
function contrastRatio(lum1, lum2) {
  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  return (lighter + 0.05) / (darker + 0.05);
}

The luminance coefficients (0.2126, 0.7152, 0.0722) reflect that the human eye is most sensitive to green light and least sensitive to blue. The gamma linearization step is critical because sRGB values are not linearly proportional to light intensity. Skipping this step produces incorrect contrast ratios.

Common Contrast Failures and Fixes

Many popular design patterns fail WCAG contrast requirements. Light gray placeholder text (#AAA on #FFF) has a ratio of only 2.32:1, far below the 4.5:1 minimum. Medium gray body text (#777 on #FFF) sits at 4.48:1, just barely failing AA. White text on brand-colored buttons often fails when the brand color is in the mid-lightness range.

To fix contrast issues without abandoning brand colors, use darker shades for text-bearing elements. For example, if your brand blue is #3B82F6 (which fails as text on white at 3.13:1), use #1D4ED8 (the 700 shade at 5.47:1) for text instead. Reserve the lighter shade for non-text elements like backgrounds, borders, or icons. The RGB to HSL converter can help you find darker shades by reducing the lightness value while keeping the same hue.

Testing Contrast in Your Workflow

Check contrast early in the design process, not as an afterthought. When building a color system, test every text-background combination in your Tailwind color palette or CSS variables against the WCAG thresholds. Automated tools catch the obvious failures, but also test with real content at actual font sizes since the large-text exception depends on rendered size, not just CSS values.