Ten rules to be more inclusive of those who are colourblind
In one of our previous posts, we started discussing a certain number of personas that made their way into my upcoming book, “The Inclusive speaker: How to truly connect with ALL of your audience without leaving anyone behind”. One of those personas was Nick, an audience member who is colourblind.
This persona hits pretty close to home, as I am someone who also lives with colour perception deficiency. If you’ve read my latest interview, where I played both the role of the interviewer and the interviewee, I shared a little bit about that particular characteristic of mine, and how it affects my experience attending live, in-person or virtual events on a daily basis. What I didn’t share in that interview is that it also affects other aspects of my life, and my experience using the web is certainly one of those ways in which colourblindness impacts me. This is something I mean to share more about in future posts.
The Colorblind Accessibility Manifesto
This week, I was reminded of a resource I stumbled upon about a year or two ago, and this week, I’d like to dedicate this post to sharing that resource with you. I’m talking about the Colorblind Accessibility Manifesto, created by Federico Monaco, an Italian digital designer who, you guessed it, happens to be colourblind as well.
While you might be tempted to go and sign the Manifesto, too, the point of the post is not to lure you into doing that. Great of you do, don’t get me wrong, and you’ll probably notice that my name is somewhere on the list of people who’ve signed it as well. What I want to do today Is explore the 10 rules of the manifesto, and see how we, as speaking professionals, can learn from Monaco’s teachings, and become more inclusive experts who speak.
The document presents 10 different rules that designers should follow to be more inclusive in the way that they structure and organize their designs. I’ll reproduce each rule below, with some thoughts on how this may also be incredibly relevant to us, as speaking professionals. Not only because we also have and maintain a web presence, but because we make design decisions al the time when it comes to our materials, our presentations, our handouts, our assets, etc.
01. Start with “Why?”
Before designing a website, or even making a small change to an existing one, ask if your design choices consider the needs of people with color blindness. Changing the button color on your website may seem insignificant, but it could make that website inaccessible to nearly 8% of men and 0.4% of women who have color blindness.
Starting with why has a strong Simon Sinek feel to it, but it’s a good starting point. Understanding that for every 100 attendees that come to listen to you speak, nearly 8% of about half of that audience will be at a disadvantage if you don’t pay attention to the way you use or combine colours means that a significant number will be at very high risk of being left out. People like myself, Federico, or my persona Nick, who will fade out from the conversation if you can’t make us feel welcomed.
02. Don’t communicate only with colors
Can color really be enough to communicate your message? Color can be one element of a much larger picture, but don’t rely on color to serve as the only element of distinction.
We’ve also talked about this one before in one of the weekly inclusive speaking tips: don’t use colour as the only way to convey information. It’s a pretty straightforward idea, but it’s a problem that I run into all the time. If the information you share is conveyed only through colours, then for people who are colourblind, the information may quickly become meaningless.
03. Design with shapes
Color-blind people can discern the difference between shapes far more easily than between colors. When you design with shapes, you won’t cause unnecessary additional effort for the people who visit your website.
This one works hand in hand with the previous one. One of the best ways to make sure the information you provide is not only based on colours is to also support it with other visual cues, such as distinctive patterns and shapes. This way, if the colours that are used don’t work for part of the audience, then the shapes or patterns you’ve also included will kick in, and will hopefully help bridge any gaps.
04. Choose the right copy
Absolutely avoid identifying tasks or requests to the user only through color. Include other distinguishing characteristics like shape or size.
Along the same lines, if you work on workshop materials, web copy, or anything else that requires explanations, instructions, steps, etc., then make sure that this information is not just based on colours! Emphasizing on a message by using the colour red might work for some, but I can guarantee you that for someone like me, it might not actually stand out unless some other visual cue is also used to make pop.
05. Test your designs in black and white
Switching the UI to black and white helps you evaluate the composition and the usability of your designs. Without the meaning provided by color, is your UI still working? Can you understand the meaning of every button?
I quickly mentioned that rule number 2 and 3 above worked hand in hand, but this one here basically brings it all home for most people. If you use a filter to turn all of your content into greyscale, you will almost instantly notice that meaning starts flying out the window when you look at your content. There’s nothing like a black and white screen to notice that without colours, everything get a lot less obvious!
06. Rethink button states
Color alone does not convey information for everyone. Use shapes and icons that indicate a button’s function.
This one relates more to your web content, and the calls to action we’d find on your website. But again, if colour is the only cue used to differentiate between various different states of a button or a link for example, then there are pretty good chances that some audience members might not be able to notice the difference between what would otherwise appear as a default or an active state for that control.
07. Use contrast
Don’t default to using green and red to communicate things like product availability or pass/fail. Using icons, text, and high contrast colors such as blue and red will help many (but not all) people with color blindness.
Better yet, look out for different tools online that allow you to check for colour contrast. All you ned to do is compare the “code value” of each colour (hexcode, RGB, etc.) of the foreground colours against is background colour to know exactly if the contrast passes or fails. I highly recommend the Colour Contrast Checker and, as a general rule, to stay away from any luminosity ratio that would be under 4.5.
08. The smaller the item, the bigger the problems
Relying on small, colored elements to signal important information, like updates or status, creates a huge barrier for color-blind people.
This one is just common sense. The smaller the object on the screen or in your document, the bigger the problem is, when colour is the only way through which information is conveyed, or when the contrast ratio is insufficient. Big, bolder letters stand out more naturally against their background than smaller, thinner ones. The smaller they are, the higher the contrast should be, and the more support through other visual cues is needed.
09. Less fancy, more usable
Dear data visualization designer, stop using hundreds of shades to present your data infographics. About 350 million users cannot benefit from it.
I cannot emphasize on this one enough. As someone who struggles with colour perception, your graphs and other complex charts are a huge pain in the neck when they assume that I can understand, correlate, identify, and distinguish between colours. Again, run a greyscale filter on your infographics, and see how clear they get, when you can no longer rely on the colours to make sense of the data. Applying the concepts presented above can go a long way in making graphs and chart a lot more accessible.
10. More than you think
Although it may seem that color blind people are few, there are actually 350 million. 350 million people you’re closing the door on when you don’t make your site accessible.
And with this one, we go full circle. It’s all about people. Those you include, and those you exclude. It’s very easy to become more aware about the impact colour can have on someone’s ability to appreciate, perceive and understand the content in front of them. If we agree that there’s about 4 billion of males on the planet, then 8 to 10% of those folks mean roughly 350 million people. That’s quite a few! Wouldn’t you rather include them, too?
So, what do you think?
How many of these rules are you regularly violating in your own practice, designing your presentation materials, or your online content? Which one of these 10 rules are you willing to take away from this post today, and commit to applying to your work, moving forward? And if you feel like committing to some of these ideas, maybe you really should consider signing the Manifesto. Just sayin’…
About Denis Boudreau
Founder and Chief Inclusion Officer at InklusivComm, Denis has taken his inclusive communication expertise to hundreds of organizations around the world. Through workshops, counsel, and training, Denis has, to this day, empowered tens of thousands of busy professionals with powerful tools to bridge the gaps that can potentially exclude up to 40% of their audience members, based on disabilities, ageing, and other technical challenges.