Dark Mode and Softer Colors for Easier Web Reading
Is dark mode easier on your eyes? What contrast research says, when cream backgrounds help, and how to change website colors in Safari on iPhone and Mac.
Bright white pages at night. Pale grey text on white during the day. Colors are a big part of why some websites feel exhausting. Here’s what the research says about dark mode and background colors, and how to set colors that work for you in Safari.
Is dark mode easier to read?
It depends on your eyes and your surroundings.
- For most people with typical vision, dark text on a light background is easier to read. This is called positive polarity. The pupil constricts in brighter light, which sharpens focus, so fine letter details are easier to see.
- Dark mode can help if you have light sensitivity, get migraines from bright screens, have certain eye conditions such as cataracts, or read in a dark room.
- Dark mode can hurt if you have astigmatism. Light text on a dark background can appear to glow or smear (sometimes called halation), which makes letters harder to separate.
The practical takeaway: there’s no universal answer. Try both, and consider a middle ground such as a cream background with dark grey text.
Contrast: enough, not too much
Text needs enough contrast to stand out. WCAG 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Many modern websites use light grey text that falls short of that.
The opposite problem exists too. Pure black text on pure white is maximum contrast, and some readers, including many with dyslexia, find it glaring. The British Dyslexia Association recommends dark text on a cream or soft pastel background instead of white.
Color combinations to try
| Style | Text | Background | Good for |
|---|---|---|---|
| Paper | Dark grey | Cream | Long reading, glare sensitivity, dyslexia |
| Soft dark | Warm light grey | Charcoal | Night reading, light sensitivity |
| High contrast | Black | White | Low vision with good tolerance for glare |
| Pastel | Dark blue | Pale blue or green | Readers who prefer tinted backgrounds |
Avoid pure black backgrounds with pure white text if you have astigmatism; a charcoal background with off-white text is gentler.
Built-in options in Safari
Dark Mode (iPhone, iPad and Mac)
Turning on Dark Mode in Settings changes Safari’s toolbars and any website that supports dark mode. Most websites don’t, so they stay white.
Reader themes
On article pages, tap the page menu button, choose Show Reader, then tap the button again to pick a white, sepia, grey or black background. Reader only works on article-style pages.
Smart Invert (iPhone and iPad)
Settings › Accessibility › Display & Text Size › Smart Invert flips colors on screen while trying to leave images alone. It works everywhere, but some sites end up with odd colors, and it affects every app, not just Safari.
Reduce White Point and Color Filters
Also under Display & Text Size, Reduce White Point dims bright colors, and Color Filters can tint the whole screen. Both are system-wide.
Your own colors on every website
None of the built-in options let you choose the exact text and background colors for every website. FontFlex does:
- Install FontFlex and turn it on in Settings › Apps › Safari › Extensions.
- In the app, choose a text color and a background color.
- Optionally set separate dark mode colors, which apply when your device is in dark mode.
- Every website now uses your colors, day and night.
Colors work best with the right font and spacing
Colors alone rarely fix a hard-to-read page. Combine them with:
- A clearer font: see how to change the font in Safari.
- A bigger minimum size: see how to make text bigger in Safari.
- More space: see our guide to line and letter spacing.
