Accessible Contrast, Colors and Backgrounds

Contrast

Contrast is the difference between two colors. To make your content accessible, you should have high contrast between all text and its background color. If your text is dark, your background should be light, and vice versa. Black text on a white background is recommended for paragraphs of text. 

Colors can be used in moderation if there is enough contrast between the text and background, but you should avoid colored text on a colored background. When text and background color are too similar, it can be difficult for your audience to process the information.

Examples of High and Low Contrast:

This sentence is easy to read.

This sentence is also easy to read.

This sentence is not as easy to read.

This sentence is difficult for most and impossible for some to read.

Insufficient contrast especially can be an issue for people with color blindness because they can't distinguish between certain colors (such as red and green). Low contrast sensitivity also becomes more common for all people as they age, so using high contrast will help make your materials more effective for a wide range of users.

Watch an example of colors with good contrast.

Color in Text and Graphics

When the importance of information is communicated using color alone, then that importance is not conveyed to preople who are blind or color blind students and cannot see the color of the text. A common example of this issue is using the color red to indicate important information. 

Red-green color blindness is the most common form of color blindness. Red text also has a low contrast level between the text and most backgrounds. If red text is used on a white background, be sure to use a dark red to ensure proper color contrast.

If you use color to convey meaning, there must also be another way that meaning is conveyed so that people who are color blind can still access the information. For example, the text is not only colored but also bold. You could also use different shapes, fonts or text labels. This benefits not only users who are visually impaired, but also those who can only print in black and white. 

Penn State has more information on Color Coding Examples.

Important: Font styles such as color, bold (b), underlining (u) and italics (i) are often meaningless to screen readers. Instead of using formatting alone to emphasize a key piece of information, also add text that accomplishes your goal (for example, the word "Important" at the start of this paragraph). Color can still be used, but now a person who is blind or color blind will be able to understand the importance assigned to the text.

Backgrounds

It can be tempting to use a bright and/or distinctively patterned background to add visual excitement. However, these backgrounds can make pages difficult to read and can be painful to look at over long periods of time. In general, it's best to either avoid patterned backgrounds entirely or use very subtle patterns. This includes backgrounds on images, icons, buttons, etc.

Additional Resources