Color done right can catch the eye, set a mood, improve understanding, evoke your brand, and call attention to what's most important. Color is a great tool in your belt for driving engagement. But, done wrong, it can stop people who see differently from being able to engage at all. Let's talk about how to make sure you're using color in ways that work for everyone when building your event sites.
Did you know that about 1 in 12 men have a color vision deficiency (also called color blindness)? There are many different types of color vision deficiencies which make it difficult to distinguish between certain colors. This can cause problems if you're using using color-coding as the only way to convey information in your content.
People of any age can have limited vision, but it becomes increasingly common as we get older. 12.6% of Americans aged 40 and above have age-related macular degeneration, and that's just one of the ways in which vision can become limited! Some common symptoms include distorted or blurred vision, and difficulty distinguishing between colors with low contrast. This makes it very hard to read or identify controls if there's not enough contrast.
Even if you have average vision, your circumstances can make it hard to see. Maybe you're looking at a webpage being projected in a conference room, or on your phone in bright sunlight. In either case, low-contrast colors could be washed out and hard to see.
With so much variety in how people see, designing pages that work for everyone may seem like a daunting task! Fortunately, there are some simple guidelines which you can follow. They will ensure your pages work for most people under most circumstances, while still allowing you the flexibility to be creative. They rely on measuring a color contrast ratio between two colors. (We'll get to how to measure that in a bit!)
The contrast ratio between text and its background should be at least 4.5:1. If you have text over an image or gradient, measure at the point where the contrast looks the worst.
The contrast ratio for non-text elements should be at least 3:1. This applies to anything (other than text) that your user needs in order to understand and use the page. Some examples include icons, buttons, borders of input fields, and different parts of a chart.
Measuring color contrast
Don't eyeball it, measure! Something that looks very clear to you could be a problem for someone else - that's why we have the tools! Over time you'll learn to recognize when something looks suspicious, but you'll need to use the tool to develop that sense.
The most versatile way to measure contrast is to use a color contrast analyzer like this one from TPGi. It allows you to pick up and compare colors from anywhere on your screen.
There are also in-browser tools that can pick up colors from text automatically, so you don't have to use an eyedropper. In Chrome, right-click anywhere on the page and click 'Inspect'. In the panel that opens, click the button in the top left corner. It looks like a dotted square with an arrow in it, and is labeled "Select an element in the page to inspect it". You can then hover over any text on the page to see what the contrast ratio is. It will also show a checkmark if the contrast is sufficient (at least 4.5:1) or an exclamation mark if not.
Convey information in ways other than color
Color-coding is a great tool to improve understanding, but if it's the only way to get certain information, people with color vision impairments will miss out! So go ahead and use color-coding, but also convey the same information in text or with symbols so everyone can understand.
Figure 4: The version on the right is more inclusive. It uses color to supplement, not as the only way to convey information.
Similarly, give instructions based on labels that everyone can perceive. For example, instead of "click the green button," try "click the green button labeled 'submit'". By including the label, you include people who can't see that color, or can't see the page at all and use assistive technology to locate controls.
Summary
Everyone sees things differently, and what's easy for you to perceive may be impossible for someone else to make out. To include as many people as possible:
Resources