Edit

Share via

Verify that a page is usable with blurred vision

  • Article

To simulate blurred vision, in the Rendering tool, use the Emulate vision deficiencies menu. When you use this feature with the accessibility-testing 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 window or tab.

  2. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  3. In DevTools, on the Activity Bar, click the More tools (More tools icon) button, and then select Rendering.

  4. In the Rendering tool, scroll to the Emulate vision deficiencies section.

  5. In the Emulate vision deficiencies section, select Blurred vision:

    Simulating a blurred page

    Blurred-vision simulation reveals that on the upper menu, the text-shadow CSS property makes the text of the menu items (such as Home and Adopt a Pet) difficult to read.

  6. To remove the blurred-vision simulation, in the Rendering tool, in Emulate vision deficiencies, select No emulation.

See also