Bad Color Contrast Examples — What Not to Do in Web Design 2026
If you've ever seen text that's nearly impossible to read, you've witnessed bad color contrast. Low contrast is the most common accessibility violation on the web — affecting 96% of websites. This guide shows you the worst color contrast mistakes and how to avoid them.
These bad color contrast examples will help you identify and fix issues before they become accessibility violations — and potential lawsuits.
📌 Quick Answer — What is Bad Color Contrast?
Bad color contrast occurs when text and background colors are too similar, making text difficult or impossible to read. Common examples include light gray on white, light blue on white, and yellow on white. These combinations fail WCAG 2.1 AA requirements.
✅ Test Your Website's Color Contrast
Use our free color contrast checker to test your text and background combinations against WCAG 2.1 standards.
Free Color Contrast Checker →What is Bad Color Contrast?
Bad color contrast is when the difference in brightness between text and its background is too small. This makes text difficult to read for users with low vision, color blindness, or when viewing content on mobile devices in bright sunlight.
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Any combination that falls below these ratios is considered bad color contrast.
📊 The Problem with Bad Color Contrast
- 96% of websites have color contrast violations
- 1.3 billion people worldwide have visual impairments
- ADA lawsuits frequently cite color contrast as a violation
- 61 million Americans struggle with low-vision conditions
Worst Color Contrast Offenders
1. Light Gray on White — The Most Common Mistake
This is light gray text on a white background — it's almost invisible to many users.
Contrast Ratio: 2.2:1 (Fails WCAG AA — needs 4.5:1)
The Fix: Use dark gray (#555555 or darker) instead of light gray (#999999).
2. Light Blue on White
This light blue text blends into white backgrounds, making it hard to read.
Contrast Ratio: 2.1:1 (Fails WCAG AA)
The Fix: Use darker blue (#1976D2) or a different background color.
3. Yellow on White — Completely Invisible
Yellow text on white is virtually invisible to most users — a critical accessibility failure.
Contrast Ratio: 1.1:1 (Fails WCAG AA — extremely poor)
The Fix: Never use yellow on white. Use dark text on a light background or light text on a dark background.
4. Light Green on White
Light green text on white is often used for success messages — but it's difficult to read.
Contrast Ratio: 1.9:1 (Fails WCAG AA)
The Fix: Use dark green (#2E7D32) for success messages or add a background shade.
5. Pink on White
Pink text on white is decorative but inaccessible for most users.
Contrast Ratio: 2.1:1 (Fails WCAG AA)
The Fix: Use dark pink (#C2185B) or avoid pink text on white backgrounds.
More Bad Color Contrast Examples
6. White Text on Light Gray
White text on light gray is almost invisible — a common mistake on subtle backgrounds.
Contrast Ratio: 1.6:1 (Fails WCAG AA)
The Fix: Use white text on dark backgrounds (dark gray, dark blue, black) — not light backgrounds.
7. Red Text on Dark Background
Red text on dark backgrounds is hard to read, especially for users with color blindness.
Contrast Ratio: 2.9:1 (Fails WCAG AA for normal text)
The Fix: Use red only on white or very light backgrounds. Or use a lighter red (#EF5350) on dark backgrounds.
8. Blue Text on Purple Background
Blue text on purple has very low contrast — the brightness levels are too similar.
Contrast Ratio: 2.4:1 (Fails WCAG AA)
The Fix: Avoid using blue on purple. Use white text on purple instead.
9. Orange Text on Light Orange
Orange text on light orange is readable but often fails contrast tests.
Contrast Ratio: 4.2:1 (Fails WCAG AA — needs 4.5:1)
The Fix: Darken the orange (#BF360C) or lighten the background more.
10. Gray Text on Blue Background
Gray text on blue is difficult to read because the brightness levels are similar.
Contrast Ratio: 2.3:1 (Fails WCAG AA)
The Fix: Use white text on blue backgrounds (#FFFFFF) — it provides excellent contrast.
🎨 Avoid These Color Mistakes
Test your color combinations with our free color contrast checker before they become violations.
Free Color Contrast Checker →No signup. Instant results. WCAG 2.1 AA.
Why Bad Color Contrast Is a Legal Risk
Bad color contrast isn't just a design issue — it's a legal risk. ADA lawsuits frequently cite color contrast violations, and the European Accessibility Act (EAA) also requires WCAG 2.1 Level AA compliance, which includes color contrast.
Over 5,100 ADA lawsuits were filed in 2025, and many of them included color contrast as a violation. Low contrast text is easy to identify, easy to measure, and easy to fix — so plaintiffs' lawyers often target it.
How to Fix Bad Color Contrast
1. Darken the Text
If your text is too light, darken it. For example, change #999999 to #555555.
2. Lighten the Background
If your background is too dark, lighten it. For example, change #333333 to #FFFFFF.
3. Choose Different Colors
If darkening or lightening doesn't work, choose a completely different color combination.
4. Add a Background Shade
If text is on a busy background image, add a shaded overlay behind the text to improve contrast.
5. Use a Color Contrast Checker
Always test your color combinations with a color contrast checker before using them in production.
Frequently Asked Questions — Bad Color Contrast
🎨 Test Your Color Combinations Today
Free color contrast checker — no signup required. Instant results.
Free Color Contrast Checker →Internal Links — Color Contrast Resources
- 🎨 Free Color Contrast Checker
- 🇺🇸 ADA Compliance Checker
- ⌨️ Keyboard Navigation Checker
- 📢 Screen Reader Checker
- ⚖️ ADA Title II & III — Full Guide
- 🇪🇺 European Accessibility Act (EAA)
- 📖 What is Color Contrast? Complete Guide
- 📖 Contrasting Colors — Guide for Designers
- 📖 WCAG Color Contrast Requirements Explained
💬 Comments (0)