White / black

Hi,

My mother works in a reading recovery program in primary schools and I was interested to learn that black text on a white background can be very hard to look at and read for some with reading difficulties. It can actually make it look like the letters are moving around on the page.

One thing they do is give color tinted lenses to students which prevents the issue.
I found it interesting that complete white on black is the most common contrast for reading on the web.

I’ve also been reading Mind Hacks recently and getting more of an understanding of how we process shading and understand depth as we always see light coming from above. White also draws the eyes attention first.

With all of that in mind I’m leaning towards never using complete white as the background.
If I want a section of a page to stand out or be looked at first a white background is a good way to do it, but a complete page of white is a no no.

It’s also interesting that the high contrast styles applied to many sites for accessibility may actually be very inaccessible because of this issue. Perhaps a more accessible High Contrast stylesheet would have a slight yellow/red colour tinted background with black text. I showed mum Dan Cederholm’s site http://simplebits.com/ and she said it would be a much more legible contrast to use.

Yeah, the link Alex posted is in the usability sticky but not (currently) in the accessibility sticky (we should have a tools section). Also, Gez Lemon’s got a Luminosity/contrast check where you can just type in two colours: http://juicystudio.com/services/luminositycontrastratio.php

I never use white or black as background for the very reasons you have mentioned.

Tommy’s site had perfect contrast. The old Zeldman website did a perfect job with contrast as well (something the new design doesn’t).

456bereastreet is one page that I find very soothing. The colour contrast is spot on.

Some people with dyslexia (and some other non dyslexics) suffer from ‘scotopic sensitivity’ (otherwise known as Meares-Irlen Syndrome) that means that they find high contrasts difficult to read, such as black on white. This can cause visual effects such as rivers of white space – I don’t have that problem myself. Also it is good to avoid green and red/pink combinations as these are can cause confusion for colour-blind users.

Typically with VDU it can be the “luminosity” (or bad settings) rather than the colours themselves.

When I did some research a while back on legibility, I would this guide really helpful:

http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible

Interestingly enough I’ve read a lot of research on the use of color contrasts in accessibility. Talking to a wide range of people with vision deformities of various scaling levels you might be surprised to know that yellow text on a black background or red text on a white background have been shown to be the easiest to read. Black on white is obviously a bad idea (same in reverse) but the contrast of yellow on black provides a luminescence which allows most people to detract from the darker background and avoids the high contrast issue mentioned earlier (for dyslexics), with the red on white the softer color (rather than black) provides just enough softening on the contrast to make it more soothing to read. Of course this is mainly aimed at those needing a very strong contrast due to having an exceptionally poor level of vision, but it’s certainly a strong way of ensuring that your content is visible to a wide range of people. :slight_smile:

Thanks for all your thoughts on this,

Black on white is obviously a bad idea

I can’t help but think it’s not obvious at all, everyone does it.

