Web Site Accessibility
Guidelines for SCS Webmasters

Skip to Main Content

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Applets & Scripts
Blinking, Moving, or Flickering Content
Color
CSS
Forms
Frames
Graphs

Web Design Hints for SCS Webmasters


Color and Contrast

Rationale

If the Web page conveys information by color alone, users who cannot identify or distinguish colors will not be able to make use of the information. For example, asking users to click the red button is not useful if they can't distinguish the red button from other buttons on the screen. The Web page needs to provide another way of making the information available.

An image with insufficient foreground and background color contrast will cause problems for some users. An image containing light text on a dark background or dark text on a light background would provide good contrast. Most graphical browsers allow users to override the color of text on the Web page, but users have no control over the color or contrast of images that contain text.

Please Note: This checkpoint for color does not apply to links changing color after activation. Users can adjust the colors for their links in their browsers. This checkpoint also does not apply to using color to show where a user is on a navigation bar or within a Web site. Color as additional information is acceptable.


Techniques for Color

The following techniques may be used to meet Checkpoint 2 from the list of "Must Have" Checkpoints.

The following techniques may be used to meet Checkpoint 1 from the list of "Should Have" Checkpoints.


Context and Markup

When color is used to convey important information, also use context and markup to convey the same information.
For example, you could use an ordered list to identify the item in a list that is also highlighted with color.

These are the results of the race. The second place finisher, highlighted in red, also qualified for the Olympic team.

  1. Albert Smith
  2. Joe Montgomery
  3. Richard Nix


Images with Color Contrast

On an image containing text, use either light text on a dark background or dark text on a light background to provide good contrast.

For example:

Sample of good and poor contrast



See the Safe Web colors for Color-deficient Vision for more information on color combinations. Colorfield Digital Media has developed Colorfield TM Insight , a tool which can be used to model and predict image legibility for the three most common forms of colorblindness.


Testing

There are several methods to use to ensure that the web page complies with this checkpoint. Here are the easiest and most available to the majority of webmasters.

  1. Turn off images in your browser and view the page. Each image is replaced with its alternative text. If colored images alone were used to convey the information, the information will be lost.
  2. Print the web site on a black and white printer. The pages should make sense in the absence of color. Text in images should be readable.

 

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Applets & Scripts
Blinking, Moving, or Flickering Content
Color
CSS
Forms
Frames
Graphs

Web Design Hints for SCS Webmasters