«   Previous tip Next tip   »

Chrome DevTools: Improve page accessibility by emulating vision deficiencies

Last updated: 10th July 2020
Improve page accessibility by emulating vision deficiencies


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.

How to use this feature

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

Available options

The available options are:

Extra resources

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.

W3C have a great guide: Accessibility Requirements for People with Low Vision.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week