< Back to Blog Overview

Vision Deficiency Testing with Puppeteer

2020-07-07
Vision Deficiency Testing with Puppeteer

The latest version of Puppeteer now supports Vision Deficiency Testing.


This new option allows for testing and fixing accessibility issues you may have on your website. Chrome 83 is now able to mimic visual impairments, for example color blindness.


Below we'll show you how to use this with HeadlessTesting.com and take screenshots of the various page.emulateVisionDeficiency options.

Example Code

These are the various vision deficiency types you can use with page.emulateVisionDeficiency:


  • achromatopsia

    With achromatopsia, people see only black, white, and shades of gray.

  • deuteranopia

    A form of color blindness, resulting in an inability to distinguish red from green.

  • protanopia

    The most common form of colour blindness, causing confusion of greens, reds, and yellows.

  • tritanopia

    A condition where a person cannot distinguish between blue and yellow colors

  • blurredVision

    Simulates a blurred vision of the webpage.


Please see the example below on how to simulate these with HeadlessTesting and save a screenshot on your computer:


const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.goto('https://headlesstesting.com')
await page.emulateVisionDeficiency('achromatopsia')
await page.screenshot({ path: 'screenshot.png' })
browser.close()

HeadlessTesting Logo

Sign up for a Free Trial

Start Headless Testing instantly.

No credit card required!