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:
- This example shows how links may look to individuals with various types of colorblindness: View links with a 3:1 contrast ratio with surrounding text.
Resources:
- To see accessible color contrast, play with WebAIM’s Color Contrast Checker
- Section 508 Standard: Success Criterion 1.4.3 Contrast (Minimum) (Level AA).
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.
- 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.
- 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:
- Section 508 Standard 1.4.1 Use of Color (Level A).
- Color Universal Design – How to make figures and presentations that are friendly to Colorblind people.