Light Gray Text on White Is a Bad Idea (Contrast Basics)
Designers love subtle gray, users hate it. How contrast affects readability and SEO. WCAG 2.2 standards.
“It looks so clean and minimalist,” says the designer, staring at light‑gray text on a white background on a 4K retina display in a dark room. “I can’t see anything,” says the user sitting on a bus with sunlight on the screen. Contrast isn’t “decoration.” It’s functionality.
WCAG 2.2 rules: AA vs AAA
The Web Content Accessibility Guidelines (WCAG) define specific mathematical ratios.
- AA (minimum): Body text contrast must be at least 4.5:1. Large text can be 3:1.
- AAA (ideal): Body text 7:1. This is the gold standard we recommend for finance and healthcare.
Color blindness: 8% of men
One in twelve men is color‑blind.
The most common type is red‑green (deuteranopia). If your error message is red and your success message is green, and you don’t use icons, 8% of users won’t understand what happened. Solution: Always add “double coding.” Color + icon (checkmark or exclamation). Color + text (“Error!”).
Tools for designers:
Don’t guess, measure. Use tools like Stark (Figma plugin) or Contrast (macOS app) to check contrast in real time. If your brand color is too light, use a darker variant for text.
FAQ: Contrast
Is black‑on‑white always best? +
Not always. Pure black (#000000) on pure white (#FFFFFF) can cause eye fatigue (too harsh). We recommend dark gray (#1A1A1A) on soft white (#F5F5F5).
Does this affect SEO? +
Yes. Google “sees” when text is too similar to the background and may treat it as “hidden text” (cloaking), which can lead to penalties.
We’ll test your design
Is your website readable for everyone? We’ll audit and fix the issues.
Design audit →SIA DESIGN
Design and web development
The SIA DESIGN team writes practical guides on web design, development and SEO.
Loe rohkem SIA DESIGN meeskonnast →
