WCAG Color Accessibility: All 7 Success Criteria Explained

criteria map

:focus-visible {
  outline: 2px solid #1D4ED8; /* 8.6:1 on white */
  outline-offset: 2px;
  border-radius: 4px;
}

Testing & Standards

WCAG color criteria audit script — tests SC 1.4.3, 1.4.11, and focus ring contrast

/* ═══════════════════════════════════════════════════════
   WCAG Color Criteria Auditor
   Tests text contrast (1.4.3), non-text contrast (1.4.11),
   and focus ring visibility (2.4.7 / 2.4.13).
   Run in browser console on any page.
   ═══════════════════════════════════════════════════════ */

function luminance(r: number, g: number, b: number): number {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function parseColor(color: string): [number, number, number] {
  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
  return m ? [+m[1], +m[2], +m[3]] : [0, 0, 0];
}

function ratio(fg: string, bg: string): number {
  const l1 = luminance(...parseColor(fg));
  const l2 = luminance(...parseColor(bg));
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

// SC 1.4.3 — Text contrast
const textElements = document.querySelectorAll(
  'p, span, a, li, h1, h2, h3, h4, h5, h6, label, td, th, button, input, textarea'
);
const textFailures: { el: string; fg: string; bg: string; ratio: string; criterion: string }[] = [];

textElements.forEach(el => {
  const style = getComputedStyle(el);
  const fg = style.color;
  const bg = style.backgroundColor || 'rgb(255,255,255)';
  const r = ratio(fg, bg);
  const fontSize = parseFloat(style.fontSize);
  const isBold = parseInt(style.fontWeight) >= 700;
  const isLarge = fontSize >= 24 || (fontSize >= 18.66 && isBold);
  const min = isLarge ? 3 : 4.5;
  if (r < min && el.textContent?.trim()) {
    textFailures.push({
      el: `<${el.tagName.toLowerCase()}> "${el.textContent?.slice(0, 30)}..."`,
      fg, bg, ratio: r.toFixed(2), criterion: 'SC 1.4.3'
    });
  }
});

// SC 1.4.11 — Non-text contrast (borders)
const interactiveElements = document.querySelectorAll(
  'input, select, textarea, button, [role="button"], [role="checkbox"], [role="radio"]'
);
const nonTextFailures: { el: string; border: string; bg: string; ratio: string; criterion: string }[] = [];

interactiveElements.forEach(el => {
  const style = getComputedStyle(el);
  const borderColor = style.borderColor;
  const bg = style.backgroundColor || 'rgb(255,255,255)';
  if (borderColor && borderColor !== bg) {
    const r = ratio(borderColor, bg);
    if (r < 3) {
      nonTextFailures.push({
        el: `<${el.tagName.toLowerCase()}> .${el.className?.split(' ')[0] || ''}`,
        border: borderColor, bg, ratio: r.toFixed(2), criterion: 'SC 1.4.11'
      });
    }
  }
});

console.group('WCAG Color Audit Results');
console.log(`SC 1.4.3 Text Contrast: ${textFailures.length} failures`);
console.table(textFailures.slice(0, 20));
console.log(`SC 1.4.11 Non-text Contrast: ${nonTextFailures.length} failures`);
console.table(nonTextFailures.slice(0, 20));
console.log('SC 2.4.13 Focus: Tab through manually — no automated check available');
console.groupEnd();

Copy and paste into your project — free to use.

Pro Tips

• ▸
  SC 1.4.1 is Level A — the lowest bar — yet 73% of sites fail it. One fix covers most failures: never let color be the ONLY indicator. Always pair color with text, icon, pattern, or position.
• ▸
  SC 1.4.11 catches more sites than 1.4.3 in manual audits. The reason: automated tools check text well but miss borders, icons, and chart elements. Add non-text contrast to your design system token validation.
• ▸
  Focus appearance (2.4.13) has a mathematical formula: the indicator area must equal or exceed a 2px-thick perimeter of the component. For a 200×40px button, that is (200+200+40+40) × 2 = 960 square pixels minimum.
• ▸
  WCAG 3.0 will replace the luminance-ratio formula with APCA. Start measuring both now. A color pair that passes WCAG 2 at 4.5:1 may fail APCA at normal weight. Future-proof by targeting 7:1 / Lc 75+ for body text.
• ▸
  The grayscale test catches 90% of SC 1.4.1 failures in 30 seconds. Chrome DevTools > Rendering > Emulate vision deficiencies > Achromatopsia. If the page still communicates, it passes.
• ▸
  Enforcement is accelerating. The EAA fines in Q1 2026 proved governments will act. US DOJ NPRM in Q2 2026 signals WCAG 2.2 will become binding for federal contractors. Run a full 7-criterion color audit before H2 2026 ends.
• ▸
  Pre-ship color accessibility checklist (all 7 criteria): (1) SC 1.4.1 — grayscale test passes (2) SC 1.4.3 — all text ≥4.5:1 or 3:1 large (3) SC 1.4.6 — body text ≥7:1 for AAA targets (4) SC 1.4.11 — all borders, icons, controls ≥3:1 (5) SC 1.3.3 — no instructions reference color alone (6) SC 2.4.7 — every focusable element has visible indicator (7) SC 2.4.13 — focus ring ≥2px area and ≥3:1 contrast
• ▸
  Document your exceptions. WCAG explicitly excludes: logos, purely decorative elements, inactive/disabled controls (though usability best practice still recommends 3:1 for disabled), and text in images that are not part of significant content.