Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. If your design is unsightly or hard to read for this substantial group, you should consider making a more accessible user interface for color blinds.
There is more than just one type of color-blindness, and all of them have a direct relation to the available photoreceptors in the eye. There is Monochromatism, Dichromatism, Anomalous trichromatism, Tritanopia (Tritanomaly), Deuteranopia (Deuteranomaly), and Protanopia (Protanomaly) type.
In this article, we are going to talk about:
- What is color, blindness?
- Why designing for color blinds is important?
- What challenges color blinds face?
- How bad is the situation for them?
- How can we help them?
- Easy to Spot Links
- Stats about colorblind people
- Tips on designing for colorblind (Bad colors)
- Tools to improve designs for color blinds
What is color blindness?
Color blindness is also known as color vision deficiency and is the decreased ability to see color or differences in color, and unfortunately, there is no cure for it.
Males are more likely to be colorblind than females because the genes responsible for the most common forms of color blindness are on the X chromosome.
Red-green color blindness is the most common form, followed by blue-yellow color blindness and total color blindness. Red-green color blindness affects up to 8% of males and 0.5% of Northern European females.
Many people think that if you suffer from red-green color blindness, this are the only two colors you can’t distinguish. But that is false. Color blindness doesn’t relate to only two color hues you can’t distinguish. It is the whole spectrum that is affected.
Being color blind makes people ineligible for certain jobs in certain countries. This includes job positions like pilot, train driver, crane operator, and working in the armed forces.
Color blindness affects on artistic ability, however, is controversial. The ability to draw does not appears to be changed, and a number of famous artists are believed to have been color blind.
Why designing for color blinds is important?
Everybody deserves to be a part of the web community, and their disability should not be a reason to why they are isolated from it.
Helping colorblind people be a part of your web site community throw your design is just the right thing to do in both professional and moral aspects.
As a normally sighted person, it’s hard to imagine what your work is going to look like to a colorblind eye. And yet, this can make a huge impact.
Websites are a significant concern because they must be legible and easy to navigate for all users; after all, they are meant to be seen by everyone, no matter if they are colorblind or not.
Designing in a way that helps color blind people read your posts better can also bring you an additional organic traffic of new readers and audiences that can themselves bring more people like that to your website.
What challenges color blinds face?
People with color-blindness certainly live more complicated and difficult lives in most cases, especially when it comes to work and education.
People with color-blindness certainly face many difficulties in everyday life, which generally sighted people aren’t aware. Challenges can arise in every activity you can think of, including choosing and preparing food, gardening, driving, etc.
Simple tasks like selecting ripe fruit, choosing clothing, and reading traffic lights for example can be quite challenging due to that, and it gets worse as age progresses.
Color vision deficiency may also make some educational activities even more difficult. Thankfully most people find that they can adapt and the problems become minor.
People with achromatopsia (total color blindness) may also have decreased visual acuity and be uncomfortable in bright environments.
How bad is the situation for them?
If you are color blind, you are probably well acquainted with how frustrating it can be.
Color blindness can often result in frustrating, humiliating, and embarrassing, but most just develop a thick skin and adapt to see the funny side.
There is a very dangerous side to consider when talking about color blindness. There are certain situations in which a correct interpretation of color can be life-saving. An example can be traffic lights. With around 1 in 14 men being red-green colorblind, the risk of misinterpreting the red stoplight and green go light becomes apparent.
A lot of colorblind people do not have a problem in differentiating the red and green colors used in modern traffic lights using LED, but they do however, seem to have trouble with the older bulb style ones, which can be quite difficult to identify.
If you are color blind, it is important to consider this whenever you drive, be aware of your disadvantage but don’t let it stop you from living your life!
How can we help them?
Designing for accessibility doesn’t mean to compromise with the aesthetic integrity of your design. With that being said, here are the ways to make your design more colorblind-friendly:
Use both colors and symbols
Color shouldn’t be the sole medium to convey information. Web pages should be designed so that all information conveyed with color is also available without color.
Designers should add symbols in addition to colored text to get the point across to a diverse audience and capture their attention.
Easy to Spot Links
It’s good to have links on your web page easy to spot for everyone, including your color blind audience. Relying on color alone is probably not the best option for this.
Someone with achromatopsia (the inability to see color at all) are often left scratching their heads when trying to find links on a web page.
The only other way left for these users is to hover with their mouse at every word, waiting to see if the cursor would indeed change to a pointer, making it very frustrating for them to be on the internet. Links should be underlined, or have incorporate icons, to make it a little easier for colorblind users.
Use patterns and textures to show contrast
Color blind people are able to perceive differences in brightness, saturation, hue, and contrast. Designers can use this to their advantage since plenty of people with this condition fare better with bright colors than dim ones.
That’s because dim colors have a tendency to blur into one another. Be careful with contrasting colors and hues.
Keep in mind that it might be difficult for colorblind users to interpret graphs and charts. In this case, it’s better to use contrasting patterns and, where possible, place text instead.
Avoid bad color combinations
Some color combos are especially hard on color blind people and for that reason, should be avoided from your designs. Several color combinations unsuitable for these individuals, including:
- Green and black
- Green and grey
- Blue and grey
- Light green and yellow
- Green and blue
- Blue and purple
- Green and brown
- Green and red
Make it monochrome
One of the easiest and effective ways of avoiding all the trouble for you and make a neat colorblind-friendly design is to add multiple shades of a single color rather than using multiple ones. Simplicity is king here.
That doesn’t mean making it all black and white, but viewing your website in grayscale mode helps you envision how it would appear to your colorblind audience.
Stats about colorblind people
Reliable statistics for people with an acquired form of color vision deficiency are difficult to find, but studies have shown that color blindness affects approximately 1 in 12 men and 1 in 200 women in the world.
This means that, for example, in Britain, there are approximately 3 million color blind people, this is about 4.5% of the entire British population.
If you put this into percentages, 8% of all men and about 0.5% of all women are suffering from color vision deficiency. This means that there are very high chances one of your neighbors or one of your classmates is colorblind.
These figures rise in areas where there is a greater number of white-colored people per head of population. In Scandinavia, the percentages increase to approximately 10-11%.
In contrast, in Central Africa, there are few color blind people. Countries like India and Brazil, which large numbers of people with mixed race genes in their genetic history, have the tendency to have a relatively high incidence of color vision deficiency.
Worldwide, there are around 300 million people with color blindness, almost the same number of people as the entire population of the USA alone!
Tips on designing for colorblind (Bad colors)
Red and green, when put together, can be problematic, but they can sometimes be matched.
People who have strong CVD are seeing both red and green as brown, but people with weak CVD can see strong red and green colors as red and green. However, this can still be problematic when the colors are too weak or mixed together.
Keep in mind that the problem with the colors is much more complex and goes beyond the simple red vs. green. Red, green, and orange all appear to be brown for someone with strong CVD and it would be more accurate to say to don’t use red, green, brown, orange together. And this doesn’t end here.
Blue and purple together; pink and gray together; gray and brown together can be all troublesome combinations.
Blue and purple are a combination that is often overlooked. If you do an RGB color model, you can achieve purple by using blue and red together. If the user has issues with red, then he/she may also have issues with purple, which would appear to look like blue.
So, in summary, you should keep in mind:
- Be aware that it’s not just about red and green
Red and green together can be problematic, but they can sometimes be used together
- Use a colorblind-friendly palette when appropriate
If you must use red and green together, take advantage of light and dark tones.
Tools to improve designs for color blinds
There are so many great tools available for you to help colorblind people like:
- Check My Colours
This tool helps you by simply entering your URL and receive feedback of what needs to be improved on your website.
- WebAim
WebAim is a great color contrast checker that provides two colors to see if they match fine together and if they pass accessibility guidelines.
- I Want To See Like The Color Blind
Just like its name implies I Want To See Like The Color Blind is a site that applies color blindness filters to your web page right within your Google Chrome so you can kinda understand how a colorblind person sees which can help you get an idea for how to design your web site and point you into the right direction.
- Color Oracle
Color Oracle is a color blindness simulator built for Windows, Mac, and Linux users with a similar idea as the previous tool we talked about. It shows you what people with common color vision impairments will see.
You will benefit a lot by going for guidance in any of these sites, and you will get to know a little bit of the problem colorblind people face and how to make it easier for them.
Final Thoughts
Thank you for taking your time to read through this article.
I hope you found it useful, and hopefully, now you have a better idea of what is color blindness, what difficulties people with color vision deficiency have, why it is an important subject to talk about, and how can we help them through designing a better and accessible interface.
If you’d like to contribute, share this article with your friends and family and stay tuned for the many more articles to come. We’ll love to hear your opinion on the subject, so be sure to comment below your thoughts, and as always, we’ll see you next time.
