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).
.card-caption {
color: #767676; /* ~3.8:1 on #0f0f0f */
background: #0f0f0f;
}.card-caption {
color: #b3b3b3; /* ~8.6:1 on #0f0f0f */
background: #0f0f0f;
}FAQ
What contrast ratio does WCAG 2.2 require?
At AA, normal text needs a contrast ratio of at least 4.5:1 and large text needs 3:1. AAA requires 7:1 for normal text and 4.5:1 for large text.
Does a 3:1 contrast ratio always pass WCAG?
No. A 3:1 ratio is enough for large text and selected interface components and informative graphics. Normal text at AA needs 4.5:1.
How should I check color contrast correctly?
Check the real text–background pair and test hover, focus and disabled states separately. For text over an image or gradient, assess the worst background area; an automated ratio does not replace design review.