> On the web > Background and foreground colours: questioning an old rule

Background and foreground colours: questioning an old rule

About this article

An article by Stéphane

Published on 18 November 2014

Short URL:


Is the accessibility rule regarding the necessity to provide foreground and background colours still holding water? Emmanuel asks.

This article is translated from Couleur de fond et couleur de texte by Emmanuel Clement (in French), and I (Stephane) translated it to broaden the discussion towards the english-speaking community.

A discussion on Twitter (in French) with @nhoizey, @notabene, @fvsch, @htmlvv (which is enough people already), about background colours that some web developers forget to write.

Don’t forget to define foreground and background colours in your CSS, otherwise I see this:

I’m wondering about the importance of this accessibility point today, in 2014.

Let me mention that this point is old news to me, and that of course I find it normal: yet it won’t prevent me from questioning it again.

Let me remind you: an accessibility principle, regarding colours, consists in providing a foreground/background combination that is contrasted enough for readability. Most browsers have an option to change those two colours in their preferences (most of the time the default is black text on a white background: I don’t know of any other default, do you?).

If a designer has forgotten to specify the background colour in their stylesheet and the user has modified the background colour in their preferences, the page can become unreadeable.

I like how contrast ratio in WCAG 2.0 is formulated:

Note 4: Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user’s default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified.

OK, if we stick to it, no need to wonder any further: we set a background colour and a foreground colour —or none at all, and the browser preferences will do their job.

However, for many years now, browsers have not had a middle-grey background by default. The last time I remember seeing it was in the late Netscape 4.7. I even wonder whether Netscape 6 still had a grey background, ack in the days. The “browser grey” reason doesn’t hold anymore.

What doesn’t hold either —I think— is that this historical best practice does not take into account the current ecosystem. All browsers feature extensions, some of which can manipulate colours. Take Firefox, for example: Color that site or Colorific. I’m not even mentionning accessibility-specific toolbars.

What I’m wondering about is this: I would want to know if a user who really needs to changes their browser’s colours (a savvy user, as they have to know about these settings in their preferences) will simply change background/foreground colours, like in 1998? Or will they look for extensions or more elaborate mechanisms, like in 2014?

And practically, since the “average user” doesn’t exist, tell me of real people who have this specific contrast need and who solve it solely via their browser’s preference. Really, sincerely, I am curious and would be eager to exchange with them.

In the meantime, of course I will keep on providing a complete set of colour rules smile

Emmanuel hopes for comments to help him understand the relevance of this point.


    • 24 November 2014

    It’s not only a question of contrast, it’s also a question of people needing to change the background or the foreground color for some reasons. Some people need hight contrast mode or may need to remove a specific color (some people can’t tolerate white background) that’s why you still need to apply this otherwise people can end up with black text on black background for example

    Reply to goetsu

    • 24 November 2014

    Nice read.

    Unless we get some figures on how people achieve or use this setting, I think it is best to declare both. It’s not like background: #fff; is a whole lot to type.

    Safari 8 on OS X 10.10 doesn’t even offer a user friendly way to change either of these settings. The only option is to define a user stylesheet. So you’d have to be familiar with CSS to change anything.

    Firefox 33 does offer these settings. They even offer you to disable websites from overwriting your preference.

    Even with the build-in search, I was unable to find these settings in Chrome 38.

    Reply to Michiel Bijl

    • 24 November 2014

    goetsu : Yes, but the question is: have you met someone who would benefit from this rule and who don’t set colours system-wide? (and when it’s system-wide, it does apply to front and background notwithstanding what we declare in our CSS)

    I haven’t met someone in this situation so far, so Emmanuel’s question seemed interesting.

    Reply to Stéphane

Who are you?
Your post
  • To create paragraphs, simply leave blank lines. All outgoing links will feature an attribute rel="nofollow". Please do not spam.

This is the Desktop version Show the Mobile version