Web Design: Grey Text on White Background

By Xah Lee. Date: . Last updated: .

Starting around 2010, more and more websites use grey text on white background, making it hard to read.


macOS software update 2017 12 12 21493
macOS software update 2017-12-12
racket web design grey on white
racket scheme lisp web design, grey on white 2016-12-22
web design gray text on white
grey on white. 2012-08-16

Orange on Gray!

arstechnica screenshot 2012-03-09
Can you read those orange texts? (arstechnica screenshot, )

Greyer and Greyer!

web design gray on white 2013-06-11
grey on white. 2013-06-11
gray on white chrome devtools website 2015-08-05
Gray on white. 2015-08-15 From Google. https://developer.chrome.com/devtools
web design gray text on white openstudiolab 2015-08-15
web design gray on white. 2015-08-15. From http://www.openstudio.fr/lab/jQuery-virtual-tour,67.html?lang=en
web design gray on white  projectured.org 2014-03-15
web design gray on white, http://projectured.org/, as of 2014-03-15
web design gray text on white Joe Arms Erlang 2015-10-16
Joe Arms's blog, inventor Erlang language, as of 2015-10-16. 〔source http://joearms.github.io/2013/05/31/a-week-with-elixir.html

Solarized Color Theme ?= Science

There's a website called Solarize, that focuses on desigining the most readable color theme, supposedly based on science of color contrast. Witness:

solarized text
Solarize website screenshot

Do you find the text easy to read?

Things get worse:

solarized screen
solarized text 2

The Solarized color themes are low contrast, and supposedly works better when your computer display is under sunlight. Maybe so, but it looks terrible indoors.

see also: [contrast rebellion By Zoltán Gócza, Richard Gazdik. At http://contrastrebellion.com/ , accessed on 2013-01-22 ]

see also: How to Calibrate Your Monitor's Color.

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.