Legibility of gray text on white background

Accessibility
1

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

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

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.

4

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

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

I would avoid grey on white for text. From my experience, people find it hard to read especially those who wear glasses.

7

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

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

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

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

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

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.

13

Legibility is not the goal.

14

Well, it should be…

15

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

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.

:smiley:

17

Really? He hated ze fontzes?

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

18

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.3R + 0.59G + 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.2126R + 0.7152G + 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

a useful interactive colour scheme designer

20

My favourite handy tool - dead simple to use. http://www.visionaustralia.org.au/info.aspx?page=628