Active Server - Introduction To Web Accessibility - Colors

There are two important considerations with colors, one for users unable to differentiate between colors ("color blindness"), and the other related to how the web application is displayed with various High Contrast mode settings. Any information that is conveyed by using color must also be conveyed by using text and additional graphic treatments, and there are two groups of users to consider here.

First, those who can see the screen but cannot see colors, and second those who cannot see the screen. For the first group, distinguish the colored object visually in some other way, such as bolding, outlining, positioning, adding icons, underlining, and so on, or by adding visible text explaining the meaning of the color change. For those who cannot see, add text, either visible or via an alt attribute on a colored image, or a title attribute (ToolTip) on colored text.

For a working sample, see the Colors Sample.

Table with Color and Text

Table with Color and Image


Copy the following HTML Code Table with colors and text

If a background-color is specified the text color also needs to be specified, and vice-versa, as well as link colors. This is because there are some system color modes where CSS colors are not overridden, but non-specified colors are overridden. For example, if the background color is set to white and text color is not specified, with the system set to white on black high contrast, the user could end up with white text on a white background.

The High Contrast mode in Windows overrides most colors specified by the developer, and removes backgrounds, including the CSS background-image. Images that are meaningful, especially clickable images and icons, must be created using the img alt="" element, with an appropriate alt description.

Go back