I’m a developer in the GDS Accessibility team and I’ve been exploring the different ways users can change the colours of a website.
This blog post looks at the methods with which users might change colours and what the people creating websites need to look out for.
Why users change colours on websites
Some users choose to change the appearance of websites to make them easier to read. For example, a user with low vision might increase the font size or a dyslexic user might change the font itself.
Another change that users might choose to make is to alter the colours used by websites. There are a lot of different user needs for this and there are a number of different ways to make those changes. Marian Foley wrote about how and why she changes website colours in Firefox.
A recent piece of work led me to look into this. A test on GOV.UK had found that buttons stopped looking like buttons when you changed website colours, because they had neither a background colour nor a border. So we decided to investigate this further.
The different methods for changing colours
I started to explore the different ways with which you can change the colours of a website. Here are the methods I found:
- you can change the browser setting for text and background colours and visited and unvisited links in Firefox and Internet Explorer
- you can install a browser extension in Chrome to change colours, for example ‘High Contrast’, ‘Midnight Lizard’ or ‘Pro Visu Look’
- you can change the appearance of your operating system, including the appearance of most software, via a system setting: macOS, iOS and Android let you invert the colours and change to grayscale, but Windows gives you many more options with which you can change the colours of lots of different elements
- you can use third-party software: screen magnifiers often include the option to change colours as well, some literacy software can help you tint your screen, and then there is other software which allows you to do either or both
- user style sheets (either via browser settings or a browser extension) might be quite technical to use, but services like userstyles.org and freestyler.ws make it easier and sometimes have good solutions for specific problems on specific websites
- hardware monitor settings can be adjusted to change brightness, contrast, colour settings and other things
- physical coloured overlays can be put on screens to give them a tint
Some issues I found
I tested a page with some input fields and a button in the GOV.UK style in various combinations of the above, including light and dark colour schemes.
While I was doing this I found a few bugs:
- that buttons become unrecognisable was the original issue I looked into (this is now fixed)
- that input content becomes invisible was a much worse issue I found - while unrecognisable buttons can be annoying, if the text you type into a text field is completely invisible, it presents a proper barrier (this is now fixed in GOV.UK Elements)
- that any input can become completely invisible is a specific bug in Firefox (I’ve raised this as an issue with Firefox)
What people creating websites need to think about
You should generally test websites in the browsers and settings that most of your users use. But in this case it is difficult to know which method people are using to change website colours. There is very little research into the subject. And it is impossible to know from Google Analytics if someone is using a specific setting or tool to adjust how a website is displayed.
However, there are some simple things you can do to help you find a number of issues. It might be helpful to test a light and dark colour scheme via the browser settings in Firefox and one of the ‘high contrast’ colour schemes in the Windows system settings at least in Edge.
The Website Content Accessibility Guidelines specify that users must be able to select foreground and background colours. It is therefore important to generally make sure a website is as flexible and adjustable as possible. One step to achieving that is to always style background and foreground together.
Some background colours can disappear when the overall colours are changed. This is especially troublesome when a border has been removed by a website from an element which usually has a border. Or when you give something a background colour which usually doesn't have any. You can use a transparent outline to let it re-appear in the general text colour only when colours are changed.
Carrying out more research
Because there is hardly any research out there about what is actually being used to change website colours and under which circumstances, we will add some questions around it into our next assistive technology survey. We published results of our last survey in November, so it will be a little while until we conduct the next one.
In the meantime, please tell us about your setup in the comments. Which of the methods do you use? Or do you know of a method we haven’t listed?
Which colours are you changing to? And do you encounter any specific problems on GOV.UK when you change your settings?