Designing with color accessibility in mind (part 1)

Careers in visual communication tend to attract people with high or perfect vision and it’s easy for us to forget that not everyone sees our design the same way we do. In fact, around 5% of people viewing our websites, brochures, and banners see them very differently. 

According to the World Health Organization, over 2.2 billion people worldwide have some sort of visual impairment. The most common visual impairment, red-green colorblindness, occurs in roughly 1 out of every 12 men and 1 out of every 200 women. 

In the graphic below, you can see a simulation of how our brand colors appear to people with different kinds of visual impairments.

Designers can practice empathy and inclusion by considering all levels of visual ability in our communications. One way to do this is to be aware of color contrast. For both print and digital communications, we must adhere to WCAG AA contrast standards at a minimum, and we strive to adhere to WCAG AAA contrast standards whenever possible. The Office of Strategic Marketing and Branding has created two quick references to make it easier to choose color pairings with an appropriate level of contrast.

To use the matrix, choose your desired text color from our brand colors along the top row. Follow the column down to see which background colors create an accessible combination with that text color. A green check mark indicates that a color combination is always safe to use. A yellow circle indicates that a color combination should only be used for large text and graphic elements. Any bold text larger than 14pt, or non-bold text larger than 18pt, is considered large text. 

In a followup post next week, I’ll share an example of a webpage that uses these guidelines to create a page that is both accessible and on-brand. In the meantime, be sure to visit the color section of the new brand guidelines website for more information on our official brand color palette (which you can download and install here).