Understand the effects of color to impaired viewers.
- For years, accessibility has been seen as the domain of the developer. Sure there are lots of things that happen in code to make sure that digital things are accessible, but design and content are just as important, or maybe even more important. Why? As a designer, you're in a unique position to influence the final product by creating more accessible designs from the beginning of the project rather than adding it in part way through. I'm sure you've been down that road before. As you approach the end of a project, you think back to the things you'd change if you could, but time doesn't allow because you're just too far into it.
The time remaining is limited so you compromise. Accessibility is no different. As you learn more, you'll find that if you design and build accessibility from the beginning, you'll be more successful. Ultimately, you need a great mix of accessible design, accessible development skills, and accessible content. Let's look at how all these pieces comes together to create an accessible experience. We'll start with looking at what accessibility means from a visual perspective. When we create designs, we use several tools to communicate.
One of the most obvious tools we use is color. We use it as a design element in meaningful ways. Color communicates status, and helps us distinguish one thing from another. Take a look at this graph. It shows the number of different pieces of fruit eaten over a week. Now, you're likely aware that some people are color blind. In fact, one in 12 men, and one in 200 women have some form of color blindness. That means that about 4.5% of the world's population is going to have difficulty perceiving different color combinations because of color blindness.
That's almost 315 million people in the world. Knowing that, how would you change the graph to make sure that you don't rely on color? You'd use other methods to distinguish one line of data from the other. You'd use shape or patterns to show the difference between lines. Notice I didn't say, how would you change the graph to not use color. I changed it so that the graph did not rely on color. There's a big difference. Use color to your advantage, yes.
But make sure it isn't the only method to communicate your message. We won't go into all the details here. There's lots of great material out there on color blindness and designing accessible color pallets. In fact, check out Gerri Coady's book "Color Accessibility Workflows" for the science behind color blindness, as well as methods for creating great color combinations that work for everyone, including people that are color blind. Now that we've got that sorted, let's put it into practice. Let's apply this to that Ecommerce site selling T-shirts.
Notice the color swatches on the right hand side of the page above the add to cart button. If you were color blind or couldn't see color at all, how would you know what color is which? This is fairly easy to solve. We combine the color names with the color swatches and we've now made this much more accessible. Here's a different scenario. Take a look at this podcast page we've created. It's a fairly simple search interface that lets you search for key words. Each search result comes back color coded to show if the key word was found in the podcast name, episode titles, or the content of the podcast itself.
Now, take a look at what happens when we take the color away. See what happens? We actually loose some meaning. We can't easily tell the difference between podcasts, episodes, and transcripts. Like the last example, we can come up with several different ways to distinguish these items that do not rely on color alone. Now pause this video and take 30 seconds to come up with at least three different methods. Yes, I mean it. Explore different ideas. Many people will jump straight into a single solution without considering others.
Really, I'm serious, pause the video and come up with three. Okay, now that we're back, here are some possibilities. There is no right answer, but did you consider using shape? Circles, squares, and triangles to denote the difference between the three types of search results. Did you consider prefixing each result with podcast, colon, episode, colon, or transcript, colon? Or how about simply putting an uppercase P, E, or T in the color block? Any of those would work.
They use different mechanisms that don't rely on color to convey the details. Which one you choose will be up to you. And if you can't decide, put it to usability testing. There's nothing better than getting the answer directly from people that are using what you are creating. We've been talking about this from the perspective of someone who's color blind, but here's the best part. By making our designs so that they don't rely on color alone, not only do we make them better for people that are color blind and have difficult distinguishing between colors, we also make them work well for people that can't see color at all, or are blind, or have low vision.
There's almost another 300 million or so people in the world that have significant visual impairment that isn't just related to color. Approximately 40 million people are considered blind, and another 215 million or so have low vision. By doing this right, you're helping a lot of people. You can and should apply the same principles to other uses of color that are common in digital interfaces today. We often use green to signify a success message and red to indicated an error.
As a designer, we need to find multiple ways of providing the same message. What will you do to ensure that you're conveying the same message to everyone?
- Using color, contrast, and animation in an accessible way
- Making experiences accessible via the keyboard
- Working with touch gestures
- Image and multimedia accessibility
- Form accessibility
- Responsive design and accessibility
- Structuring content