A lot of sites use a white background and a dark gray font color. On my personal programs, I always change the background to aliceblue (#f0f8ff), which I find very easy on my creaky and nearsighted eyes; sometimes I use this in designs, also. I agree, Roger’s 456 Berea St site uses excellent contrast, though I’m not fond of that pale yellow background.

I can’t help but think it’s not obvious at all, everyone does it.

Because we’re all told to have minimum contrast, and “the more the better”.

However the zeldman article about “underwear showing” (when people don’t set a background colour for the body) mentions the issue where too much contrast is equally hard to read (and it talks about what xhtml coder mentioned but without naming it… and some people in the comments link to dyslexia info pages too).

It is obvious if you take the time to learn color theory (the psychology of color), general design conventions and accessibility design. Writing HTML isn’t obvious to the general newbie (and the amount of garbage code out there shows it), it’s just about being educated in areas of web design which affect your audience. Remember that web design isn’t all about writing code or about W3C specifications, there’s a lot of theoretical knowledge too… it’s an art as well as a science. :slight_smile:

Maybe the dictionary in the UK is special :slight_smile: but there’s no benefit in arguing about words.

Thanks for your input,

I started using dark grey on white awhile ago, partly for this reason but also because aesthetically I just like it better.

It’s also interesting that the high contrast styles applied to many sites for accessibility may actually be very inaccessible because of this issue. Perhaps a more accessible High Contrast stylesheet would have a slight yellow/red colour tinted background with black text.

I know the betsie stylesheet used to be yellow on blue, which sort of toned down the extremes somewhat. Joe Clark wrote about a thing called a ‘zoom layout,’ which combines a reduced contrast, dark background style with modified navigation. Worth checking out!

Not sure what a dictionary has to-do with it. I was just saying that as I’ve trained myself in accessibility and the user experience, it’s obvious to me. I understand perfectly why it wouldn’t be to others if they don’t have the pre-existing knowledge to notice or deduct what might or might not be a good idea. :slight_smile:

You’re right, Alex. In teaching people to create accessible documents, slide shows, and Web pages, I point out to them that the idea of contrast isn’t to max it out, but to achieve sufficient contrast. So make sure you meet or exceed the minimum values, but don’t shoot for super-high levels of contrast.

Unfortunately, that point of view does not come from reading the Web Content Accessibility Guidelines. It comes from talking with people who have trouble reading websites built by designers who, in pursuing sufficient contrast, achieved high contrast.

Avoiding too much contrast isn’t obvious, but it needs to be.

Nevermind, I was just referring to the use of ‘obvious’ which means something is ‘easily seen, recognized, or understood; open to view or knowledge; evident’
No doubt if you’ve studied it as you have you understand the issue - it’s just not obvious to many.
It wasn’t obvious to me at least before I heard about the issue. I assumed black on white would be the most legible.

Seems like it’s quite the consensus in this thread, but if you look at the top sites on the internet, such as YouTube, Yahoo, Facebook and of course Google itself, they all use black on white.

How many people in the general population actually have a real difficulty with black on white? judging by the mega-sites, not too many.

Do any of you use tools to analyse the contrast and colours of your pages?

I know there are a few desktop applications for that and websites like checkmycolours.

I haven’t used any of the desktop apps but when once in a while I use checkmycolours I come across at least 1 or 2 erros I wouldn’t have suspected.

I can’t stand white (or light) text on dark background (on screens, anyway). My eyes go all funny and I can’t see properly for about 5 minutes afterwards. So I avoid sites that use that horrible technique.

Yes, but I find it very depressing!

Or gray on white. As others have said, lightening the text helps a lot, but I do agree that a completely white background is a bit harsh.

As an aside, I was a primary teacher for ten years in Melbourne, and one popular approach to helping with dyslexia was to print reading material on blue paper rather than white. I tried it on children with dyslexia but didn’t find it useful. I did some research on it and found that studies have found no evidence that it works at all. It’s considered an urban myth.

Do any of you use tools to analyse the contrast and colours of your pages?

GrayBit.com for contrast, though it doesn’t load everything on the page… I tested Paul O’B’s page with it and the fixed sidebar never showed up.

Vischeck.com for testing 3 types of colourblindness.

Seems like it’s quite the consensus in this thread, but if you look at the top sites on the internet, such as YouTube, Yahoo, Facebook and of course Google itself, they all use black on white.

They also tend to require Javascript even for simple things like logins and links (anchors), use inline css and Javascript, divitis, classitis, and a variety of other things not necessarily kosher with web standards. They do it because not enough people have bothered to b*tch at them, because believe me, if enough people did, they would respond. They want as many users as possible.

I can’t stand white (or light) text on dark background (on screens, anyway). My eyes go all funny and I can’t see properly for about 5 minutes afterwards. So I avoid sites that use that horrible technique.
Man, you’d hate being a Unix sysadmin : )

I think the black on white is a result a “paper copy” mentality carried over to media. Yet accountants have green paper and legal pads are yellow. Although I guess that’s to help cut down on snow blindness caused by hours of close work to glaring white paper.

Screens are luminescent, so I’d think glare would be a major problem and that white on black would be optimal. But I have a hard time with sites like:

although in small doses like

I have no problem with light on dark. Nor do I have any problem with command line white/green on black. I guess it’s because I’m usually only looking at the cursor position and not scanning the screen.

I found the white background for my site was too too much, and decided to use a complimentary shade of green. After a while I decided my first choice didn’t provide enough contrast so I lightened it up to this:

But now that I think about color blindness, maybe green wasn’t such a good idea either :frowning: