Accessibility

Choosing Color

Last modified 2/11/2022

Choosing Color

Color can be a barrier to some people. Those with visual impairments or color vision deficiencies interact with digital experiences, too. Color blindness effects approximately 1 in 12 men (8%) and 1 in 200 women worldwide. Color alone should not convey meaning and font colors should be set at a high contrast level when compared to the background color(s) and images.

Color alone should not convey meaning

You should not rely on color alone to convey a message. For example, certain types of color blindness might make it difficult or even impossible to see important messages in a red font. Try to include An approach is to use both colors and symbols where people’s attention is required. 

Example

Often, color is used to indicate that something is very important.  This is a wise use of color, however, individuals who are color blind or have other visual disabilities will not be able to know that the color red below is used to draw attention and importance.  By adding an asterisks to the bulleted items in red font, there are now two ways for students to identify what information requires particular attention.  Color is therefore not the sole means of conveying importance. This is not to say, never use color in your document, but where you are able to edit color be sure there are multiple ways to determine meaning or information.

If you have questions or cannot edit the color, contact WEB.

Use sufficient color contrast

If you must use color in your document, make sure the color contrast between the foreground (i.e. text or content) and the background color are sufficient. WCAG 2.0 Level AA standards require a luminosity of greater than 4.5:1 for normal text sizes. Some color combinations can be more difficult to read, be selective and conscious of the colors you choose.

Examples of Poor and Good Color Contrast

Color Contrast Examples

Light Gray on White
Hex codes: #C1C7D0 on #FFFFFF
1.7:1 (fails)

Dark Gray on Light Gray
Hex codes: #7A869A on #F4F5F7
3.30:1 (fails for normal text, but passes for large and bold text )
Light Gray on Black
Hex codes: #C1C7D0 on #000000
12.3:1 (pass)

Resources