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