Read our Designing for Accessibility - eBook!
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 content - 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.
