Design for All the people: Color blindness
At this moment we are in the year of performance in which the main focus is DIGITAL WORLD. Time ago before the pandemic. Every business turning to the digital had a real impact because the people are not used to doing that.
Almost 2 years later, the pandemic is still here and the companies that survive now are digital and everything at one click. But the question here is: Most of the websites are accessible for all the people? And the answer is I don’t think so. But we can do something about it.
First, we need to know what Color blindness occurs when you are unable to see colors in a normal way. It is also known as color deficiency. Color blindness often happens when someone cannot distinguish between certain colors. This usually happens between greens and reds, and occasionally blues.
https://www.aao.org/eye-health/diseases/what-is-color-blindness
As you can see there are different types of color-blindness like deuteranomaly, protanopia, and tritanopia.
Knowing all of this information, in the process of design, do you include blind people as a target of your product? how do they see the colors or do you just design?. It is important to know that when you are designing you need to take into account all the people.
Things to keep in mind when you are designing for color accessibility
When you are designing the main focus, its design with really good contrast, if eligible to read and view it, it would be really difficult for them to choose an option between two buttons and users would get confused when deciding on a website. Would be a good idea to have some patterns and textures to have contrast in the final designs.
At the moment as designers, we have a lot of tools for helping to test a good contrast that supports the accessibility for color-blind to pass or not the testing of contrast.
Tips for design
When you are designing you always need to have more than one color to help to be distinct and alert. It is really important to have text to explain the action in the alert and you also can use an icon to clarify the information.
That is one of the reasons, if we have an input that shows the error, it is important to have a border color to show that there is a mistake. Also, you can use an icon to reinforce the idea.
One of the most important things here is the contrast between the font and the background. According to the WCAG guidelines (accessibility guidelines for web content), made by the World Wide Web Consortium (W3C) the visual presentation of text must have a contrast ratio of at least 4.5: 1. This can be calculated with Contrast Ratio, a calculator made to test contrasts between background color and text.
There is one page that you can simulate the image how they see the color so you can use it in case you want to understand, here it is the page http://www.color-blindness.com/coblis-color-blindness-simulator/
But a real test what we can do before finishing the design is using the grey colors just to see the contrast between the application.
Have tools for helping when you are designing
Adobe color is one of the tools that have a new option of accessibility and can also suggest that the colors are not appropriate for combining between the background and the font. Because they also make for symbols, long text, and small text that simulate big screens and also small screens like mobile phones, “Thinking in a responsive way”.
Here we have a color-blind simulator that shows what would be with the different blind colors.
Inspect mode
Chrome
It is a new section that includes accessibility you need to open inspect mode and select the element and then it will show that item a special section for accessibility, in especial the contrast that we have and it will mark it with a green icon.
But when the color is with a low contrast they show that accessibility is not appropriate and it will mark it with an alert icon.
This tool is really useful because you can test this one in real-time on any website and its a really good option to keep in the mind.
Firefox
In this navigator, you can go directly to inspect accessibility properties and there are huge options to have. If you are changing the color in the specific element there they include the contrast mode to choose the correct one.
But one of the most interesting things that it has is the especial simulation in real-time of the page with the different types of color blind, also with the types of contrast that we can have then you can have a real idea on how they can see a web site.
Conclusion
One of the benefits is making the site color-friendly for the contrast, using accessibility in the web site are more likely to be ranked when you are searching, you are also targeting PDAs, 3G phones, and similar technological devices used for web access and the Web site is seen as more professional.
Also thinking about all the color blind people can feel more comfortable using a website that is also for them.
Finally, we have a lot of tools and it would be a really good idea to use them and also, to include all the public. Because our designs can cover all the people you can not run the risk of having a Website where the text is barely legible and the images unrecognizable.
Let’s continue including all the people…
