Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Designing Accessible Web Pages

divider

Layout

Color used for layout:

How does colored text effect the blind or the visually impaired? What happens to color-relayed information when presented on a monochrome monitor, printed from a black and white printer, read by someone who is color blind or read by a screen reader? The color-coded information is lost.

EXAMPLE:

"Here is a list of questions from the final. The items in RED are mandatory for an A in the class; the items in BLACK are provided for extra credit.

What is the name of the course?
What is your name?
What is my name?
How many times did you come to class?"

Ensure that text and graphics convey the correct meaning when viewed without color.

The above information, when restated, will convey importance to those unable to utilize color while still using color as visual clues for the visual user.

"Here is a list of questions from the final. The first 2 items are mandatory for an A in the class; items 3 and 4 are provided for extra credit.

1. What is the name of the course?
2. How many times did you come to class?
3. What is your name?
4. What is my name?"

Color is used, however the information is conveyed in a way that relays the importance and layout with dependence on color.

Contrast Colors

Background color and text color should have the highest contrast. Persons with low vision, monochrome monitors or learning disabilities (and those who don't want to strain their eyes) will be unable to view your text if it is not easily read. Lighthouse International has excellent information on the use of high-contrast colors and useful guidelines on legible text.

 

Red on black is a favorite of some people

example of text in a difficult-to-read font. Text reads: and some can't resist these types of fonts.
another example of text using a difficult-to-read font, even when text color and background color has good contrast. Text reads: even if the contrast is good.

and who can resist the scrolling text

 

Test your pages by printing them or by setting your browser to black, white and a few shades of gray. If the information is readable, contrast is good and the information conveyed without color then the text and color layout of the page is good.

Good layout requires good organization:

Look at this page with a bad layout. (Hint: keep scrolling down.)

This is a page with a good layout. Even though the color codes of this page leave something to be desired, the general layout is easy to follow.

Guidelines from W3C. (17 slide presentation.)

Next Link and graphic of hand pointing to the next page.

divider

Layout | Page Organization | Hypertext Links | Images | Tables | Frames

 Image Maps |  Multimedia | Graphs, pdf's & Charts | Scripts, Applets & Plug-ins | PowerPoint Slides | Check your work

Home