Want more? Subscribe to my free newsletter:

Emulate vision deficiencies in DevTools

September 29, 2020

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.

Normal vision compared to other forms of color deficiency such as deuteranomaly Image credit: BoredPanda

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:

Available in the Rendering sub-panel, the feature simulates the following kinds of vision deficiencies:

Color vision deficiency	Details
Blurred vision	Difficulty focusing on fine details.
Protanopia	Difficulity perceiving any red light.
Deuteranopia	Difficulty perceiving any green light.
Tritanopia	Difficulty perceiving any blue light.
Achromatopsia	Difficulty perceiving any color except for shades of grey.

To simulate a vision deficiency:

Open the Rendering sub-panel by selecting the ... menu in the toolbar
Select the More tools option and then Rendering
Scroll to the Emulate vision deficiencies item and use the drop-down menu to display the options available for color vision deficiency emulation.
Select an option
The current page should now display the color vision deficiency emulated

DevTools rendering panel showing the color vision deficiency emulation

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

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://android.com');

  await page.emulateVisionDeficiency('blurredVision');
  await page.screenshot({ path: 'blurred-vision.png' });

  await page.emulateVisionDeficiency('achromatopsia');
  await page.screenshot({ path: 'achromatopsia.png' });

  await page.emulateVisionDeficiency('deuteranopia');
  await page.screenshot({ path: 'deuteranopia.png' });
  await browser.close();
})();

Output of Puppeteer script using CVD features to emulate vision deficiency

Strong kudos goes to Mathias Bynens who led the implementation work on this feature in both DevTools and Puppeteer. Thanks, Mathias!

Keeping in mind blurred vision and color blindness issues can help ensure that your pages are accessible to the widest range of users possible. Give the feature a spin and if you have any feedback, feel free to share it here.

Further reading