Color, Contrast in Pilot

Don’t rely on color alone to convey meaning. Make sure you have good contrast between text and background.

Why Color Matters

Color blindness likely affects at least one student in every class you teach. So if you say that green assignments on your syllabus are required and red assignments are optional, some students may not be able to tell which is which. Red and green look about the same to them.

Of course, students who are blind or have low vision may not see your colors at all.

Provide Alternatives to Color

Colors are good. They make your documents more attractive. But be sure students who can’t see colors get the same information. In the red/green example above, you could add the word “Required” or “Optional” to each assignment.

In a graph, you can use textures, line styles, and labels to make parts distinguishable for students who are color blind. A short description can make a chart more meaningful to everyone, whether they see the colors or not.

Why Contrast Matters

Light text on a light background can be hard for anyone to read, as can any text that’s too similar to its background. Students with conditions such as glaucoma and cataract may see the world through a haze that makes it even more difficult for them to read text that isn’t well separated from its background.

Ensure Good Contrast

Black text on a white background yields the highest contrast. But there is no reason to avoid color, as long as you check that the colors you use contrast enough to meet accessibility standards.

Pilot’s Contrast Checker

There are various color choosers within Pilot, such as when you style a widget’s title bar, color text in the News tool, or change text colors on an HTML page. In these cases, Pilot checks how much contrast you have between your text and its background and lets you know if you meet accessibility standards.

For example, when you are using Pilot’s HTML editor, you can apply color to text:

  1. Select the text.
  2. Click the “Select Color” arrow next to the color swatch on the toolbar.
  3. Choose your color you want and click “Save.”

When you are choosing a color, you’ll see a small note beneath the preview. It says “WCAG AA,” which stands for Web Content Accessibility Guidelines, level AA. If you have have enough contrast, you will see a green check next to that:

If there is only enough contrast for large headline text, you will see a triangle  warning that the standards for small text aren’t met. If there is not enough contrast for large text either, you will see a read circle with an X through it.

Colour Contrast Analyser and Browser Extensions

The Paciello Group’s Colour Contrast Analyser is a free application for Windows and Mac computers that will tell you if your text has enough contrast to meet WACG 2.0 standards.

With this tool, you can use an eyedropper tool to sample any color on your screen. Or you can enter by hand the numbers that define your colors.

Also, there are a couple browser extensions that can help check colors.

See the Contrast Checkers page for more information about the Colour Contrast Analyser and about browser extensions for checking accessibility.