On each web page, is the contrast between the text color and its background color high enough (except in special cases)?
A visually impaired user visiting your page does not see the same shades as you do. For someone who struggles to distinguish contrasts — affecting approximately 8% of men with color vision deficiency and a third of seniors — light gray text on a white background is unreadable, even if your designer finds it elegant. Contrast ratio is the number that objectively tells whether text is readable or not.
The rule is simple with two thresholds. For text without bold weight smaller than 24 px or bold text smaller than 18.5 px: minimum ratio of 4.5:1. For larger text (≥ 24 px without bold, ≥ 18.5 px bold): minimum ratio of 3:1. These thresholds also apply to text in images. No exceptions for body text.
The reference tool for measuring: Includdy, available on Mac and Windows. Take the text color, take the background color directly beneath that text, and read the ratio. If your site is already live, A11ygator can automatically detect obvious problems — but that doesn't replace manual verification of edge cases and gradients.
Beware of complex backgrounds. Text placed over an image or gradient doesn't have a uniform background: measure contrast at the most unfavorable point, where the background is closest to the text color.
5 tests to check the contrast level of text
Contrast of normal text without weight (< 24 px)
Target: all text (and text in images) without bold weight whose rendered size is smaller than 24 px.
- Identify these texts on the page, prioritizing those whose color seems close to the background color.
- For each, measure the contrast ratio between the text color and the color of its direct background.
- Verify that the ratio is ≥ 4.5:1 — OR that a mechanism (theme button, high contrast selector) allows the user to achieve this ratio.
- If this ratio is reached for each affected text, the test is validated. A single text below the threshold without an alternative mechanism is enough to fail it.
Contrast of bold text (< 18.5 px)
Target: all text (and text in images) in bold whose rendered size is smaller than 18.5 px.
- Identify these texts on the page — think of button labels, badges, tags and captions often set in bold at small sizes.
- For each, measure the contrast ratio between the text color and the color of its direct background.
- Verify that the ratio is ≥ 4.5:1 — OR that a mechanism allows the user to achieve this ratio.
- If this ratio is reached for each affected text, the test is validated.
Contrast of large text without weight (≥ 24 px)
Target: all text (and text in images) without bold weight whose rendered size is greater than or equal to 24 px.
- Identify these large texts on the page — headings, taglines, hero sections.
- For each, measure the contrast ratio between the text color and the color of its direct background.
- Verify that the ratio is ≥ 3:1 — OR that a mechanism allows the user to achieve this ratio.
- If this ratio is reached for each affected text, the test is validated.
Contrast of large bold text (≥ 18.5 px)
Target: all text (and text in images) in bold whose rendered size is greater than or equal to 18.5 px.
- Identify these texts on the page — bold subtitles, prominent CTAs, section titles in
font-weight: 700. - For each, measure the contrast ratio between the text color and the color of its direct background.
- Verify that the ratio is ≥ 3:1 — OR that a mechanism allows the user to achieve this ratio.
- If this ratio is reached for each affected text, the test is validated.
Contrast of alternative contrast mechanism
Target: the mechanisms offered to achieve compliant contrast ("high contrast" button, text size selector, etc.).
- Identify all such mechanisms on the page.
- For each, verify that the mechanism itself — its label, its text icon — respects the applicable contrast thresholds (4.5:1 or 3:1 depending on its size).
- If all mechanisms are themselves compliant, the test is validated. A contrast mechanism that is unreadable because it lacks sufficient contrast is a contradiction.
Examples
❌ Non-compliant : Light gray body text on white background
<p style="color: #767676; background-color: #ffffff; font-size: 16px;">
Review our terms and conditions before confirming your order.
</p>The gray #767676 on white background gives a ratio of 4.48:1 — just below the 4.5:1 threshold required for 16 px text without bold. This case illustrates a frequent pitfall: the color "appears" accessible to the naked eye but fails upon measurement. A visually impaired user or one viewing the page on a poorly calibrated screen will not be able to read this text comfortably.
✅ Compliant : Compliant body text with slightly darkened color
<p style="color: #595959; background-color: #ffffff; font-size: 16px;">
Review our terms and conditions before confirming your order.
</p>The gray #595959 on white background reaches a ratio of 7.0:1, well above the 4.5:1 threshold. The visual difference between #767676 and #595959 is imperceptible to the majority of users, but readability gains robustness for visually impaired people, seniors, and anyone viewing the page in bright sunlight.
❌ Non-compliant : Large heading with insufficient contrast on colored background
<h2 style="color: #ffffff; background-color: #a8c8e8; font-size: 28px; font-weight: 400;">
Our mission
</h2>White on pastel blue (#a8c8e8) gives a ratio of 2.0:1. Even for a 28 px heading without bold (reduced threshold to 3:1), this is non-compliant. The light pastel background creates the illusion of good contrast because the tint is bright, but white on light never works.
✅ Compliant : CTA button with white text on sufficiently dark blue background
<button style="
background-color: #0055cc;
color: #ffffff;
font-size: 16px;
font-weight: 700;
padding: 12px 24px;
border: none;
border-radius: 4px;
">
Request a quote
</button>White (#ffffff) on blue #0055cc reaches a ratio of 7.2:1. The text is bold at 16 px (below 18.5 px), so the applicable threshold is 4.5:1. The button is well above compliance for tests 3.2.1 and 3.2.2. This combination remains readable on degraded screens, in light mode as in full sunlight.
Tips and pitfalls
⚠️ The gray #767676 on white: the classic that fails
This gray is famous in the accessibility community for a reason: it gives 4.48:1, just below the 4.5:1 threshold. Dozens of design systems use it as a "secondary gray" without knowing it's non-compliant. Replace it with #595959 (7.0:1) or #6b6b6b (5.7:1) depending on the desired rendering.
⚠️ Text on gradient: measure at the most unfavorable point
A hero with white text on a gradient going from dark blue to light blue can be compliant on the left and non-compliant on the right. Criterion 3.2 is evaluated at the worst part of the background. If the ratio falls below the threshold at any one point, it's non-compliant. Solution: add a drop shadow to the text or a semi-opaque veil between the text and the image.
⚠️ Logotypes and brand names: out of scope
Text that is part of a logo or brand name is not subject to criterion 3.2. If your client's logo uses light gray on white, there's no need to modify it: the criterion is non-applicable. However, any adjacent text (tagline, baseline, description) remains in scope.
⚠️ Disabled elements: the disabled is exempted
A button with the disabled attribute or an inactive form field is not subject to criterion 3.2. The user cannot interact with it: low contrast visually signals unavailability. Be careful, however: if you simulate a disabled state with CSS without using the disabled attribute, the criterion applies fully.
💡 The alternative contrast mechanism must itself be readable
If you offer a "High contrast mode" button to compensate for insufficient contrast on the page, this button must itself respect the thresholds of criterion 3.2 — this is the object of test 3.2.5. An unreadable contrast selector because it lacks sufficient contrast is a non-compliance within a non-compliance.
⚠️ Text in image: same rules, different verification
Text rendered in a bitmap image (<img> with text embedded) obeys the same thresholds as HTML text. But you cannot use the eyedropper directly on the page: extract the image, open it in an editor, and measure the exact colors of the source image. JPEG compression can create artifacts that skew the measurement on screen.
Frequently asked questions
How do I measure the contrast of text on a gradient or image background?
Measure at the most unfavorable point, where the background is closest to the text color. Use Includdy: its eyedropper tool lets you sample the exact color on screen. If the ratio drops below the threshold at even one location, the text is non-compliant. Add an opaque background behind the text or a drop shadow to secure contrast across the entire background.
What is the difference between CSS size and rendered size for evaluating RGAA contrast?
It's the rendered size — what the browser actually displays, after applying styles. Text declared at 1.5rem on a 16 px base is rendered at 24 px: it falls into the "large text" category (3:1 threshold without bold). Also consider CSS transforms like transform: scale() that change perceived size without changing the computed value.
When is purely decorative text on an image exempt from the RGAA contrast criterion?
Only when the text is purely decorative and conveys no useful information. But "decorative" has a strict meaning: the text must not be necessary for page comprehension. A marketing tagline, a slogan, a date — even on a beautiful photo — conveys information and must be compliant. When in doubt, apply the criterion.
What contrast threshold applies to form field placeholders under RGAA?
Yes. The placeholder attribute generates text rendered in the field: it is subject to criterion 3.2. However, browsers apply a very light color by default for placeholders (often around #767676 or lighter). Explicitly define the color with ::placeholder { color: #595959; } to ensure compliance.
What is the difference between AA (4.5:1) and AAA (7:1) contrast levels under RGAA?
RGAA 4.1 requires AA level, which is 4.5:1 for normal text and 3:1 for large text. AAA level (7:1 and 4.5:1) is not required but recommended for high-traffic interfaces or senior audiences. In practice, aiming for 4.5:1 minimum on all text, including large headings, covers most situations without extra effort.