accessibility and design

Accessibility & Digital Signs - Part 1 Color in Design

Jenn Gvozdek, Marketing Manager
June 30, 2021

Accessibility & Digital Signs - Designing Digital Signage for Everyone

PART 1: Color in Design

There’s a lot to think about when it comes to creating accessible digital designs. If part of our design isn’t clear or visible to part of our audience, then why is it there? Part of designing with color is using color correctly so that the key message is clearly legible to everyone. Setting proper contrast between elements in your design helps, so let’s take a look at a few tips on how you can use color to improve the accessibility of your designs.

CONTRAST RATIO - CONSIDER CONTRAST WHEN USING COLOR

Contrast is the difference in perceived brightness (or ““luminance””) between two colors. When dealing with multiple objects, such as letters on a background, it is expressed as a ratio, and ranges from 1:1 to 21:1. The ratio helps you determine how legible your text is. This is a standard used extensively in website design, and can easily be applied to digital signs. Check out the infographic below for more information and examples on contrast.

HOW DOES COLOR BLINDNESS AFFECT YOUR DESIGN? AND HOW CAN CONTRAST HELP?

There are three main types of color blindness - red-green, blue-yellow, and monochromacy.

Red-green color blindness is the most common, and falls into different categories: Protanopia (people can see no shades of red), Protanomaly (people can see some shades of red), Deuteranopia (people can see no shades of green), and Deuteranomaly (people can see some shades of green). Check out the infographic below for more information and examples on color blindness and digital signage.

SELECTING COLOR - SOME TIPS FOR SELECTING COLORS IN YOUR DESIGN 

Focus on your contrast ratio - make sure your design meets the 4.5:1 ratio. Think of everyone when creating your design - avoid color combinations such as green and red, green and brown - think of the different types of color blindness and how your color combinations may be seen by someone with color blindness. Check your design against a color blindness simulator to see if parts are murky or hard to distinguish between one another.

View PDF of infographic!

Hover over image to zoom in 
accessibility infographic - part 1