Skip to content
aulys.app · accessibility 100read the statement
Aulys

WCAG 1.4.6 · Level AAA

How do I fix WCAG color contrast?

Make normal text at least 7:1 against its background for WCAG AAA (4.5:1 for AA). Large text (24px, or 18.66px bold) needs 4.5:1 for AAA, 3:1 for AA. Darken the text or lighten the background until the ratio passes.

What it is

Color contrast measures the luminance difference between text and its background. WCAG sets minimum ratios so text stays readable.

Why it matters

Low contrast is the single most common accessibility failure on the web. It shuts out people with low vision and anyone reading in bright light or on a poor screen.

How to fix it

  1. 01Measure the exact ratio between your text color and the color directly behind it.
  2. 02If it fails, adjust lightness — darken text on light backgrounds, lighten it on dark — until it reaches 7:1 (AAA) or 4.5:1 (AA).
  3. 03Re-check over every background the text actually sits on, including images and overlays.

How Aulys catches it

Aulys reads the real fill and text colors of every frame, computes the ratio, and suggests the nearest passing color — before the issue ever reaches code.

Scan your first frame free