Verify that the page is usable by people with color blindness

To check that a webpage is usable by people with color blindness, in the Rendering tool, use the Emulate vision deficiencies dropdown list.

On the accessibility-testing demo webpage, the different donation states use color as the only means of differentiation.

  • Green means a high amount of donations have been received.
  • Yellow means a medium amount of donations have been received.
  • Red means a low amount of donations have been received.

But you can't expect all of your users to experience these colors as intended. By using the Emulate vision deficiencies feature of the Rendering tool, you can find out that this design is not good enough, by simulating how people with different vision would perceive your design.

To check whether a webpage is usable by people with color blindness:

  1. Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.

  2. Select Esc to open the Drawer at the bottom of DevTools. Select the + icon at the top of the Drawer to see the list of tools, and then select Rendering.

  3. In the Emulate vision deficiencies dropdown list, select Protanopia. Protanopia is reduced sensitivity to red light, making it hard to differentiate green, red, and yellow.

    Showing the document as someone with protanopia would see it

  4. In the Rendering tool, below Emulate vision deficiencies, select No emulation to remove the simulation.

See also

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools