SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Legibility of gray text on white background

    I am designing my first Wordpress theme and I was wondering about how readable gray text on white background is. At the moment I'm using #555 text on #fff background. The only clear suggestions I've found were on w3.org site (the WCAG 2.0 guidelines). They state the following:

    Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
    and
    Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1
    #555 on #fff apparently is 7.5:1, which is even over the guidelines. I'm wondering what the experts think about this though, since I notice most websites are using #000 to #333.

    The thing is, I find #000 on #fff rather harsh on the eyes (might have something to do with my outdated, 6 year old LCD monitor) and the gray text looks much better to me, but perhaps it's not as readable when we're talking about longer articles.

    What is the "brightest" text color you would choose for an #fff background? Do you think #555 text is too much?

  2. #2
    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)
    It can also depend upon the size of the font in question and maybe it's the choice of colours. Yes, black on white isn't always the best if your luminance is wrong on your monitor. Maybe a subtitle off-white background image or colour might help rather than lowering the font outline to a washed-out grey.

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Info take a look at: Juicy Studio: Colour Contrast Analyser
    This says your choice is fine, I would have to agree. However it also sort of depends on what the other parts of the page are. For example, I assume the white is a wrapping type container, but if the main background is really bright, it could hurt eyes.
    Ryan B | My Blog | Twitter

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by infomancer View Post
    I am designing my first Wordpress theme and I was wondering about how readable gray text on white background is. At the moment I'm using #555 text on #fff background. The only clear suggestions I've found were on w3.org site (the WCAG 2.0 guidelines). They state the following:


    and

    #555 on #fff apparently is 7.5:1, which is even over the guidelines. I'm wondering what the experts think about this though, since I notice most websites are using #000 to #333.

    The thing is, I find #000 on #fff rather harsh on the eyes (might have something to do with my outdated, 6 year old LCD monitor) and the gray text looks much better to me, but perhaps it's not as readable when we're talking about longer articles.

    What is the "brightest" text color you would choose for an #fff background? Do you think #555 text is too much?
    Usability and accessibility best practice is to avoid using #000 on #fff because the contrast is too stark, and it can exacerbate certain conditions such as dyslexia. At the same time, if you soften the colours too much then you'll cause problems for people with weak eyesight. I have excellent vision but I find that sites that only just meet the WCAG guidelines are not only slightly harder to read, but look noticeably pale and washed out. Unless you're deliberately going for an arty look over legibility, I'd say that's a poor choice.

    Usually I'd go for something around #222, which is dark enough that it looks near enough black - nobody can complain about it being too pale - but at the same time soft enough that it shouldn't cause any problems with glare. Ideally, your design choice shouldn't be noticeable - if people look at it and think "Hey, he's used grey text" then you've overdone it.

  5. #5
    SitePoint Enthusiast Acmeous's Avatar
    Join Date
    Oct 2008
    Location
    Kolkata, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right to say that #000 of #fff look harsh to the eyes, though its a kind of recommendation from W3C or WAI. Also the color contrast analyzer comes into play only when the foreground has sufficient surface area also. If you text is much small then it is better to put them #000 on #fff. But if you are talking about big paragraphs or the base color of the text throughout the site, then my recommendation is always the area between #000 and #555, i.e. #333. That's why #333 has now become a standard .

  6. #6
    SitePoint Enthusiast Chronister's Avatar
    Join Date
    Dec 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would avoid grey on white for text. From my experience, people find it hard to read especially those who wear glasses.

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chronister View Post
    I would avoid grey on white for text. From my experience, people find it hard to read especially those who wear glasses.
    How are you finding this site? Yup, that's right, SPF uses grey on white. The text you're reading right now is #333. But it doesn't look noticeably grey. That's what I meant by your design choice not being obvious. You soften the shade just enough that it reduces the contrast but not so much that people realise what you've done (unless they're really looking closely for it).

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, everyone. This gives me a lot of ideas. For now, I've changed #555 text to #444. I hope most of my visitors will find this acceptable.

    In the future I'll think about changing the main background to something gray and leaving the text content background white. Right now both of them are white, I guess that could cause some problems like rguy84 said.

  9. #9
    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)
    Also the color contrast analyzer comes into play only when the foreground has sufficient surface area also.
    True though I use the toolbar rguy84 mentioned and it does mention that something that fails at small text might pass with larger text. Though it doesn't say how small or large.
    I generally take it to mean "headers vs body text" personally. I can get away with weirder colours in headers simply because they are larger, thicker letters.

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I keep hearing these absurd claims that gray is better, but I find it illegible and harder to read. I think the real problem is many people are going with CMS defaults, and the default is a rather light or medium gray that really is hard to read. I have no idea why the herd mentality in designing sites that are hard to read. Yes, pure black on pure white might be bad, but there seem to be a Lot more complaints about gray. You could use a dark charcoal gray with white, or use black on an off-white bg.

    But I think a lot of people are, for some insane reason, going with a less legible design because the powers have so decreed ;')

  11. #11
    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 have no idea why the herd mentality in designing sites that are hard to read.
    I know why: Designers. Tiny, washed-out text "looks professional" to graphic designers, marketers, and bosses. Guess who has the power over how a web site looks and works? Yup, those people.

    Large, readable text looks childlike to bosses, ugly to designers and when they are things like utility menus in the footer linking to unsavories like Terms And Conditions, scary to marketers (they don't want to scare customers away).

    The UX folks need to beef up their control of web design, and get the 33"-CineMac designers either more out of the way, or forced to become one of Them (UX people).

  12. #12
    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)
    Why do people insist on grey text on a white background? In terms of legibility, black text on an off-white background is significantly more readable.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  13. #13
    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)
    Legibility is not the goal.

  14. #14
    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)
    Well, it should be...
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  15. #15
    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)
    Well, it should be...
    And there shouldn't be pollution or war either. People should stop at stop signs and use their blinkers. Everyone should get pie. And?

  16. #16
    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)
    Well, as long as we agree that people who disregard legibility on the web are in the same category as those who make war and such. Like Hitler. Actually, they're worse than Hitler. At least Hitler wanted to get rid of the fairly illegible Franktur typefaces prevalant in Germany in the thirties and fourties.

    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  17. #17
    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)
    Really? He hated ze fontzes?

    That's prolly the best Godwin I've ever seen. Props.

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I hate the WCAG's formula and ratios just because it's needlessly complex and pointless and could be done a million times simpler using luminance, which is what I use... the formula from the usability guidelines Apple, M$ and IBM got together and wrote circa the move to color at the end of the 80's. (windows 2/OS 2/MacOS 4 era)

    L = 0.3*R + 0.59*G + 0.11*B

    Which is the PROPER luminance calculation for projected light as found in the old usability guides; is hardware encoded into all VGA adapters, and can be found in books like Ferrara's "Programmers guide to the EGA/VGA cards"

    Also this is another place photoshop sucks since it uses the reflective formula for luminance instead (Y = 0.2126*R + 0.7152*G + 0.0722*B which is actually meaningless outside a CMY colorspace as it overemphasizes green)

    Using the proper formula for displays I consider 50% difference the minimum and 75% or higher the ideal. side effect of this formula is the color blind will never have issues with the results either.

    For example, #555 is 85,85,85, so that's 85... white is 255... so that's 66%, entirely acceptable. Let's plug in a color combination we know sucks, true red (255,0,0) on true blue (0,0,255)...

    255,0,0 = 76.5 == 30%
    0,0,255 = 28.05 == 11%

    Difference of only 19% across the spectrum means effectively illegible. How about the green and magenta which give the color blind fits?

    0,255,0 = 59%
    255,0,255 = 41%

    well that's a no brainer at only 8% difference.

    It's so much simpler to just say "take your two colors, take 30% of the red, 59% of the green, 11% of the blue, add them together, and if the values for the two colors are less than 50%, it's illegible, and if it's less than 75% it could be problematic" than the convoluted mess the W3C tried to foist on us.

  19. #19
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,354
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    My favourite handy tool - dead simple to use. http://www.visionaustralia.org.au/info.aspx?page=628


Tags for this Thread

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
  •