Most of the time, web designers and developers don’t worry about catering for visual deficits in the use of color in design. Deficits in this case refers to a broad range of situations from colour-blindness to black-and-white display interfaces i.e. print. But then again, design in most system focuses on the larger part of the populace. Most times also, use-cases of design interfaces don’t include situations that mandate such attention to the use of color.
But if the design community is going to take a shift to accessibility, global inclusivity, we have to consider this. And even if your major use-case doesn’t include printing and black & white only displays are almost unheard of nowadays, a little better UX doesn’t hurt, does it.
What are you on about?
I’m talking about cases where interfaces (web, in this case) lose form, function or efficacy in print, grayscale display or where color isn’t interpreted as intended.
How common is this?
I know that most systems that have usecases such as print already have this covered. I also know that the relevance of this may not be as high. B/W displays are neigh non-existent. But like we said, one can do with a little more UX. Let’s think of it as a nice little Easter egg for your users, yeah?
Okay, you mentioned something about color-blindness
Yeah, I did. Frankly, I haven’t researched more into this as I should. But systems should be inclusive enough to accommodate such users as well. A very god example of systems that implement this is Android. Almost any recent version of Android accommodates such users with quick toggle deep in the settings. Why is this almost unheard-of in web design? 🤔
Okay, I assume you have some ideas around this
Yes. I do.
Well, we’ll start with color blindness. A designer should do their research and find the colors that contrast enough to give a distinction, even in different hues. Of course this is easier said than done, especially for those who have a fixed brand band of colours to stick to. Hoot hoot if you get to dictate the entire design process.
Also, avoid using color only (especially in text) to distinguish various elements/sections of your design. Mix up different typefaces, weights and font sizes. Italicize when you need to. Even with corporate or other limitations, you can still make each element distinct. Use colour to compliment an already existing hierarchy of sections.
What about print?
If you decide to make your designs print-friendly, pick colours that will work well in both grayscale and coloured printing. Hoot hoot if your UX includes sections that mandate printing. You probably have this covered.
Use varied formats of text as mentioned above in case of text, especially for the sake of grayscale printing. If you have to use colour, make sure you avoid using similar shades of colour for distinction. Light green and light blue may be distinct on coloured interfaces but they are indistinguishable in grayscale, much less in printed grayscale.
Any more tips?
Sure. Use symbols, shapes, containers etc more in your interface so that when either or both colour and typeface variations fail, the various sections of your UI are still distinguishable
For more insight into this, here is a link to a post by experts on how to use colour in design: https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753