Use of Color

Downloadable page: Download Lesson on Use of Color

The Standards

Section 508 Standards:

WCAG 2.0 Guidelines:

  • Guideline 1.4.1 Links to an external site. Use of Color: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)" (W3C)
  • Guideline 1.4.3 Links to an external site. Contrast (Minimum): "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) (W3C)
    • "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 are pure decoration, that are 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."

What do the Standards Mean?

Many individuals benefit when a resource is designed with high color contrast between the foreground( e.g. text) and background colors. For instance, high contrasting color combinations (e.g. black text on a white background) make text easier to read for users with a wide-variety of visual impairments, including but not limited to partial sight, low vision, color-blindness, etc. High color contrast requirements can vary depending on the text size and type of content.   

Users with visual impairments may not able to distinguish important information when its importance is conveyed only through the use of color.  For example, color-blind users may not know a field is required if the only feature identifying that field as required is a red label.  Important information conveyed through the use of color must also be conveyed using text cues.  Screen readers and other assistive technologies are able to interpret these text cues for users with visual impairments.  For example, when the text color of a form field is red to indicate it is a required field, adding the word “Required” after the field name will provide the necessary cue.   

How do you Verify the Use of Color is Accessible? 

WebAIM (Web Accessibility in Mind) provides a free color contrast checker to assist with developing compliant content.  To verify color accessibility, enter the foreground/text color and background color into the Color Contrast Checker to verify the colors selected “Pass” the ratio required for WCAG 2.0 AA guidelines for normal and large text.  To learn more about how to use this tool visit the lesson in Week 6.

Resources

Information on this page is from the following resources about use of color:

Estimated time: 12 minutes