SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30

Thread: white / black

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)

    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.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    When I did some research a while back on legibility, I would this guide really helpful:

    http://www.lighthouse.org/accessibil...g-text-legible
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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).

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I can't help but think it's not obvious at all, everyone does it.
    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.

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Maybe the dictionary in the UK is special but there's no benefit in arguing about words.

    Thanks for your input,

  11. #11
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.
    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!
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Maybe the dictionary in the UK is special but there's no benefit in arguing about words.
    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.

  13. #13
    SitePoint Member
    Join Date
    Mar 2010
    Location
    Austin, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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.
    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.

  15. #15
    SitePoint Wizard Anat's Avatar
    Join Date
    Oct 2000
    Posts
    1,281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    My Web Publishing Blog: B6S.net - I dofollow but don't spam!
    Follow me on Twitter
    My favorite content writer:
    Steve Snedeker

  16. #16
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

    Quote Originally Posted by Raphaelle View Post
    Do any of you use tools to analyse the contrast and colours of your pages?
    Yes, but I find it very depressing!

    Quote Originally Posted by Anat View Post
    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.
    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.

    Quote Originally Posted by markbrown4 View Post
    One thing they do is give color tinted lenses to students which prevents the issue.
    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.

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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 : )

  19. #19
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,433
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    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

  20. #20
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I know there's nothing very scientific about this comment, but... Microsoft Word used to have an option for using a blue background with white text. It may still exist - not sure. I always turned it on as it seemed easier on the eyes.
    TAKE A WALK OUTSIDE YOUR MIND.

  21. #21
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,433
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    For a while I used to use black on light blue for my test HTML pages. Because it was easier on the eyes, but mostly because the color code was #badbee
    Easy to remember and it suited my somewhat quirky sense of humor.

  22. #22
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Raphaelle: If you want a color blindness simulator the following tool is MUCH better than the VisCheck tool Stomme posted: http://colorfilter.wickline.org/

    It checks against 3 color deficiency problems and 2 monochrome deficiency problems which the VisCheck agent doesn't even bother about

    Total filters: Protanopia, Deutanopia, Tritanopia, Achromatopsia, Atypical Achromatopsia, Protanomaly, Deutanomaly, Tritanomaly.

  23. #23
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,433
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Thanks for posting that link. It sure does make the design look different. But it's still readable and acceptable, just different. It's a relief to know that it still works for (at least what was tested for) color blind visitors.

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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/lumi...trastratio.php

  25. #25
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Alex for the link, I hadn't come across that one before.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •