Accessibility Tripwire – Beware Defaults

Where it starts

The problem stems from the fact that both Windows and Linux, and I’ll assume Macs based on the screen-shots I’ve seen, ship with the default color scheme set to black text on white and light-gray background. We’ve grown used to seeing these colors. Most business sites use white backgrounds, and black backgrounds have generally been “out”, even in hobby sites, for several years.

Many style sheets start the same way:

* { margin:0; padding:0; }
body { background:#fff; }

As we all know, the above code will produce a white background and black text on most computers.

Only… We aren’t really getting black text. What we’re getting is the equivalent to text “Automatic”, which you may have seen in Office type programs or HTML email editors. We’re relying on the default color to be what we expect and assume it should be. Which we, especially those of us that incessantly ponder on accessibility, should know is often not the case.

Though not quite as often, I sometimes see just the font color specified, and even less often neither color is specified. Many times leaving both to chance is not a problem, as I prefer to read lighter text on a dark background and this is what I’ll get. With the use of background images being so common, however, leaving both colors unspecified can be just as unfriendly.

Setting it up

I’d imagine that most web developers are a bit more “tech savvy” than our average users, and may have learned their operating system, to some extent anyway, by playing around with it. If you Windows users, like me, remember playing with your first computer, you’ll likely remember changing the color scheme. Right click on your desktop then choose Properties, and select the Appearance tab.

In the left top-most drop-down menu, you will see a list of color schemes. Included in these color schemes are twelve labeled “High Contrast”. Of these twelve, nine use white, yellow, or green text on a black background.

These can be very useful to people with low vision or sensitive eyes, as I’m sure many of you who have set up alternate high contrast color schemes for your websites already know. I use a similar color scheme every day.

When I wake up at 4:00 AM the brightness of my monitor can be a bit shocking, and more than a bit uncomfortable, as can a white background during a 14 hour coding session.

A computer monitor displays colors in what is referred to as an Additive Color Process. When the colors are added they get lighter. In order to get white, all colors are at full strength and more light is produced from the monitor, essentially we’re staring into a lamp.

While a high contrast color scheme isn’t really a necessity for me, it does greatly improve the overall comfort of my computer use. Others aren’t so fortunate, and many rely on alternate color schemes to get by.

The other setting

If someone uses a high contrast scheme it’s reasonable to assume that they might also set their browser to “use system defaults” if that option is available. This is what actually allows this problem to manifest.

Now, these settings don’t cause any problems on their own. When a website specifies its colors my browser displays them just fine, when none are specified, such as in many “readme” files created with HTML, I get my preferred combination.

The trouble starts when one color is specified, but the other is not. I regularly find websites where I see white on white or black on black for the text and background. The most immediate way to make the text readable is to highlight it, which will change the colors, but finding where the text begins and ends can be difficult.

That’s Your Problem

I can almost hear the replies already; “If the user makes that choice, they should have to deal with it“. To a certain point I agree, however, let me quote the Web Content Accessibility Guidelines:

Checkpoints: 2.2 Ensure that foreground and background color combination provides sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].

Now, it could be argued that I don’t have a color deficit, or that I’m not viewing the site with a black and white screen so this “rule” does not apply, but the checkpoint says that a designer is to “Ensure that foreground and background color combination provides sufficient contrast”. If you haven’t even set the color, you haven’t ensured anything.

Placing the blame on one side or the other doesn’t help anyone. It’s more important to make sure that as many visitors as possible have access to your information.

Considering the many configurations that people use to access our websites is part of what makes accessibility such an intriguing subject. We should all strive to do whatever it takes to make their visits as easy and productive as possible.

Test It!

You can test for this issue by adjusting the preferences in your browser (IE and FF for PC). This adjustment will allow you to keep your normal defaults, and provide a quick way to switch to the test settings, by setting the preferences to be the opposite of what I described above.

FireFox

In FireFox, go to Tools then Options and select the Content tab. Click on the Color button. In the color options choose white for the text and black for the background.

The “Use System Colors” check-box can be used to turn this behavior on and off. When the box is checked you’ll get black text on a white background, if this is what your system uses. Unchecking the box will allow the colors set here to show if none are set on the website.

Internet Explorer

In Internet Explorer you would go to Tools then Internet Options, and choose the General tab. On the bottom left will be the Colors button. Choose your colors as above and use the check-box to enable, or disable, the alternate colors.

It should take you just a couple of minutes to see if your style sheets are bulletproof or not.

Paying more attention to the warnings when validating your CSS files can help point out where a this problem may appear.

How Common is it?

To show that this inconsistency can appear where we’d normally least expect it; here are a few websites that I have difficulty with.

All have been contacted and made aware of the problem. Maybe being a feature in this article will light some fires

National Council on Disability

This entry is an addition. I’ve just contacted this US Federal Agency on June 13th of 2006 and made them aware of this and several other accessibility issues with the website.

I don’t expect fast action from a government agency, but I did offer to make the fixes if they have nobody that can tackle it immediately.

The Guild of Accessible Web Designers

I’ve sent four communications over the two last months to GAWDS and have included screenshots.

Though I have received a couple responses from Jim Byrne, the guild’s Founder, no changes have been made. I am a bit surprised by the lack of action.

Logically we shouldn’t hold the entire guild responsible, but I do get a bit of a chuckle when I think about it.

(yes I am prone to sarcasm and can be a bit sadistic – I try not to be, but some things just strike my funny bone, however undiplomatic it may appear.)

Position is Everything

This one really surprised me as PIE obviously deal with unexpected behavior in browsers.

Not all areas of the site have this issue however, and I talked with John through several emails and he noted that my complaint wasn’t the first. I did notice that most of the short articles use their own styles, so it’s likely not as easy to fix as a single CSS file edit.

Update June 13, 2006

I’ve contacted two more websites having these same issues since writing this article. Both were very responsive and the issues fixed within a matter of hours.

I just wanted to point out that quick responses like this are appreciated by people who report problems. This is how an accessible-aware designer should react. Kudos to both.

I’ve also made some changes to the article based on feedback, and added instructions for testing.