Web developer tooling to improve accessibility has improved rapidly over the years. Emulating vision deficiencies on your website can help improve the design + user experience of your website to ensure it is accessible to as many people as possible.

To emulate a vision deficiency:

1. Use Cmd + Shift + P to open up the Command Menu
2. Select Show rendering to open up the Rendering Pane
3. Select a vision deficiency from the Emulate vision deficiencies section

The available options are:

• No emulation - Does not apply any vision deficiency emulation
• Blurred vision - Where vision is less precise
• Protanopia - Colour blindness resulting from insensitivity to red light
• Deuteranopia - Red-green colorblindness
• Tritanopia - Impaired blue and yellow vision
• Achromatopsia - Total absence of color vision

I've made a YouTube video on Accessibility debugging with Chrome DevTools, go and watch it to learn more about the a11y tooling which DevTools supports.

If you want to learn more on this subject, there is a useful Wikipedia article on Color blindness.

If you have any troubles viewing this animated gif, check out: umaar.com/dev-tips/231-emulate-vision-deficiencies