Tags:
create new tag
, view all tags
Please look over the two tables below, and decide which one (if either) has the more legible text in all cells. Pay particular attention to the white text on colored background versus the colored text on white and the black text on colored background.

In which table would you say that the white text on colored background versus the colored text on white and the black text on colored background are equally legible?

If you have time, try it on several browsers, and on both Linux and Windows. I'm using IE 5.5 on Windows, Konqueror 3.1 and Mozilla 1.3 on Linux (Mandrake 9.1).

Further remarks after the tables.

Aside: These tables have identical content and happen to represent the pinout for a straight thru Cat 5 RJ-45 connector, but I suggest you see Wikilearn.Cat5CablePinout if you want to install a connectorit shows both the straight thru and crossover pinout, and has links to other pages for reference.

Contents

Version 1

    Cable End     Color   Pair     Pin  
  White-Orange Pair 2 1
C Orange Pair 2 2
A White-Green Pair 3 3
B Blue Pair 1 4
L White-Blue Pair 1 5
E Green Pair 3 6
  White-Brown Pair 4 7
  Brown Pair 4 8

Version 2

    Cable End     Color   Pair     Pin  
  White-Orange Pair 2 1
C Orange Pair 2 2
A White-Green Pair 3 3
B Blue Pair 1 4
L White-Blue Pair 1 5
E Green Pair 3 6
  White-Brown Pair 4 7
  Brown Pair 4 8

Further Comments

For me:

  • the first version of the table is more legible, and
  • in the first version of the table, the white on color is about the same legibility as all other text, and this is true on Windows and Linux (and all three browsers I tried).

The surprising thing (to me at least) is that to get this equality in legibility, I had to make the white text on colored background bold, while all other text is not bold.

If many of us see the same thing, it means one of two things:

  • There is a characteristic of the eye that creates this "optical illusion"
  • There is something different about the way light text on a dark background is displayed versus dark text on a light background

For quite a while, I subscribed to the second possibility, and believed that maybe there was a bug in the way anti-aliased text was generated. I don't even know for sure whether i'm using anti-aliased text (although I would believe so), and whether the effect I'm noticing only occurs on anti-aliased text.

Aside: I normally use all my applications with black text on a white (or ivory) background. When text is highlighted (as in selected), the text (now light text on a dark background) has always appeared much less legible to me.

Now, on the other hand, this difference in legibility might occur only for me. But, if it occurs for others, I'd like to get the issue in front of more people, and see if the people at the right places can make appropriate changes in how light text on a dark background is displayed versus dark text on a light background. (In over simplified terms, maybe when light text is displayed on a dark background, it should be bolded — if it is normal or italic text, it becomes bold or bold italic, if it is already bolded something is done to make it bolder.)

Aside: If you use Mozilla, tell me what you see on the table row for pin 4. In my version of Mozilla, the second cell in the row is blank. It should show the word "Blue" in white text on a blue background, and does on all the other browsers I've tried. And the other day, at another computer (using IE 5.?), when I was experimenting with colors, when I put a blue color in that cell (the same as a blue color I was using elsewhere), it appeared green in that cell. Since then I've changed the color and thought I solved the problem, but something odd seems to be going on there, and I don't know what. Maybe it was just the particular machine I was on, but now, seeing the blank cell in Mozilla, I'm not as sure.

Oh, BTW, I should admit that I'm using a little trick to get the bold — instead of specifying bold as an attribute, I'm simply using th vs. td to mark the cells — it seems that is very effective at displaying bold or non-bold text. Is that the only practical effect of th vs. td? (I'm not real familiar with HTML).

-- RandyKramer - 14 May 2003

Using th and td over specifying the bold attribute directly relies on the default CSS of the user's browser and/or the CSS attached to the page. (That's a good thing over specifying the bold attribute directly, IMHO - assuming you're using the table for table-based data and not for HTML formatting chores, anyway.)

Also, check out the grayscale bookmarklet here: http://www.508compliant.com/tools.htm Since you're tweaking colors for legibility, you may want to consider more than a few of your users might be color blind.

To avoid the color dithering/mapping problem, pick colors only found in the the browser-safe 216 color palette.

-- TomKagan - 15 May 2003

Tom,

Thanks for your comments! The grayscale bookmarklet and those other tools are helpful — I think everything is readable, but some text a little grayer than other text. (Too bad they apparently only work on Microsoft / IE 5.5+.)

Out of curiosity, would you know where to find the default CSS for a user's browser — is it a .css file (on Linux)?

Re your last comment, do you think the problem I have with seeing light text on a dark background is due to a color dithering problem? I would not think so — white (#FFFFFF) and black (#000000) must surely be browser safe colors, and I see the problem with white text on a black background.

-- RandyKramer - 15 May 2003

The default stylesheet is built into some browsers. In others, it can be changed. http://w3.org has their recommendations for what the default should contain. But, depending on the browser/revision/operating system, your mileage may vary. The only way to guarantee stylesheet attributes are set a certain way is to set them (and hope the user doesn't just override them, anyway). Even if you do, you still have to allow for the "quirks" of different browser interpretations/implementations.

You are correct: Black and White are browser safe colors (Note to me: DOH!). While using the browser safe palette is a good idea whenever possible to avoid the dithering problem, after rereading your question, I now understand what you are asking.

Assuming your color choices in the above tables are all from the browser safe palette, the problem you are seeing is indeed an optical illusion as you originally conjectured. Studies have shown that the eye interprets dark text on a light background with greater contrast than the same pixel illumination pattern in a reverse color combination. As you discovered, you need to slightly increase the emphasis of the light text on a dark background to have the text perceived with the same contrast. The amount and method of emphasis to the text may vary a tiny bit, depending on the color combination/reverse color combination, to get it exactly right.

Since I goofed once already in my first answer, I decided I should take second look at your use of the td and th tags in your example. It now occurs to me that the th tag was meant to mark table header info and td was meant to mark table data. You may be able to change th tag attributes to work the way you want. However, it is probably a better idea just to set the attributes of the td tags to the way you need them for each cell of data.

If you are trying to use the default th tag attributes to avoid the extra HTML, you can better do that by setting style on each td tag or setting a good default on the tr tag and allowing the attributes to cascade to the td tag, then overriding only what is necessary. Please note that, depending on browser bugs, the attribute cascade from the tr tag to td/th tags may not work as you intended, either. But, you can't please everyone. smile

-- TomKagan - 16 May 2003

Thanks for the followup, Tom!

I knew I was cheating with the th and td tags, but it seemed to work for demonstration purposes on this page.

Hmm, so it is an optical illusion, and it depends on the colors. Darn, probably means there is no simple way to compensate. Still, getting more people to recognize the problem and think about ways to compensate will be on my list of windmills.

-- RandyKramer - 16 May 2003

Just a note (to myself?): I happened upon this page again today, and, viewing it in IE 6 I don't have nearly the difficulty reading the unemphasized (not bold) white text on the colored background that I did previously. Maybe different default fonts?

-- RandyKramer - 21 Nov 2003

Edit | Attach | Watch | Print version | History: r8 < r7 < r6 < r5 < r4 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r8 - 2005-02-14 - CrawfordCurrie
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.