Accessibility Rendering Tools in Chrome

There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. These are great for testing the implementation of your accessible design! The features include:

  • Emulate CSS media feature prefers-color-scheme
  • Emulate CSS media feature prefers-reduced motion
  • Emulate vision deficiencies

Unfortunately, they are quite difficult to discover/locate, so here’s where to find them:

  1. In Chrome browser, open the Developer Tools.
  2. Select the “…” menu button in the toolbar.
  3. Select the “More tools” menu.
  4. Select Rendering; the Rendering panel appears in the sub-panel (next to Console if no others are present).
  5. Scroll to the bottom of the Rendering panel to locate the features.
  6. Select an option from the dropdown for each.

Happy developing!

Bottom on rendering sub-panel Chrome

Addendum

Great point by Chris Heilmann via Twitter.

Related

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>