SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    White-on-black or black-on-white text for dark site design?

    I'm trying to decide on my site layout and think it will be something along a dark, modern and sophisticated design such as this this and this example to name a few.

    However, as my site will contain a lot of text I'm wondering if it'll be a mistake to have people read light gray/white text on a black/darkish background or if I should just stick to the traditional paper like format of black text on a white background? I have a feeling that the latter is a better solution, but I also believe the high contrast of a white text area breaks the design. What's the general concensus on text color/background?

  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)
    Of the three sites you posted, only the second one has adequate contrast. The first and last have extremely poor contrast with dark grey text on a dark background, so in terms of accessibility, they do fail.

    This topic has come up a few times in this forum and elsewhere, and the consensus always is that a large percentage of users prefer dark text on a white background and a few say they can better read when the text is light and the background dark.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    combination depends largely on site niche and content.
    if you have less text content, more of images white on black might work well. and vice versa.
    i have done some sites in both ways, they come out pretty good IMO.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It shouldn't make a difference for most people. The biggest issue with readability is contrast, so whether you have black-on-white or white-on-black, you're good.

    Some people say dark text on a light background is easier to read, which might have something to do with the fact that books have worked that way for hundreds of years.

    However, then there's the issue of light backgrounds being hard on the eyes. I don't know about you, but when I open a new tab with all the lights off, I'm immediately blinded by a white screen. This isn't an issue with books because they don't have backlights.

    The contrast is high enough either way. It's more about image, honestly. Dark backgrounds can look less professional and more 'edgy'. Lighter backgrounds represent professionalism, openness, and positivity. That's why most sites that represent a cause or organization have a light background with dark text. This includes websites about 'going green', which is ironic considering a site with a black background would use less energy.

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you'll find that if you present 12pt text on both white on black and vice versa - I think you'll find that what on black is harder to read and you have to increase the size and thickness of your text to improve readability. Whilst kohoutek said the second site is the only one with high enough contrast in terms of accessibility, I would say it's contrast is too high to be comfortably read. So there's a midpoint you have to achieve.

    In general I would use a light background for a primarily text based website and dark background for media. One dark website that reads well for text is http://daringfireball.net/ - it uses a grey rather than a jet black which makes things more comfortable to read. I'm not sure how it does on the contrast test.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    I've always found this free tool invaluable for checking that colour combinations have sufficient contrast.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


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
  •