Skip to Local Navigation
Skip to Content
California State University, Long Beach
Disabled Student Services
Print this pageAdd this page to your favoritesSelect a small fontSelect a medium fontSelect a large font
 

Making Font and Background Colors Client Side Changeable

What does making font and background color user-side changeable mean?

(Adapted from the WC3 guidelines)

Providing access to content includes enabling users to configure and control its rendering.

Users with low vision may require that text be rendered at a size larger than the size specified by the author or by the user agent's default rendering. Users with color blindness may need to impose or prevent certain color combinations.

User agents with speech synthesis capabilities need to allow users to control various synthesized speech rendering parameters. For instance, some users may not be able to make use of high or low frequencies; these users have to be able to configure their speech synthesizers to use suitable frequencies.

  1. Allow global configuration of the foreground and background color of all visually rendered text content.
  2. As part of satisfying provision one of this checkpoint, provide a configuration option to foreground and background colors specified by the author or user agent defaults.
  3. As part of satisfying provision one of this checkpoint, offer a range of colors to the user that includes at least:
    • the range offered by the conventional utility available in the operating environment that allows users to choose colors.
    • If no such utility is available, the range of colors supported by the conventional Interface (API) of the operating environment for specifying colors.

Why is this important?

Color blind and low vision persons can only see certian colors or see some colors better than others. By leaving it up to the client to choose the colors he/she wants to view on their browser is easy to do.

How do I fix this problem?

It's pretty easy. All you have to do is change the font and background tags of your document from author defined colors to operating system's color settings. Below are examples and images to help web page designers understand how to do this.

Example:

<font color="#000000"> or <text="000000">

Change the default of white (000000) to windowtext as shown in example 2.

<font color="windowtext" or <text="windowtext">

Workspace in Dreamweaver showing the HTML code as it normaly is.

Example 2:

Workspace in Dreamweaver showing how to change the HTML code from hexidecimal colors to windowtext color.

The above example shows that the web page designer wants the text color in the document to be the same as any end user's operating system's color. This is easy to do if the web designer used templates: to change the so all you have to do is go into the template and change this for all your pages that you need.

Do the same for the background colors and you're done.

* For an expanded explanation on this procedure, view W3C Guideline 3: Use markup and style sheets and do so properly.

< Click here to go back a page

Web accessibility table of contents

Next page >