ScoreMySiteDesign
Low-contrast, hard-to-read text
By Caleb Gross · Updated · Based on Jev AI scores of 116 pages
Short answer
Make body text dark enough to read easily (aim for WCAG AA contrast), keep it at least 16px, and never put text over busy images without a solid backdrop.
Pale gray text looks elegant in a design tool and hard to read on a real screen, especially outdoors on a phone. Text over photos or gradients has the same problem.
8.1/10
average polish score across the leaderboard
Why it matters
If reading your page takes effort, people skim even less. Low contrast also excludes visitors with weaker eyesight.
Signs your page has this problem
- Body text is light gray on white.
- Text sits on top of photos or busy gradients.
- Text is smaller than 16px on mobile.
How to fix it
- 1
Darken your body text
Use a dark gray, and check it with a contrast checker. WCAG AA asks for at least 4.5:1 for normal text.
- 2
Give text a solid backdrop
Over images, use a solid or strongly tinted panel behind the text.
- 3
Increase size and line height
16–18px body text with about 1.5 line height is comfortable on most screens.
Checklist
- Body text passes 4.5:1 contrast
- No text directly over busy images
- Body text 16px or larger
Pages that get this right
The highest polish scores on the ScoreMySite leaderboard.
vercel.com
Agentic Infrastructure - Vercel
gumroad.com
Earn your first dollar online with Gumroad
buildrship.xyz
Buildrship — Curated Launch Platform for Buildrs Who Ship
Questions
What is a good text contrast ratio for websites?
WCAG AA recommends at least 4.5:1 for normal text and 3:1 for large text. Free online contrast checkers will tell you your ratio.
Does your page make this mistake? Find out in seconds.
Get your free conversion, design and trust scores from Jev AI in seconds. No signup.
More landing page mistakes
Design
AI design slop: why your page looks like every other AI-built site
Purple gradients, glowing blobs and generic sections that all look the same.
Design
Weak visual hierarchy
Everything looks equally important, so nothing stands out.
Design
Inconsistent fonts, colors and spacing
Mismatched styles make a page feel unfinished.
Design
A landing page that breaks on mobile
Cramped text, tiny buttons and sideways scrolling on phones.
Design
Unpolished details that cheapen the page
Blurry images, misaligned elements, typos and placeholder text.
Design
Generic stock photos and illustrations
Smiling people at laptops that could be on any website.