Color Contrast Checker

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. The contrast requirements in WCAG 1.4.3 ensure that text is readable by people with low vision, colour blindness, or who are viewing screens in bright sunlight.

The standard defines a contrast ratio — a number from 1:1 (no contrast, identical colours) to 21:1 (maximum contrast, black on white). The higher the ratio, the more readable the text.

WCAG AA vs AAA — the full requirements

AA is the legal minimum in most accessibility standards worldwide — Section 508 (US), EN 301 549 (EU), and WCAG 2.1 compliance all require AA. AAA is recommended for text-heavy content like documentation, news articles, and legal text.

How contrast ratio is calculated

The contrast ratio uses relative luminance — how bright a colour appears to the human eye, accounting for the fact that green contributes more to perceived brightness than red or blue.

// Step 1: convert each channel to linear light
function linearize(channel) {
  const s = channel / 255;
  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
}

// Step 2: calculate relative luminance (0 = black, 1 = white)
function luminance(r, g, b) {
  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
}

// Step 3: contrast ratio (always >= 1:1)
function contrastRatio(lum1, lum2) {
  const [hi, lo] = lum1 > lum2 ? [lum1, lum2] : [lum2, lum1];
  return (hi + 0.05) / (lo + 0.05);
}

Most common contrast failures

• Light grey text on white — #999999 on #ffffff = 2.85:1. Fails AA for normal text. Very common in placeholder text and secondary labels.
• Coloured text on coloured background — brand colours often look vivid but have low contrast. Blue on green, orange on yellow.
• Disabled state text — intentionally low contrast, but WCAG 1.4.3 applies to all visible text unless technically disabled (greyed-out with pointer-events: none).
• Text over images — background images change luminance across the image. Test the worst-case area.
• Placeholder text — browser defaults are often #999 or lighter. Fails on white backgrounds.

Check contrast ratio in code

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function lin(c) { const s = c/255; return s <= 0.04045 ? s/12.92 : Math.pow((s+0.055)/1.055, 2.4); }
function lum({r,g,b}) { return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b); }
function ratio(fg, bg) { const [hi,lo] = [lum(fg),lum(bg)].sort((a,b)=>b-a); return (hi+0.05)/(lo+0.05); }

// Usage
const r = ratio(hexToRgb('#ffffff'), hexToRgb('#0d0d0d'));
console.log(r.toFixed(2));         // → 19.69
console.log(r >= 4.5 ? 'AA PASS' : 'AA FAIL'); // → AA PASS