🔖 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.

🔖 Font sizing with rem (archive)

Defining font sizes in px gives you control but it prevents the user from increasing the font size on some browsers (till IE9). em is more accessible and allows for resizing, but since the unit is relative to the font size of its parent it has a compounding effect which is hard to manage.

The rem unit is relative only to the root html element’s font size. By setting the html‘s font size to 62.5% you can use rems almost like px, in that 1.4rem would be 14px (because 62.5 × 1.6 = 100, 16px being the usual browser default text size)