Verify that the page is usable with blurred vision

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:

  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 display the list of tools, and then select Rendering.

  3. In the Emulate vision deficiencies dropdown list, select Blurred vision.

    Simulating a blurred page

    Notice that the text-shadow CSS property makes the text of the menu items difficult to read on the upper menu. For example, review the Home, Adopt a Pet, and other menu items.

  4. In the Rendering tool, in Emulate vision deficiencies, select No emulation to remove the blurred vision 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