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.
What is a good contrast ratio for accessibility?
For normal text, a good target is at least 4.5:1 at WCAG AA. Large text and selected interface elements need at least 3:1. A higher ratio leaves more readability margin on phones, in bright light and on dimmed screens.
How to check contrast step by step
- Choose the real foreground and background pair rather than only checking the design palette.
- Compare the result with the right threshold: 4.5:1 for normal text or 3:1 for large text and UI elements.
- Repeat the check for hover, focus, disabled and text over images or gradients, because the worst background area matters.
- Change the color, weight or background and test again in the full component context.
In practice
Check actual backgrounds and active states. Inactive components have an exception from these contrast requirements, but their readability still deserves a UX review. WCAG 3 and APCA research do not replace WCAG 2.2 conformance checks.
Example
On a dark background (#0f0f0f), gray text #767676 fails AA (~4.22:1), while #b3b3b3 passes (~9.14:1).
.card-caption {
color: #767676; /* ~4.22:1 on #0f0f0f */
background: #0f0f0f;
}.card-caption {
color: #b3b3b3; /* ~9.14:1 on #0f0f0f */
background: #0f0f0f;
}How to interpret the calculator
Compare thresholds before rounding: 4.499:1 does not meet 4.5:1. Two colours cannot assess text over a photograph, transparency, the entire component or site-wide WCAG conformance.
For normal text, aim for at least 4.5:1 at WCAG AA. Large text and selected interface elements need 3:1, while a higher result gives more readability margin.
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.
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.
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.