🔖 How the Web Became Unreadable (archive) by Kevin Marks
There has been a trend to reduce the color contrast of text on the web. As screens have improved, designers have started using lighter typefaces and lower contrast ratios. But, as more people use devices in outdoor environments where screens aren’t as clear to look at, there is a need for text to be be better legible for everyone. The physical screen and the context it is used in should be considered when picking colors.
Color contrast explained
The baseline typography and colors should work for most users regardless of their eyesight. Contrast ratios between two colors are:
- 1:1 when the background and text are the same color
- 21:1 when its black text on a white background
- 4.5:1 is the minimum ratio for clear type
- 7:1 is the recommended contrast to aid those with impaired vision
Note that the recommendations are minimums and shouldn’t be treated as starting points.