Did you know that 4.5% of the entire population is colorblind? If your audience is mostly male this increases to 8%. Designing for colorblind people can be easily forgotten because most designers aren’t colorblind.
In this post I will share my experience as a colorblind user and colorblind designer to help you make better color-related decisions for your projects.
TYPES OF COLOR BLINDNESS
Color blindness is really hard to describe if you don't have it; there are different types and severity of color blindness. The colorblind people don’t see the world in black and white, they can see color, but they have a narrowed color perception. Colors lie closer to each other and are not as vibrant or bright as someone who isn’t colorblind would see it.
Deutan color blindness is a type of red-green color blindness in which the green cones in the eye detect too much red light and not enough green light. As a result red, yellow, green, and brown can appear similar, especially in low light.
A person with protan type color blindness tends to see greens, yellows, oranges, reds, and browns as being more similar shades of color than normal, especially in low light. A very common problem is that purple colors look more like blue.
The blue-weak (Tritanomaly) and blue-blind (Tritanopia) colorblind have problems seeing the color blue.
Rod monochromacy (RM), also called congenital complete achromatopsia or total color blindness, is a rare and extremely severe form of an autosomal recessively inherited retinal disorder resulting in severe visual handicap.
For more information about types of colorblindness have a look at this blog post See From The Eyes Of A Colorblind
So The Question Is How You Can Design For People That Can't See Red, Have Problem With Purple, Blue Or Yellow?
HOW I DESIGN FOR 'NORMAL VISION' CLIENTS AS A COLORBLIND DESIGNER?
As I explained above I can see most of the colors and only have difficulty with few shades and hues. Most of my projects are done on the computer and it makes it easier to work with color codes and color picker. After 11 years of experience in different color-related fields such as Interior design, graphic design and advertising, I have my own style and tricks that help me to handle any types of projects.
Most of the time a client already has a couple of colors in mind. If you are colorblind designer then you can use tools and websites to help you determine what other colors might work well with it. You should know about color theory and color schemes while you work with color wheel.
It is rare that you would be messing with two different colors that will cause an issue together. However, if a client gives me something that isn't color blind friendly - I am usually the first person to tell them about the issue. When you can say "Actually, we should consider different colors or shades because this red text on green background will cause a contrast issue for people with deuteranomaly or protanomaly color blindness." As you can imagine, it helps you sound like one hell of an expert on design to know such details.
Designing for colorblind people is not that hard, tools like ColorSchemeDesigner have a color blind friendly mode that simply won't let you pick a palette that's inaccessible. I really recommend using these on any product.
DESIGN FOR COLORBLIND USERS
Use Contrast Wisely
Using a good contrast between the color of text and background is one of the most important factors which can draw your eye towards an important section of your website, app or your product. In addition, achieving an effective contrast can make the text easier to read.
Colorblind individuals are able to identify bright colors more easily than dim hues. Designers can use vibrant, dark colors to make it hassle-free for individuals with color deficiencies to read the text. So, play smartly with colors in dark and light combinations to maintain a perfect contrast ratio. But make sure to stick to colors that perfectly align with your overall brand guidelines.
Here are some color combinations that you should NOT use while choosing a color palette for your website.
Green & Red
Green & Brown
Blue & Purple
Light Green & Yellow
Blue & Grey
Green & Grey
Grey and Yellow
To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size. Have in mind that reducing the background opacity increases the contrast, making the text easier to read.
WEBSITE DESIGN:
Colorblind face great deal of difficulty in navigating through a website not properly designed for facilitating all sort of audiences. Major elements which can be improved in designing for colorblind audiences are mostly related to making your website information more vivid and easy navigation.
Here I am listing down some of the tips website designers can utilize for making their website optimized for colorblind audiences too.
1. Provide text based guidelines. In choosing the color for the product, give written guidance in front of color so that colorblind users can easily choose between colors. Use Clear Color Names and Useful product descriptions one of the most common hitches that colorblind individuals have to face is identifying the actual color of a product on an e-commerce website.
If you are running an e-commerce store that sells t-shirts and if you only show an image of the shirt, it may be a bit difficult for a person with color vision deficiency to identify which color the t-shirt really is.
2. Use the color search filters Incorporating an effective color search filter with clearly defined labels on your website makes it hassle-free for people with protanopia to conduct a product search. like Amazon website.
3. Give links of your website on clickable buttons for helping colorblind users in easily spotting a link, rather than searching through content and waiting when the cursor gets changed into the pointer.
4. Use clear contrast combinations for making it easier to spot the significant difference.
5. Give option to use your website in a gray-scale mode too, excellent example here would be Google maps which are shown in Gray scale but they look equally appealing, thing here to keep in mind is to not reduce appeal of the website.
6. Use colorblind-friendly graph with pattern on the colors.
These are some of the tips web designers can utilize to make their business website equally useful for 100% of the audiences.
TEST YOUR WEBSITE
There are tools available to help you design for colorblind people:
Colorblind Web Page Filter: If you want to test a website for its colorblind compatibility, try the Toptal Color-Blind Web Page Filter. The website, while sometimes slow, is effective at showing you what web pages look like through the eyes of others. Just give it a URL, choose the coverage filter, and click Fetch and Filter!.
The Best Color-Blind Simulator For Images: If you're designing an image and you're wondering how color-blind people will see it, try the Coblis (Color-Blind Simulator) website. Coblis is a web tool that makes it easy and quick to upload an image and test it against different color-deficiency examples.
Check My Colours: if you have an existing website, you can just enter a URL and receive feedback of what needs to be improved.
WebAim’s color contrast checker: provide two colors to see if they pass accessibility guidelines.
WEBSITES AREN’T JUST MEANT TO LOOK GOOD – THEY ARE MEANT TO BE EASY TO USE FOR EVERYONE, INCLUDING PEOPLE WHO ARE COLORBLIND.
Are You Colorblind?
Learn How To Make Better Color Decisions
First Standard Guide For Colorblind People From kindergarten to universities, color training for art, science, and business applications is taught by people who can see color, leaving the colorblind guessing their way through school, work, and daily life.
Refine Your Life Struggling with colors doing some simple daily tasks or want to learn some basics? This is your chance to "refine" your life and get all of the best strategies for taking control of your color choices.
color blind test, test for colorblind, colour blind test, blind color test, color blindness test, colorblind, color blindness, color vision deficiency, enchroma, colorblind awareness, colorblind glasses, colour blind, color blind, colorblind types, red green colorblind, colour blindness types, types of color blindness, deuteranopia, protanope, protanopia, what colorblind people see, can women be color blind, can girls be color blind, what is colour blind, yellow blue color blindness, what causes colour blindness#colorblind#colourblind#colorblindness#colorvisiondificiency#colorblindkid#colorblindartist#colorblinddesigner#imcolorblind#cureforcolorblind#treatmentforcolorblind#colorwill#colorblindguide#colorblindcourse#colourblindawareness#colorblindawareness
