6: Using Color Carefully

What does it mean to use color carefully? 

Color is an excellent way to liven up a webpage or a document and to attract attention to your calls-to-action. However, color alone should not be used to convey information. 

Users need to be able to perceive, operate and understand all elements of a webpage or document for it to be accessible. However: 

• Screen readers don’t announce colors to their users.  

• Users with color blindness cannot distinguish between certain colors.  

• All users — but especially those with low vision or low contrast sensitivity — struggle to read text when there isn’t sufficient contrast between the text color and the background color. 

So, if a page element requires users to be able to see color, distinguish between colors and/or review content without sufficient color contrast, then that page is not accessible.

How can we convey information without, or in tandem with, color? 

Let’s say you have a list of 5K participants and want to note which finished the race. If you only used color to convey that information, it would look something like this:  

Three runners entered the race but only one (listed in red) finished the race:  

• Janet  

• C.J.  

• Bill

To make this content accessible, add a textual note as well: 

Three runners entered the race but only one (listed in red) finished the race:  

• Janet 

• C.J. (finished the race) 

• Bill

The same goes for color coding. Simply add textual note, along with color, to ensure all users can accurately perceive and understand the information: 

Project Management:

• Project A (on time)
• Project B (at risk)
• Project C (late)

What is color contrast?

Imagine black text inside a dark purple box, or a light grey icon on a white map.  

Without even seeing an example, you probably already know you’d have a hard time reading that content — or maybe you wouldn’t even notice it is there.  

Text color must have a sufficient contrast ratio with its background in order to be distinguishable. And, regardless of color, all text should be at least 12 point font. 

Color contrast — which is measured as a ratio (text:background) — must be 4.5:1 for small text and at least 3:1 for large text (18 point font or higher). For reference, black text on a white background is 21:1. 

UAlbany’s Drupal templates won’t let you change text color but they won’t stop you from uploading an image or a document that has insufficient color contrast. 

So, as you’re creating newsletters, posters, images and other content, use good judgement on text and background color choices. Better yet, run an accessibility check on all documents before you upload them to the web.  

Watch Today's Video