Accessibility and inverted system color schemes

By Martin / Design / Wednesday April 8th, 2009 / No comments

The default color schemes for websites on most browsers is black text on white background, a property that is taken from the system colors defined through the operating system. When designing a website, these settings are almost always overridden, through CSS or otherwise, by the design's own colors.

Nevertheless, on some occasions, the default text, or more commonly the background, are left unstyled. In this case, most people will still see the background as white and everything will be fine. However, on some occasions clients may have high-contract schemes activated - an many of which are inverted. This means that all white colors become black, and blacks become white, on system-controlled interfaces. Most systems however give options or by default leave styling such as that done by webpages alone, so normally such a design would be unaltered. However, if the background and foreground colors aren't properly defined, for example in a document with an unset background on explicitly set black text, then when system colors are changed the result may be black on grey or even black on black. Not very accessible.

So don't forget to always explicitly define both foreground and background colors!