The use of color

- 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 a project, rather than adding it in part way through. Ultimately, you need a great mix of accessible design, accessible development skills, and accessible content. Let's look at how all these pieces come 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 colorblind. In fact, one in 12 men and one in 200 women have some form of colorblindness. That means that about 4.5% of the world's population is going to have difficulty perceiving different color combinations because of colorblindness. 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 didn't 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. There's lots of great material out there on colorblindness and designing accessible color palettes. In fact, check out Gerri Coady's book, "Color Accessibility Workflows" for the science behind colorblindness as well as methods for creating great color combinations that work for everyone, including people that are colorblind. Now that we've got that sorted, let's put it into practice. Let's apply this to that E-commerce 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 colorblind or couldn't see color at all, how would you know which 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. Each search result comes back color coded to show if the keyword 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 lose 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. 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's 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're creating. We've been talking about this from the perspective of someone that is colorblind, 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 work better for people that are colorblind and have difficulty 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 250 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 indicate 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?