This page illustrates the difficulties involved in using a Windows colour scheme based on white text on a
black background. It uses legacy Windows 2000 Professional & the then current W7 Beta, and
Microsoft websites as examples, but, as far as I am aware, every version of Windows since 3 to the present
day has suffered from this sort of problem, and the number of websites that fail to set colours properly is
so large that the only realistic explanation is that there is at least one major piece of web-authoring
software, more probably several, that still fail in this respect.
Note:
Under Windows 7 in the Control Panel colour dialog, the message "Colors and sizes selected
here …" is actually incorrect; even with the Windows 7 Basic theme it doesn't
seem to be possible to set most of the colours that this dialog claims to set. Hence the colours
in the screen shot bear little relationship to those 'set' in the dialog! In fact, the only way
to test a website's colour schemes properly, or simply regain control over your desktop colours so that
you can set precisely those that you want, is to go into Computer Management and both
stop and disable the bloatware Themes service.
The example website has since been partially corrected, and so may no longer look like the screenshots,
but there remain far, far too many others that do. The presumed reason is that their CSS
stylesheets have explicitly set only
the background colour ("background-color:#<RRGGBB>")
to the site's style of white, while
the foreground colour ("color:#<RRGGBB>") has been allowed to
default, which will therefore take the user's WindowText colour, which being
also white, the text is unreadable. Almost as common it to set only the foreground colour to black,
so the background colour defaults to the user's Window colour, which being
also black, the result is equally unreadable!
Although these problems here are the fault of the Windows development team for the W7 desktop colours
and similar though less catastrophic problems in previous versions, and web designers for the web site,
there are colour 'features' specific to browsers as well. For example, in IE8 and Opera v9.64,
the <select> tag's colours are not inherited by
the <option> tag, so these must also be explicitly set.
I suggest the following rules for getting this right:
NEVER set just one or other colour explicitly and let the other default, either set
both explicitly or let them both default.
If you want to set colours explicitly via CSS, but avoid multiple explicit rules covering obscure
situations not all of which you will manage to predict, you could try experimenting with the following
rules at the top of your stylesheet: * { color:inherit; background-color:inherit; } @media screen { body { color:#<RRGGBB>; background-color:#<RRGGBB>; } } @media print { body { color:#000000; background-color:#FFFFFF; } }
This may entail redesigning your colour scheme from the top down, and there will still be elements such
as <hr /> and, particularly, form elements for which colour
inheritance may be ignored by some browsers (so any such elements used will need to be
included after the body selector), nevertheless the above usually results
in a simpler rule set while giving more general confidence that things will only look different
when a rule explicitly tells them to, rather than content becoming unreadable in obscure situations.
Specifically test the result on a PC where you have set the desktop colour scheme to have white text on
a black background, for example you could try the W2k settings listed (although they may not work on
more recent versions of Windows), which come from the registry key: HKEY_CURRENT_USER\Control Panel\Colors
