Color Contrast

Adapted from Accessibility at Penn State Links to an external site., San Francisco State University, Links to an external site. and University of Minnesota, Color & Contrast  Links to an external site. Links to an external site.

This page will cover the following topics:

  1. Color Contrast
  2. Contrast Testing
  3. Color Contrast Quick Guide

 

    Color Contrast

    The use of color can be a powerful method to communicate information and relationships. An important aspect of using color is to ensure sufficient contrast between foreground (text or graphics) and the background. Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare). Other colors can be used—such as navy, dark green, or maroon for darks, and pastels for lights—to lessen the contrast.

    However, some modern designs are too "subtle" in that the contrast can be insufficient for some readers. Examples include contrasting light grey versus middle grey, middle pastels versus darks, or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast.

    In most online tests, you enter the hexadecimal color code for the foreground (text) and background colors, and the tester generates a numeric result. Usually, a low number or ratio indicates too little contrast.

    Contrast Testing

    WCAG 2.0

    The WCAG 2.0 guideline 1.4.3 recommends the following luminosity ratio standard of 4.5:1 for main text and 3:1 for large-scale text (18 points+, or 14 points+ bold).
    NOTE: If your target audience is mostly low vision, then a ratio of 1 to 7 is recommended.

    WCAG 2.0 Guideline 1.4.3

    The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

    • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
    • Incidental: Text or images of text that are part of an inactive user interface component, that is pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
    • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

    The following websites provide a color contrast testing options:

    Color Contrast Quick Guide

    Make sure your document design is learner-friendly. While creating beautiful, accessible, usable interfaces to house content, have learners’ goals or needs in mind. 

    The following is a quick snapshot of different color text and backgrounds that are acceptable. Notice how accessible color combinations show text color that is easy to read against the color of the background. 

    Color Contrast of text against various background colors. Some color combinations promote easy readability. There are examples of poor contrast as well.

    Fix Me PowerPoint Course Activity

    Try It!

    • In your Fix Me PowerPoint, on Slide 7, check the color contrast of the vertical scroll's text and background color. You may want to use Paciello's Colour Contrast Analyzer. 
    • On Slide 19, is the title's color accessible against the background color? Is it?