Get In Touch
55 Lower Road, Chorleywood, UK
hello@yullux.com
Ph: +44 750252 8377
Cyprus Office
pedro@yullux.com
Ph: +357 70000 864

Designing for Color Blindness With Chrome DevTools (in Just 4 Clicks)

Color blindness and vision deficiencies are hard to imagine if you are not affected by them. However, it’s important to take people with visual impairments into consideration when designing a color palette for a website or application. If you don’t, they might be unable to use vital features such as clicking links or buttons, or filling in forms.

To really push the point home, here’s why accessibility matters:

  • ACCESSIBILITY Building an Inclusive Web: Why Accessibility MattersSami Keijonen

Chrome DevTools’ color blindness emulator helps you design for color blindness. It was introduced in Chrome 83 and makes it possible to quickly emulate five common types of vision deficiencies. 

This tool is so user-friendly that it takes just four clicks to test color palettes for visual disabilities. It’s not just for live websites either; you can also use it with web-based design applications such as Figma and online color palette generators. In this way, you can check colors for visual accessibility in the design phase.

Now let’s see how to use Chrome DevTools to design for color blindness.

Open Chrome DevTools

Navigate to the page you want to test and hit F12 to open Chrome DevTools. Alternatively, you can right-click the page and choose the Inspect option. 

For the screenshots, I’ll use TutsPlus’ homepage.

Open Chrome DevTools

1st Click: Three Dots

At the top right corner of Chrome DevTools, click the three vertical dots icon to open the customization menu.

Click the three dots

Advertisement

2nd Click: The “Rendering” Option

Here, hover the cursor over the More tools option, and a dropdown menu will appear. Click the Rendering option.

Click Rendering

3rd Click: The “No emulation” Button

Now, a new Rendering view has appeared at the bottom of Chrome DevTools. Navigate to this view and scroll down to the bottom. You’ll find the color blindness emulator here. 

Click the No emulation button.

Click the no emulation button

4th Click: Vision Deficiency Type

The No emulation button has opened a drop-up submenu where you can choose between five vision deficiencies:

  • Blurred vision – lack of sharpness
  • Protanopia – can’t see any red light (most common form of color blindness)
  • Deuteranopia – can’t see any green light 
  • Tritanopia – can’t see any blue light
  • Achromatopsia – only can see the shades of grey (total color blindness)

For the screenshot below, I selected protanopia. You can see that the colors have changed, and not for the better. For instance, green and orange now look almost the same, even though on the original image they are easy to distinguish. You can also scroll up and down the page to see how the rest of the design has changed.

Select protanopia in the emulator

Make Your Whole Process About Designing for Color Blindness

Chrome DevTools’ color blindness emulator includes the most common types of vision deficiencies–each one to its fullest manifestation. However, in real life, visual disabilities vary more and exist in various extents. To learn more about the symptoms and types of color blindness, check out the Color Blind Awareness website.

Also note that even though picking an accessible color scheme is essential, it’s also important to use non-color designators for user actions (this is also a WCAG 2.0 requirement). I wrote about how you can make links accessible by adding other types of visual markers in detail on my blog, and here are some CSS tips for better color accessibility too.

Testing color blindness with Chrome DevTools is so easy that it’s a great idea to add it to your design workflow, as it can help prevent future headaches. 

Source

If you’re looking for Web Design advice or implementation for your business, feel free to contact us directly and we’ll get in touch. Yullux was voted the #1 agency in Europe, Yullux is based in London, United Kingdom if you prefer to walk-in.

Author avatar
yullux

Post a comment

Your email address will not be published. Required fields are marked *

We use cookies to give you the best experience.