Accommodating color blind computer users
Most color-blind people don’t suffer from achromatism, and so will naturally associate different colors with different messages.
However, using prefix text such as “Success” or, my preference, an icon makes it quick and easy to read as shown below: Using patterns and, where possible, placing text within each segment makes graphs easy to understand.
If your design work is unsightly or hard to read for this substantial group, you’ve made a pretty huge mistake. In this post, we’ll give pointers for non-color blind designers on how to consider a color blind audience, and tips for color blind designers on how to keep your colors straight. If, like me, you see a 21 (or nothing), then we’ve got some bad news for you: you are red-green color blind.
And say you want to design but do happen to be color blind? If you’re not convinced, you can take a full test here.
Using a relative font size unit, such as ems, ensures that all browsers afford this capability.
There are lots of tools available to help you design for color-blind people: The tips in this article are not exhaustive, and they are not necessarily applicable to every situation.
Or worse, a logo that is entirely invisible — as with some of the ones below: These were apparently logos for 1) Bill Gardner, 2) Dennis Murphy, 3) Razoo and 4) Crema Cafe.
None of them carries a particularly positive association for a color blind viewer, but 2 and 3 are difficult or even impossible to read!
Unfortunately, zoom can be disabled using the Viewport Meta Tag, which is problematic.As a normally sighted person, it’s hard to imagine what your work is going to look like to a color blind eye. Websites are a major concern because it’s crucial that they are legible and easy to navigate for all users.This image underscores the difference between a color blind-unfriendly hover, and a color blind-friendly one: The top highlight, which is similar in tone to the normal button, is worst for a color blind audience; the middle is better, as it takes advantage of differences in brightness; the bottom is best, as it also adds a non-color component: a highlighted border You wouldn’t want your logo to consist of colors that are clashing or indistinguishable to a color blind audience, either, would you?When text doesn’t fit – as is often the case with a small pie chart segment – using a key will suffice.One accessibility feature that browsers have, is enabling someone to zoom in as much as they need.