If you’d like to help in the battle, there are a few things you can do. Firstly, test your own site to make sure you are defining your colors correctly, and that the inheritance of your CSS is working as intended. Secondly, you can set up Firefox easily to check for problem sites. Thirdly, you can email screenshots or site addresses to defineyourcolors@gmail.com and help me educate others! You can also add the “defineyourcolors” tag to your screenshots in Flickr (you can see some old sites that had background color problems there currently).

How to Set Up Firefox to Catch Color Problems

To help in the fight, you can adjust your preferences in Firefox to give you an interesting view of sites that forget to define their colors:

1. Open Firefox’s Preferences;
2. Select the “Content” tab;
3. Click on “Colors”;
4. Change the Text and Background colors to something other than the defaults;
5. Check the “Allow pages to choose their own colors…” checkbox (this is the important part: it allows sites to override your garish color choices, if they’ve defined any).

When you are done, you should have something that looks like this:

Note that I’ve chosen some particularly awful colors: I’m weird that way. I also like to mix it up with new colors now and again. I know, too, that some of you will think I’m pedantic or picky or that I have too much time on my hands. To those people, welcome to the Internet: you must be new here. (And, if you adjusted your preferences and visited the link to pedantic, you’ll see that Google didn’t define their text/foreground color in some spots).

Now, I’m not a designer. I’m more of a code monkey. I’ll be nice and point out not only problems, but also solutions.