How to emulate vision deficiencies in Chrome Developer Tools

December 20, 2020

accessibility

Chrome Dev tools now offers a feature that lets you emulate the following vision deficiencies in dev tools:

  • Blurred vision
  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopia

Follow these steps to try it yourself:

  1. Open dev tools cmd+opt+i
  2. Click on the three vertical dots in the top right hand corner of the dev tools. vertical dots
  3. Selected More tools > Rendering.
  4. Scroll all the way down and select a vision deficiency under “Emulate vision deficiencies.”

Get the free design systems newsletter

Whether you're new to design systems or a seasoned pro, this newsletter is for you.

Join over 70 developers learning about design systems now:

All content © Mae Capozzi