Testing steps, Customised colours in Firefox

We’ll take you step by step through how to test a component or feature with customised colours, using a Firefox preference, that makes content easier to read by using preferred colours.

How to turn customised colours on / off

1. In the Firefox menu, open 'Preferences' (Mac) or 'Settings' (Windows), under 'General' look for 'Language and Appearance', then open 'Colours'.
2. In the settings, you can select from four colour options, such as 'Text', to customise with colours of your choice.
3. When all colours are customised, in the dropdown choose 'Always', then select 'OK'. You will see web pages colours change to reflect your customised colours.
4. To turn off customised colours and restore default colours, in the Firefox address bar type 'about:config', accept the risk, search for 'browser*color', then reset the modified colour preferences. You will see web pages colours change back to reflect the default colours.

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 customise colours in Firefox for the first time.

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

Step 1 - Open Firefox

Open Firefox, this is the default browser for customising colours.

Note: there are other ways of customising colours, though always test with the most commonly used method.

Step 2 - Go to the testing url

Navigate to or type in the testing url.

Step 3 - Open the colour preferences

In the Firefox menu, open 'Preferences' (Mac) or 'Settings' (Windows), under 'General' look for 'Language and Appearance', then open 'Colours'.

Step 4 - Customise the colours

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

1. In the colour settings, select one of the four colour options, such as 'Text'.
2. Customise the colour, choose a colour which is distinctly different from the design of the component or feature.
3. In turn go through all options, until all colours are customised, including text, background, unvisited links and visited links.
4. In the dropdown choose 'Always', then select 'OK'. You will see colours change on web pages to reflect your customised colours.

If you are having difficulty changing a colour on Mac, when you select one of the four colour options, such as 'Text', before trying to change the colour, check that the current colour is selected in the 'Choose a colour window'. If the current colour is not selected, try selecting the colour option, such as 'Text', again with a double click. If you are still having difficulty, try closing and reopening the colour preferences.

Step 5 - View the component

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

1. Check all colours have changed to reflect your customised colours.
2. Check that no other colours (other than your customised colours) can be seen. This should apply to all elements except buttons and images.
3. Check that the colours of icons and graphics reflect those of your customised colours. 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 customised colours. 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 colours.
• Colours of icons or graphics do not reflect those of your customised colours. Note, for SVGs with more than one colour, only some customisation maybe possible.
• The visual design isn't equivalent to that viewed without customised colours, 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 customised colours is met with Firefox.

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