Crawford Design

Logo

Color

It is estimated that 1 in 20 visitors to a Web site will have some form of color vision deficiency and may find the Web site either difficult to or impossible to use if color by itself is used to convey information. It is good to use color to convey information. The key is not to use color alone.

An example of using color alone to convey a message is below. When the color red is used to indicate required fields in a form people who are color-blind (achromtopsia) will have difficulty finding required fields.

Adding a symbol, like an asterisk, that indicates required fields allows color-blind users to determine which fields are required.

For more information on forms and required fields, read Mandatory Form Fields.

Contrast

Be sure there is enough contrast between foreground text color and background color. If the foreground and background colors are too close to the same hue, they may not provide sufficient contrast for some visitors.

The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1

Image text should be avoided. If image text is used it must be customizable for the user to increase contrast for better visual presentation. This can be accomplished with CSS and implementing functionally to switch to a high contrast style sheet.

Tools

There are a few tools that can be used to determine if enough color contrast is being used.

References

Top