Testing steps, High contrast mode on Windows

We’ll take you step by step through how to test a component or feature in high contrast mode, a Windows 10 setting, that makes content easier to see by using distinct colours.

How to turn high contrast mode on / off

High contrast is a system setting found on Windows 10.

1. To turn high contrast mode on, go to the taskbar and search for 'turn high contrast on', you should see the high contrast setting listed in the search results, here you can open the high contrast settings.
2. In the settings, toggle high contrast on. You will see colours change to reflect that of the selected theme.
3. You can select from four default colour themes or create your own customised theme with colours of your choice.
4. To exit and close high contrast mode, go to the taskbar and search for 'turn high contrast on', you should see the high contrast setting listed in the search results, here you can open the high contrast settings and toggle high contrast off.

Back to page contents

Testing steps

We’ll take you step by step through how to test a component or feature. Following the same steps every time, ensures that everyone is testing using the same methods and using the most common techniques. The steps also enable anyone, in any role, to use high contrast mode for the first time.

As you go, make notes of any bugs you find.

Step 1 - Turn high contrast mode on

Toggle the high contrast setting on, this is the most used high contrast mode.

Note: There are other forms of high contrast modes, though always test in the most used mode.

Step 2 - Create your own customised colour theme

Using a theme that has distinctly different colours to the default design will make it easier to see if there is a bug.

1. In the high contrast settings, select one of the four default colour themes, such as 'High contrast black'.
2. Using colours which are distinctly different from the design of the component or feature, and also distinctly different from the selected default theme, customise each of the colours by clicking or double clicking on the colour.
3. In turn go through all options, until all colours are customised, including text, hyperlinks, disabled text, selected text, button text and background.
4. Select 'Apply' and name your customised theme. You will see colours change to reflect your customised theme.

If you are having difficulty selecting a colour other than black or white in the colour picker box, check the 'value' slider is set to 100, then try selecting a colour in the colour picker box again. Still having difficulty, try entering a number into the 'Red' field, then try selecting a colour in the colour picker box again.

Step 3 - Open Edge

Open Edge, this is the default Windows 10 browser.

Note: high contrast is a Windows setting built primarily for other Microsoft products such as Edge, while the high contrast setting will work with other browsers you may encounter bugs which aren’t present in Edge; the default high contrast mode browser.

Step 4 - Go to the testing url

Navigate to or type in the testing url.

Step 5 - View the component

Users should be able to select any colours of their choice in the high contrast settings, and have the content relect this, even if this is pink text on a purple background.

1. Check all colours have changed to reflect that of your customised colour theme.
2. Check that no other colours (other than those of your customised theme) can be seen. This should apply to all elements except images.
3. Check that the colours of icons and graphics reflect those of your customised theme. Note, colours cannot be changed with some icon and graphic image formats, such as jpeg, png or gif, use SVGs if possible.
4. Check that the visual design is equivalent to that viewed without high contrast. For example, have any design affordances been lost, such as background colours, is the layout still clear? Note, in this mode container background colours will likely be removed. If required, borders can be added specifically to be seen only in this mode to help with lost design affordances.

Bug examples

• Content is in a colour other than those of your customised theme.
• Colours of icons or graphics do not reflect those of your customised theme. Note, for SVGs with more than one colour, only some customisation maybe possible.
• The visual design isn't equivalent to that viewed without high contrast, such as background colours are removed so much so that the layout is no longer clear.

Step 6 - Accessibility acceptance criteria

Accessibility acceptance criteria can be used for additional manual testing steps specific to your component and documented UX.

1. Read the accessibility acceptance criteria. If the accessibility acceptance criteria is missing, ask your team's business analyst for the criteria before continuing.
2. Check that any criteria that is specific to using high contrast mode is met with Edge on Windows.

Step 7 - Document any bugs

Document any accessibility bugs found, include as much information as you can, including information on how to replicate the issue and the bug priority level.

Note, this guide takes one approach, there are other ways you could do this. Back to top