| title | Verify that a page is usable with blurred vision |
|---|---|
| description | To verify that a webpage is usable with blurred vision, in the Rendering tool, use the Emulate vision deficiencies dropdown list. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 06/07/2021 |
To simulate blurred vision, in the Rendering tool, use the Emulate vision deficiencies menu. When you use this feature with the demo webpage, you can see that the drop shadow on the text in the upper menu makes it hard to read the menu items.
To check whether a webpage is usable with blurred vision:
-
Open the accessibility-testing demo webpage in a new window or tab.
-
Right-click anywhere in the webpage and then select Inspect. Or, press
F12. DevTools opens next to the webpage. -
Press Esc to open the Drawer at the bottom of DevTools. Click the + icon at the top of the Drawer to display the list of tools, and then select Rendering.
-
In the Emulate vision deficiencies dropdown list, select Blurred vision.
Notice that the
text-shadowCSS property makes the text of the menu items difficult to read on the upper menu. For example, see the Home, Adopt a Pet, and other menu items. -
In the Rendering tool, in Emulate vision deficiencies, select No emulation to remove the blurred vision simulation.
