This article describes why and how we implemented color vision deficiency simulation in DevTools and the Blink Renderer.
Background: bad color contrast
Low-contrast text is the most common automatically-detectable accessibility issue on the web.
According to WebAIM’s accessibility analysis of the top 1-million websites, over 86% of home pages have low contrast. On average, each home page has 36 distinct instances of low-contrast text.
Using DevTools to find, understand, and fix contrast issues
Chrome DevTools can help developers and designers to improve contrast and to pick more accessible color schemes for web apps:
- The Inspect Mode tooltip that appears on top of the web page shows the contrast ratio for text elements.
- The DevTools color picker calls out bad contrast ratios for text elements, shows the recommended contrast line to help manually select better colors, and can even suggest accessible colors.
- Both the CSS Overview panel and the Lighthouse Accessibility audit report lists low-contrast text elements as found on your page.
We’ve recently added a new tool to this list, and it’s a bit different from the others. The above tools mainly focus on surfacing contrast ratio information and giving you options to fix it. We realized that DevTools was still missing a way for developers to get a deeper understanding of this problem space. To address this, we implemented vision deficiency simulation in the DevTools Rendering tab.
In Puppeteer, the new page.emulateVisionDeficiency(type) API lets you programmatically enable these simulations.
Color vision deficiencies
Roughly 1 in 20 people suffer from a color vision deficiency (also known as the less accurate term "color blindness"). Such impairments make it harder to tell different colors apart, which can amplify contrast issues.