Optimize Readability Using Contrast and Color

Last Revised: 02/14/2019 by cah

Overview

Good color contrast is essential to making your text readable. In this article, we will review how to best use color to improve readability through the use of proper contrast levels and to convey meaning.


1. Use of Color and Contrast

Providing good contrast between background and text colors will improve readability of your materials for all students, not just those with low or no vision. Text should be clearly distinguishable from the background.

Example:

Resources:

2. Use of Color to Convey Meaning

Text color alone should not be used to convey meaning as some learners are unable to distinguish either between different colors or between shades of a single color. If using color to convey meaning or to prompt a response, always use an additional cue such as a symbol, icon, or text.

Examples:

  • Link text is often blue but it should also be underlined so users who cannot perceive color differences can distinguish link text from surrounding text. This could include users with color blindness, macular degeneration, those using text-only versions of a site, or even phone users in bright sunlight. View example
  • Forms that show required fields with color, such as yellow background, should also use an icon with a text alternative that indicates the field is required. View example
  • Graphs that use color to indicate different elements of the graph should also include text labels and hatching to clearly distinguish each element. View example

Resources:

 

Feedback

    Indicating your role will help us serve our community better.
  • This field is for validation purposes and should be left unchanged.