Simulate Color Vision Deficiencies using browser Developer Tools

Summary

The Color Vision Deficiency Simulator tool in ArcGIS Pro can be used to display how a map, layout, presentation, or report is interpreted by individuals with the four most common color vision deficiencies: Protanopia (no red), Deuteranopia (no green), Tritanopia (no blue), and Achromatopsia (no color). This tool can help facilitate the process of developing products that are accessible to viewers with different color vision deficiencies. While there is not currently an equivalent tool available in ArcGIS Online, color vision deficiency simulation can be completed by importing maps into ArcGIS Pro, or by using a web browser's Developer Tools. 

While feature layers and web maps hosted in ArcGIS Online can be opened in ArcGIS Pro to run the Color Vision Deficiency Simulator, this does not provide the ability to simulate color vision deficiencies on configured web apps. Google Chrome, Firefox, and Microsoft Edge each provide the option to simulate Protanopia, Deuteranopia, Tritanopia, Achromatopsia, as well as blurred vision, and a loss of contrast, through their Developer Tool's Rendering settings.

This article walks through the process of simulating Color Vision Deficiencies using a web browser's Developer Tools as a way to assist in the development of web maps and apps that are accessible to all viewers. 

No Simulation	Protanopia (No Red)	Deuteranopia (No Green)
Tritanopia (No Blue)	Achromatopsia (No Color)	Contrast Loss

Procedure

Google Chrome - Access Developer Tools

1. In the top right corner of the browser, select the three dots to expand Google Chrome settings.
2. Mouse over the More tools tab, and select Developer tools.

Alternatively, the keyboard shortcut Alt + Shift + I can be used to access Developer Tools in each browser if using a Windows device.

Google Chrome - Enable Color Vision Simulation Rendering

1. Navigate to the bottom panel, and select the three vertical dots on the left side of the screen, and select Rendering.
2. After opening the Rendering tab, mouse over the pane as shown below to click and drag, expanding this panel if desired.
3. Scroll down to the Emulate vision deficiencies setting and select a color vision deficiency to simulate.

Microsoft Edge - Access Developer Tools

1. In the top right corner of your browser, select the three dots to expand Microsoft Edge settings.
2. Mouse over the More tools tab, then select Developer tools.

Microsoft Edge - Enable Color Vision Simulation Rendering

1. At the top of the Developer tools panel that was opened, select the "+" icon, and then Rendering.
2. Scroll to the bottom of the Rendering tab to the Emulate vision deficiencies setting.

Firefox - Access Developer Tools 

1. In the top right corner of your browser, select the hamburger icon to expand Firefox settings.
2. Click on the More tools tab, and select Web Developer Tools.

Firefox - Enable Color Vision Simulation Rendering

1. At the top of the Web Developer Tools panel that was opened, select Accessibility.
2. In the Accessibility tab, select the dropdown menu to the right of Simulate.