Tip: Emulate vision deficiencies in Chrome DevTools to see how users who experience color blindness or blurred vision might see your site Globally, 1

Emulate vision deficiencies in DevTools

submited by
Style Pass
2021-08-18 18:00:09

Tip: Emulate vision deficiencies in Chrome DevTools to see how users who experience color blindness or blurred vision might see your site

Globally, 1 billion people have a near or distant vision impairment impacting how clearly they can see objects, including web pages. Color blindness (color vision deficiency) alone impacts 300 million people worldwide, limiting how well your users may be able to see color as clearly as other people. For example, they may be unable to completely interpret red, green or blue light.

Chrome DevTools recently added support for emulating color vision deficiencies, helping you better optimize your pages to be inclusive of users with differing levels of color blindness. A demo video of the feature can be found below:

As part of this work, a new Puppeteer API (page.emulateVisionDeficiency()) was also introduced to support programmatically enabling these emulations through the Chrome DevTools Protocol. An example

Leave a Comment