WCAG thresholds at a glance
- AA: 4.5:1 normal text, 3:1 large text and UI elements (SC 1.4.3, 1.4.11).
- AAA: 7:1 normal text, 4.5:1 large text (SC 1.4.6).
- Exceptions: logos, decorative text and inactive elements.
In practice
Contrast must be checked on real color combinations — including hover, focus and disabled states, and text on images and gradients. Note that WCAG 3 is working on a new perceptual model (APCA) that better reflects readability in dark themes.
Example
On a dark background (#0f0f0f), gray text #767676 fails AA (~3.8:1), while #b3b3b3 passes (~8.6:1).
CSS
.card-caption {
color: #767676; /* ~3.8:1 on #0f0f0f */
background: #0f0f0f;
}CSS
.card-caption {
color: #b3b3b3; /* ~8.6:1 on #0f0f0f */
background: #0f0f0f;
}