What’s the Point of Browser Colour Settings?

Many browsers include user preferences to select preferred colours for text, backgrounds and links. This is intended as an accessibility feature so that people with limited vision, dyslexia or other disabilities can choose a colour scheme that makes it easier for them to read web pages. In theory it’s a great idea. In practice however it seems to be nearly useless.

There are two “modes” these colour preferences can be used in:

1. As preferences that web sites can override.
2. As forced settings, where website specified colours and background images are completely ignored.

Preference Mode

In the first case, there are a vast number of sites which become unusable because they specify a specific background colour without also specifying a foreground colour. So if you happen to set your preferences to have light coloured text on a black background, then try to log into Google you get:

Choosing white text on a black background would make half the text on the internet disappear.

Clearly this is poorly coded websites causing accessibility programs and they should get with the program and specify foreground and background colours in pairs. Which of course makes that dialog box look like:

Much better. Except now there is no sign that I ever changed my browser preferences rendering them completely useless. So now designers have a choice between respecting browser preferences or largely designing a black and white site.

The net result is that changing your browser colour preferences will have no effect on well coded sites and break a large number of sites. So why bother?

Forced Mode

So we’re left with forcing our preferred colours on web sites. This actually gives us high contrast and is most likely very useful for people with limited visibility. However, for people with dyslexia who wanted more readable colours1{#footlink1:1292840774264.footnote} rather than just high contrast now tend to struggle because so much visual context is lost from the page. Sure, on a well coded site all the information is there, but different background colours is a really useful indicator for the various sections. That extra context and readability is now lost. That’s a disaster for someone with good vision who was trying to make the page more readable.

Compare the very well coded BBC website with preferred colours vs with forced colours.

It’s important to note that the BBC website is actually quite well coded – all the information is still available when you force the preferred colours, the designers simply have a significantly reduced ability to provide context and delineation, so inevitably the page becomes harder to read.

What to do About it?

Frankly, I have very little idea. The never properly implemented and now deprecated CSS system colours would have helped a lot in some cases. Design heavy websites would have still wanted their own colour set but web applications could have at least used them. Perhaps some way to specify a colour along with a fallback system colour could have worked. Then in the forced colour mode, the system colours would be used.

Beyond that it would be really nice if browsers were smarter about the options they provide. Instead of just a default colour setting, have a minimum contrast setting – the browser automatically increases the contrast between background and foreground colours to a specified point. Then you could combine that with a preference that text is always blue – if the website specifies black text on a white background it comes out blue text on a white background. If it’s white on black then it comes out as blue on suitably contrasting gray.

I don’t doubt that there are huge challenges here and I certainly can’t suggest the answers, but it seems like it’s about time we started putting pressure on user agents to do more to support accessibility rather than expecting website designers to do the impossible and create great designs that work with such limited accessibility tools.

1 – blue on white is actually much more readable than black on white ↩