5 Color Contrast Mistakes That Fail WCAG (and How to Fix Them)

Colour contrast failures are the most common accessibility issue found on websites — more common than missing alt text, keyboard navigation problems, or missing form labels. Most of them are not obvious until you run a contrast check, because many low-contrast colour combinations look perfectly readable to designers with normal colour vision working on high-resolution, well-lit screens.

Here are the 5 most common WCAG contrast mistakes, the exact contrast ratios they produce, and the exact fixes.

Mistake 1: Light Grey Text on a White Background

This is the number one offender. Designers often soften body text or secondary content by lightening it to grey — it looks elegant in mockups on a well-calibrated monitor. The problem: light grey text on white fails WCAG AA badly.

Common failures:

#999999 on #FFFFFF = 2.85:1 — fails AA (needs 4.5:1)
#AAAAAA on #FFFFFF = 2.32:1 — fails AA
#BBBBBB on #FFFFFF = 1.73:1 — fails AA

The fix: The darkest grey that still passes WCAG AA on white is approximately #767676 (4.54:1). For comfortable reading without accessibility concerns, use #595959 (7:1) which also passes AAA. Use the free contrast checker to test your exact grey values.

Mistake 2: White Text on a Mid-Tone Brand Colour Button

Bright brand colours make visually striking call-to-action buttons — but mid-tone colours like blues, greens, and purples often don't provide enough contrast for white text.

Common failures:

#FFFFFF on #4A90D9 (bright blue) = 2.98:1 — fails AA
#FFFFFF on #5CB85C (mid green) = 2.95:1 — fails AA
#FFFFFF on #9B59B6 (purple) = 4.07:1 — fails AA (just under 4.5)

The fix: Either darken the background colour until white text passes 4.5:1, or switch to dark text on the brand colour. Run your exact button colour through the checker and use the Auto-fix button to find the nearest passing shade.

Mistake 3: Low-Contrast Placeholder Text in Form Fields

Placeholder text in input fields is almost universally too light. Most browsers render it at around 50-60% opacity by default, and even when explicitly styled, designers typically use very light greys to visually differentiate placeholders from actual input text.

The problem: Placeholder text that fails WCAG contrast makes form fields harder to understand for users with low vision — they cannot read what the field is asking for. WCAG 2.1 explicitly requires placeholder text to meet the same 4.5:1 minimum as body text.

The fix: Set your placeholder colour explicitly in CSS to at least #767676 on a white background. If your input fields have a coloured or grey background, calculate the exact ratio for that specific combination using the contrast checker.

css

input::placeholder {

color: #767676; /* minimum for WCAG AA on white */

}

Mistake 4: Text Overlaid on a Background Image Without an Overlay

Hero sections, banner images, and testimonial backgrounds with text directly over a photograph are one of the trickiest contrast problems. The background varies across the image — some areas are light, others dark — meaning the text may pass in one area and fail in another.

The problem: WCAG requires contrast to be checked against the actual background the text sits on. If part of your hero text sits on a light sky area with a contrast of 2:1, that part fails — even if the rest of the image is dark.

The fix: Add a semi-transparent overlay between the image and the text. A black overlay at 60-70% opacity is usually sufficient to ensure 4.5:1 contrast for white text over any photographic background. Alternatively, use a solid-colour text container (a dark band or card behind the text).

css

.hero-section::before {

content: '';

position: absolute;

inset: 0;

background: rgba(0, 0, 0, 0.65);

}

Mistake 5: Disabled-Looking Active Elements

Some designers use light, low-contrast styles for navigation items, breadcrumbs, secondary links, and category labels — applying the visual weight of a disabled element to active, interactive content.

Common example: A navigation link styled as #AAAAAA on a white header (#FFFFFF) = 2.32:1 — fails AA by a significant margin.

The problem: If the element is interactive (a link, button, or control that the user can click), it must meet WCAG AA contrast regardless of its visual role in the hierarchy. Only genuinely disabled, non-functional controls are exempt from contrast requirements.

The fix: Reserve light grey styles for truly decorative or disabled elements. All active links, navigation items, and interactive controls must meet 4.5:1 on their background.

How to Audit Your Entire Website for Contrast Failures

Rather than checking colours one pair at a time, use the Palette Contrast Grid in the Web Asset Suite contrast checker. Add all your brand colours — your text colour, background colours, button colours, link colours, and accent colours — and the grid shows every possible combination's ratio in a single table. This gives you a complete picture of your accessibility status in a few minutes.

For new design work, test every colour combination before development begins. It is far easier to adjust a colour in a design file than to fix contrast issues across a fully built website.

Summary — Quick Reference

Test any colour pair instantly: webassetsuite.com/contrast-checker

Related guides: