Back to demo list

Demo 2: Contrast checker and vision simulator

Instructions

Check contrast ratios

Chrome/Edge

  1. Open this page in Chrome/Edge.
  2. Open dev tools.
  3. Inspect the element.
  4. In the "Styles" tab, click the colour swatch next to the value for color.

Firefox

  1. Open this page in Firefox.
  2. Open dev tools.
  3. Go to the "Accessibility" tab.
  4. Navigate to the item in the accessibility tree.

Simulate vision

Chrome/Edge

  1. Open this page in Chrome/Edge.
  2. Open dev tools.
  3. Go to the "Rendering" tab.
    Note: If you don't already have this tab available, click the three dots ("More Tools") next to the "Console" tab and check "Rendering".
  4. Make a selection for "Emulate vision deficiencies".

Firefox

  1. Open this page in Firefox.
  2. Open dev tools.
  3. Go to the "Accessibility" tab.
  4. Make a selection for "Simulate".

Activity

The first rule of ARIA is:
you don't use ARIA.

The second rule of ARIA is:
you do not use ARIA.

The third rule of ARIA is:
learn to use ARIA correctly.

Back to demo list