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:
Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.
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.
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.
In the Rendering tool, below Emulate vision deficiencies, select No emulation to remove the simulation.
- Emulate vision deficiencies - Defines the items in the Emulate vision deficiencies dropdown list, including Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
- Overview of accessibility testing using DevTools
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
I(Windows, Linux) or
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.