WCAG Color Contrast: Accessibility Guide for Developers

Over 300 million people worldwide have color vision deficiency. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure your content is readable by everyone — and it’s a legal requirement in many jurisdictions.

Contrast Ratio Explained

Contrast ratio measures the difference in luminance between two colors. It’s expressed as a ratio from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white).

WCAG 2.1 Requirements

Level AA is the standard requirement. Level AAA is the enhanced standard for maximum accessibility.

Common Failures

Light Gray on White

/* ❌ FAILS — 2.3:1 contrast ratio */
color: #999999;
background: #ffffff;

/* ✅ PASSES — 4.6:1 contrast ratio */
color: #767676;
background: #ffffff;

The minimum gray on white that passes WCAG AA is #767676.

Brand Colors on Light Backgrounds

Many brand colors fail contrast requirements:

/* ❌ FAILS — 3.1:1 */
color: #6366f1; /* Indigo-500 */
background: #ffffff;

/* ✅ PASSES — 5.2:1 */
color: #4338ca; /* Indigo-700 */
background: #ffffff;

Check contrast by converting colors and comparing luminance values with our Color Converter.

Fixing Contrast Issues

Strategy 1: Darken Text Colors

The simplest fix — use a darker shade of the same hue:

/* Original: hsl(239, 84%, 67%) — fails on white */
/* Fixed:    hsl(239, 84%, 45%) — passes on white */
color: hsl(239, 84%, 45%);

With HSL, reduce the lightness value until the contrast ratio meets 4.5:1.

Strategy 2: Add a Background

/* White text on dark background always has high contrast */
color: #ffffff;
background: #1a1a2e;
/* Contrast: 15.4:1 ✅ */

Strategy 3: Increase Font Size

Large text (≥ 18px or 14px bold) only needs 3:1 contrast instead of 4.5:1. If a color is borderline, consider increasing font size.

Dark Mode Accessibility

Dark mode introduces unique contrast challenges:

• Don’t use pure white (#FFFFFF) on dark backgrounds — it’s too bright and causes eye strain. Use off-white (#E0E0E0 to #F0F0F0).
• Don’t use pure black (#000000) backgrounds — use dark gray (#1A1A1A to #121212).
• Test inverted contrasts — colors that pass in light mode may fail in dark mode.

Generate accessible palettes for both light and dark modes with our Color Palette Generator.

Testing Tools

In Your Browser

Chrome DevTools has built-in contrast checking:

1. Inspect an element
2. Click on the color swatch in Styles
3. See the contrast ratio and WCAG compliance

In Your Design System

Build contrast checking into your CSS custom properties:

:root {
  /* Ensure --text-primary has 7:1 contrast against --bg-primary */
  --bg-primary: #0a0a0f;
  --text-primary: #f0f0ff; /* Contrast: 18.5:1 ✅ */
  --text-secondary: #9090b0; /* Contrast: 5.8:1 ✅ AA */
  --text-muted: #5a5a7a; /* Contrast: 3.2:1 ⚠️ Large text only */
}

This article is part of our CSS Color Systems Guide series.