Chrome adds Color Vision Deficiency to Chrome Developer tool
The Chrome developers revealed that they are working on a developer tool called Color Vision Deficiency (CVD, color blindness) that can help developers make their websites more color blind.
New accessibility feature in @ChromeDevTools: simulate vision deficiencies, including blurred vision & various types of color blindness. 🔥
Find out how people with vision deficiencies experience your web app, and resolve contrast issues you didn’t even know you had! pic.twitter.com/QKLQmEhhMM
— Mathias Bynens (@mathias) March 10, 2020
According to ColourBlindAwareness.org, there are currently approximately 300 million colorblind people worldwide. Chrome will use DevTools to simulate the styles seen by colorblind people such as full-color blindness, red blindness, and green blindness on any given web page. Include the following:
- Support for emulating deuteranopia, protanopia, tritanopia, achromatomaly, and achromatopsia on any given web page through DevTools.
- Introduce a Chrome DevTools Protocol API (Emulation#setEmulatedColorVisionDeficiency) to support programmatically enabling these emulations through CDP.
- Introduce a new Puppeteer API to support programmatically enabling these emulations through CDP.
- Expand the contrast checker in the DevTools colorpicker widget to also check for contrast issues across known color vision deficiencies. (Think “Contrast looks good… except for people with <insert CVD here>! Click here to preview it.”)
- Add a Lighthouse test to the Accessibility audit that makes use of the new functionality, and checks contrast levels for each emulation.
In the long run, CVD will ideally receive first-level support at the Blink Renderer level, so filters can be applied to documents without changing the document or affecting the calculation style.
Chrome 82 is expected to join the tool, but the Canary version experience is currently available.
