In our webinar Color Is Relative: Designing for Accessibility, web designer and illustrator Geri Coady opened our eyes to the prevalence of colorblindness as well as the usability issues our design decisions can pose for those readers. Afterwards, she fielded questions about starting points, creating accessible palettes, navigating brand guidelines and more. Here’s what she had to say.
You talked about hyperlinks and how sometimes linkable text can disappear depending on if there’s not enough contrast in the text. Are you saying that all hyperlinks within text should be underlined?
No. It depends on the contrast of that link in relation to the rest of the paragraph. If you run your design through a contrast checker or a color accessibility tool like Color Oracle and it’s still obvious that your link is a different color than the other text, then you don’t really need to have it underlined. It’s one of the reasons why it’s important to use testers and simulator tools like that. In the case I mentioned in my talk about the red link, the contrast of the red was very similar to the surrounding text, which wasn’t black. It was almost a medium-to-dark gray. So without underlines it was impossible to see it, and that is why we put an underline back in.
As designers, should we think in grayscale first when designing and color second—as a sort of flavoring to ice cream?
Apologies if I wasn’t clear earlier—I definitely don’t think this way!
Designing a layout in grayscale can help you achieve good contrast without being caught up in which colors should go where—kind of like designing a hi-fi wireframe. But we should definitely not think in grayscale—that’s a surefire recipe for ending up with a boring palette—something we clearly want to avoid.
Brainstorming palettes should come early in your design process. Once you feel you have some solid options, you can then move into designing your page and consider doing it in grayscale to focus on achieving good contrast and design hierarchy without the distraction of color. When you feel comfortable with that design, you can then go wild with introducing color—take your palette ideas and work them into your greyscale designs until they feel right. I find that this process is quicker than designing in color first because I don’t spend ages pulling colors out of the air without much rhyme or reason. It’s so easy to spend hours getting caught up in Photoshop/Sketch/etc. trying every color combination imaginable without much progress on the actual layout of a page!
I've done some Skillshare classes on color workflow that you might want to check out for a practical look at this technique—I demonstrate this from start to finish and hopefully it’ll make more sense there. The first is Color on the Web I–Designing Cohesive Palettes, and the second part is Color on the Web II–Design for Clarity and Compliance.
Is using red a bad choice for accessibility?
No, not at all—it’s all about how you use it. A red link in a paragraph of black text can create issues as it can blend together for a person with color blindness. But that can be easily solved by adding an underline on the inactive hover state. Using red and green in a line chart can be fine if the lines have different patterns or widths. Use your discretion and you’ll be fine!
It’s often a challenge to change the color or contrast because by doing so you end up deviating from the company’s brand identity guidelines. How do you address that?
That’s a very good question, and I’ve been there myself. In those cases, one of the best options is to get the conversation going with the people who designed the brand identity, show them what you’re seeing, and explain your reasoning for why it’s so important. Or perhaps suggest introducing a black and white color scheme to the website like Veerle Peters has on her blog—where she offers a high contrast version that people with vision deficiencies can toggle on.
If it is a link contrast issue, just simply underline it. If it’s text over a colored background, maybe you could place it over a photograph. But you kind of have to just do the best as you can, and if you’re trying, that’s better than giving up.
Do you do user testing throughout the process or only at the end?
For the Simply Accessible website, we actually did it towards the end because we were working with a team of accessibility experts and so we kind of already knew what to avoid in the process. But I definitely would recommend user testing. For example, if you’re going to present a color palette to a client and you want to make sure that color palette is going to work for people who have color vision deficiencies, you might want to bring somebody in who is actually colorblind. Ask people. Send a message out on Twitter. You'll be surprised how many people are willing to take a look at your work and give you feedback. But I think it’s definitely important to have it on your radar, and the more you can incorporate it throughout the process the better.
Do you have any advice for creating accessible palettes that are also aesthetically pleasing?
If you are familiar with the tips and how to actually check your work, you don’t have to feel too restricted by which colors you choose. Go nuts. If you come up with a concept, test it right away, and if you feel like it works in Color Oracle then that’s fine. If not, refine it. But if you create a palette and you’re only thinking about color accessibility, chances are you will end up with a very restrictive palette. So be mindful of accessibility, just don’t let it hold you back.
Are there ways to test the contrast for text over photographs?
That’s a kind of different issue. If you have text over a photograph, a contrast checker isn’t going to be able to take that photograph and compare the contrast ratio to the text above it. So, here’s one trick. If you feel like it might be a little low contrast, you can sample some colors around it. Like if it’s generally a darkish photo, sometimes you can just sample a color in Photoshop, pull that out and test with the text on top of it using Lea Verou’s tool or Jonathan Snook’s tool. Another thing that you could do is use the <div> behind the image. For that <div>, choose a color that’s going to be contrast compliant. People have the option of turning images off. So they’ll just see your text color on top of the <div> color behind it. And even if they don’t turn images off, if for any reason the images don’t load in their browser, the same thing will happen.
Where can we find practical examples of web or digital UIs that use codes like ColorADD?
ColorADD is something I’m familiar with but unfortunately have never seen in practice on the web. For anyone who’d like to learn more, it’s basically a convention of describing colors by using shapes and symbols. The key can be found here and a few examples of the code in practice can be found on their site. These are mainly examples found in transportation, wayfinding systems, clothing, and more physical objects—but few examples in a digital space. If anyone knows of examples of ColorADD on the web, please drop me a line and let me know—I’d love to see it!
Watch our webinar Color Is Relative: Designing for Accessibility