Accessible color contrast: what WCAG 2.2 requires and how to pass

Updated 2026-09-11 · by the ColorSwoop team

Hundreds of millions of people have a color vision deficiency, and everyone reads low-contrast text more slowly. Contrast is the cheapest accessibility win there is.

The numbers

How the ratio is calculated

Each color is converted to relative luminance (a weighted, gamma-corrected mix of its red, green and blue). The ratio is (L_lighter + 0.05) / (L_darker + 0.05). Black on white is 21:1; a mid gray on white is around 4.5:1. Try any pair in the contrast checker.

Fixing a failing pair

1. Keep the hue; change the lightness. Darken text or lighten background in small steps until it passes.
2. If the brand color must stay, use it for large text, borders or backgrounds, and choose a darker shade for body text. Color pages on ColorSwoop list shades for this reason.
3. Never rely on color alone: add icons, labels or underlines for links and states.

Color blindness

Every palette page on ColorSwoop now has a Color blindness simulation section: switch between protanopia, deuteranopia, tritanopia and grayscale to see the palette as those viewers do, and read which pairs become hard to tell apart. Red-green deficiencies are the most common. Avoid red/green as the only distinction, prefer blue/orange pairs for charts, and vary lightness between adjacent colors so they remain distinguishable in grayscale. Palettes with clear lightness steps, like most minimal and gradient palettes, are naturally safer.

Checklist before launch

• Body text ≥ 4.5:1 in light and dark mode.
• Buttons and form borders ≥ 3:1 against their surroundings.
• Focus indicators visible and ≥ 3:1.
• Information never conveyed by color alone.

FAQ