Colour Bliend
Colour Bliend
Colour Bliend
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
Color isn’t omnipotent, you shouldn’t expect that it can solve all of
your problems alone. But with a proper base color is able to beautify
UI and improve UX.
Of course, every pattern and texture bring a lot of noise, so it’s better
to avoid them. Slack, for example, offers users special accessible
themes that change all colors of the user interface.
In Slack, you can choose one of the preset accessible themes
In order to avoid color blindness pitfalls, here are a few handy rules
and approaches to consider:
Avoidthe following color combinations, which are
especially hard on color blind people: Green & Red; Green
& Brown; Blue & Purple; Green & Blue; Light Green & Yellow;
Blue & Grey; Green & Grey; Green & Black
Make it monochrome: Using various shades of a single color
instead of multiple colors is of course the most surefire way to
avoid color blindness issues. Today minimalism is all the rage,
isn’t it?
Use high contrast: Color blind people can still perceive
contrast, as well as differences in hue, saturation and
brightness. Use these to your advantage (Hint: many color
blind individuals report being able to better distinguish between
bright colors rather than dim ones, which tend to blur into one
another)
Usethicker lines: Some mildly color blind people are able to
see a color, but only if there’s a sufficient “mass” of it. If a line
of color is too thin, it won’t show up as the right color.
Don’tassume colors will signal emotions in and of
themselves: If you’re using red to signal “bad,” “warning,” or
“watch out,” consider adding another symbolic element to get
the point across to color blind viewers.
Use texture instead: in maps and infographics, try using texture
in addition to color to differentiate between objects.
Texture, in addition to tone, helps a color blind audience read
something like an infographic.
Additionally, there are tons of resources that give you feedback about
your color choices. Some of them even provide simulations of what
your design would look like to a color blind eye! Check these out: