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.”

If you liked this post, please consider sharing it!

Want frequent design systems tips, articles, and jobs sent right to your inbox?

Sign up for the Design Systems Newsletter today!

If you're unable to sign up, please turn off your ad blocker and try again.

© Mae Capozzi's Website 2021