When I read large chunks of text, I tend to select portions of it—paragraphs, lines—as a reading aid. I don’t imagine I’m alone in this. So why do people, using flat colour images as a background, forget to set a background colour that reflects the image colour?
Two examples—picked because I read them, not because of their prominence or otherwise—are Snook and Binary Bonsai. These are two good-looking sites, designed by people who really know what they’re doing. And yet, when I try to select some text on either of them, this is what I see:
And here’s what I ought to see:
Bear in mind that this was done with one simple style rule; implementing it across the whole site would be more complex, but not very. Jonathan knows what he’s doing—this is just a simple mistake, very easy to make. However, it has a real impact on the site’s usability, making it harder to read even for people who are in no way visually impaired. Over at Binary Bonsai, we find the same story:
How it ought to look:
Reading and writing is what we’re all here to do, and we have to strive to make it easy. There may be plenty of people who don’t read in this fashion, but there are enough people who do to make it worth the five minutes or so it takes to fix the issue. We’re always talking about web standards and accessibility; this is a real example of something important we should all be ensuring we don’t forget.
Update, 2.11.05
From the comments it looks like this isn’t a problem on OS X (both in Safari and Firefox), which raises the question of why that might be. So far I’ve tested this effect in Firefox on Windows XP, which does have the problem, and Opera (again on XP), which doesn’t. Since Jonathan’s now fixed this on his site, and Internet Explorer really doesn’t like Binary Bonsai, I’m slightly at a loss as to how to test this further.
If you’re running Firefox on XP, please check out the dark version of ‘Invader’ on Binary Bonsai, and let me know if you experience the problem I detailed above. Even if this is only restricted to Firefox on XP, I would stand by my above points—when I last checked, people with that browser and OS configuration accounted for 60% of my visitors.
13 responses
Comments feed for this article
Fixed. :)
First, it’s funny because I do the same thing and select parts of the page as I read. I know a few geeks that seem to do the same. Some neurotic thing, I suppose.
Second, I’m always perturbed when other sites don’t specify a background-color and there I go making the same mistake on my site! Probably because I don’t read my own site in the same way I do other sites.
Jonathan Snook December 2nd, 2005
In Safari and other osx browsers, this doesn’t seem to apply. I’m not even entirely sure what you’re talking about. ;(
eric December 2nd, 2005
The reason I’m not setting the background on my text, is to make it as easy as possible for myself to change the style of the site.
That said, this certainly doesn’t seem to be an OS X problem, as I’ve tested in both Safari and Firefox on OS X, and it works fine. What browser are these screenshots from?
PS: Where’s my link ;)
Michael Heilemann December 2nd, 2005
Firefox on Windows XP, although I had the same problem with Internet Explorer. Having briefly glanced at the CSS spec, this is what I found:
What appears to be the problem is that Windows lets the browser do the heavy lifting as far as selecting text goes, and the browser is just following the specification–applying the rules for which background colour to use, correctly, and then varying how selections of chunks of text appear based on that rather than on the actual colour of the text’s background, no matter how it’s created. OS X on the other hand is determining the background colour somehow and varying the how the selection appears based on that. I’m not totally sure this theory’s right, but it would account for the Firefox discrepancy between Windows and OS X…
ionfish December 2nd, 2005
That’s odd, because I see exactly what you say should be seen on both sites. I don’t get your result at all.
Dave December 2nd, 2005
Well, in the case of Jonathan’s site that would be because he fixed it; what browser and operating system are you using?
ionfish December 2nd, 2005
The text highlights according to your “should be” example for me on both sites, using Windows XP and Opera 8.5.
Moe December 2nd, 2005
When I first looked at it, it was in IE6 on Windows XP (what I’m supposed to be using at work).
But I also just looked at it in FF 1.0.6 and still didn’t get the problem on Binary Bonsai.
(BTW
Dave December 2nd, 2005
And that’s on the dark version? Obviously it won’t be a problem on the lighter skins, because the
body’s light background colour will mean that the selection is set to a dark background and white text, rather than the other way round.ionfish December 2nd, 2005
I’m surprised someone actually came out and mentioned this, but it’s something that has been driving me nuts for some time. I figured that it was a styling issue, but being tied up with other things, I pretty much resigned myself to the fact that I was going to have to deal with it and move on.
The dark vs. light background explanation is clearly the answer here, but this is, of course, intrinsically tied to other variables like the browser’s rendering platform.
Don’t let it happen to your site! And if it is, fix it up, cause I’m a selectin’ mofo when it comes to readin on the net.
Chris P. December 3rd, 2005
You should be a selectin’ mofo when it comes to choosing an OS instead ;)
(sorry, couldn’t help it). Merry Christmas! :D
Michael Heilemann December 3rd, 2005
There’s actually a CSS3 selector which lets you set the colour and background colour of selected text. Only Safari, as far as I know, has implemented it fully. I doubt we’ll see it in IE for years to come, though.
Paul D December 3rd, 2005
Well, the thing about OS X in general is that selected text is always the color you chose in the system appearance preferences (except, apparently, with the CSS3 selector Paul mentions). If you chose light blue, then every site on the planet is selected with a light blue foreground. That’s right, not background. Here’s an example (ion, I hope to god you allow images, cause you don’t do preview ;P ):
eric December 3rd, 2005