Eight Tips for Design a Site That’s Colorblind-Friendly  

Web designers today are constantly honing and refining their techniques and skills sets to meet the demands of an ever-changing user base. So it may seem that taking into account the web browsing needs of those who suffer from a form of color blindness or color deficiency is somewhat trivial and, perhaps, not worth a designer’s full attention.


But consider this: nearly 10% of the world’s population (that’s 800,000 million people) suffer from some form of color blindness or deficiency. And for those among that number who rely on the Web for communication and information, the struggles to navigate successfully are all too real.

Imagine, for instance, you’re booking a vacation via a popular travel site. You enter your information into the boxes but do so incorrectly, and when you hit “submit” an error message appears. Now imagine that the error message appears to you in a very light gray color, surrounded by darker black or colored text. Could you guarantee that you’d be able to instantly notice and correct the error based on the message? If the error message were displayed in fire engine red, would it be more likely to capture your attention? These are the issues that hamper the web experience for people with color deficiencies. Refer to our useful tips for a visually user-friendly website.

1. Red-Green Color Blindness

The most common type of color deficiency is red-green color-blindness, where both red and green are seen as the same color. So if you need a certain block of text to really stand out and grab someone’s attention, avoid them when possible.

2. Color Combinations to Avoid

Also avoid the following color combinations: Green/Brown, Blue/Purple, Green/Blue, Light Green/Yellow, Blue/Gray and Green/Grey.

3. Color Shades

Don’t overlap shades of colors that have similar brightness values, as they create a clashing effect for those who are colorblind.

4. Hover and Brightness Settings

The colorblind can perceive brightness shifts just fine, so use them. For example, if you’re creating hover effects and the base color is light blue, use a very dark blue for the hover text.

5. Solid vs. Pattern

Consider adding a little pattern or texture to charts or bar graphs to aid in visual differentiation.

6. Remove the Bland

Contrast, contrast, contrast. When it comes to colors, symbols, hyperlinks, strokes or shadows ensure there is a significant visual difference, even if it means changing typography or font.

7. Visual Aid

Use different icons and shapes in addition to color for status icons.

8. Tip! Refer to Online Tools

Use a colorblind simulator when designing a site. It can greatly aid you in choosing complementary colors and shades that work for everyone, colorblind or not.

The next time you’re designing a website consider these eight tips for creating an experience that takes into consideration just how important color can be to someone who lives in a less-than-colorful world.

Share This Post

Subscribe To Our Newsletter

Get updates and learn from the best