How to make your website accessible for color blind people

What does it mean to be color blind, after all? According to a broader definition, color blindness consists of a vision disorder that affects color perception. But how exactly do these people see? Among many variations, there are three that are the most common: protanomaly, deuteranomaly, and tritanomaly. These disorders consist of the absence of perception of the colors red, green and blue, respectively.

Therefore, color blindness is not a homogeneous disability, and thinking of accessibility for this group requires specific details. Depending on the color choice you make to design your layout, or to highlight some information in your text, the content can become inaccessible.

When it comes to this disability, the Web Content Accessibility Guidelines recommends never transmitting information simply through the use of colors. In this article we have put together some tips that will help you understand how to do this!

Put yourself in their shoes!

Some tools can simulate the vision of someone with a color perception absence. On ColorBlind, just type in your URL and you will have a practical notion of how a color blind person would see your website. There, there is also the possibility to select different kinds of color blindness – which is great to have a more complete understanding.

Another technology available in the market is the Chromatic Vision Simulator app. It uses a cell phone’s camera to capture its surroundings and makes simulations of how that image would be seen by color blind people.

Pay attention to images!

Often an image’s content can be very important for the full comprehension of the message that is being transmitted. That is why, when it is time to create graphics or sell products, some actions must be taken in order for color blind people to have accessibility.

When it comes to pie charts, only differentiating each section with colors is not enough. Therefore it is recommended for each segment to have its own description. In regards to other types of graphics, such as tables and diagrams, a useful tip is to choose the colors after trying out the simulators we have mentioned above.

Another situation that color blind people have to go through is related to selling products. Just looking at a photo is not enough when making a buying decision. When thinking of how to change that, some companies are writing which color the merchandise is, so it is possible to differentiate it.

Creating an accessible text

Although images are the largest barrier when creating an accessible website for the color blind, a text’s formatting can, many times, not work for everyone. In many cases, the chosen font or the way to highlight an information can make the content confusing, since it is not rare for a color blind person not to notice the difference between one color and the other. To solve this problem, here are two very simple tips that can be quite helpful:

• When highlighting an information, do not do it simply by changing the color, underline the sentence. This way, someone who is color blind will be able to tell sentences that are highlighted apart from those that are not.
• Pay attention to the contrast between the page’s background and the chosen font, because in many cases this can make reading more difficult. 

Did you notice? Thinking about accessibility for color blind people is not that hard! With these tips your content can become accessible to a substantial part of the population that was previously unable to consume it.

There are many other assistive technologies that can help you out when building an accessible website. Accessibility reaches many diverse populations and therefore there are multiple different tools for it. If you are not quite sure where to begin, check out the Hand Talk Blog. There you will find many more tips on how to implement accessibility as a part of your company’s culture and best practices.