Color Contrast

For reading to be comfortable there must be adequate contrast between the background and foreground. If the text is similar in brightness to the color behind it readers may still be able to make out the words, but doing so will strain their eyes and divert their attention away from the content.

The World Wide Web Consortium (W3C) has set standardized guidelines for the minimum contrast needed for text to be clearly legible on websites, and tools exist to test a given background/foreground combination for appropriateness. The W3C guidelines are designed with the visually impaired in mind, hoping to ensure that all text on websites can be understood even for those who cannot perceive subtle differences in shade (or those with old/defective displays that render colors at lower-than-intended contrast).

In addition to accessibility concerns about the legibility of text, color contrast is a vital element of readability because low-contrast text is significantly less comfortable to read for long periods of time. When styling long-form text, designers should carefully avoid the temptation to use light text on light backgrounds (or vise-versa).

Resources about readable contrast

2 thoughts on “Color Contrast

  1. Kelly Williams

    I was bemused by the fact that your readability-contrast page is built with gray text on a gray background.

    1. jeremyclarke Post author

      Kelly the text on this site is adequately contrasty to pass all the W3 tests, which are very strict and many sites fail despite not seeming uncontrasty:

      #444 on #EEE results at contrast tester.

      Readability requires a balance of contrast, not just maximum contrast all the time. I haven’t found any evidence that black on white has better usability/readability than well-contrasted shades of gray, and for many people pale grey backgrounds are more comfortable for long periods of reading.


Leave a Reply

Your email address will not be published. Required fields are marked *