universal-design-center

  • color banner

Web Accessibility Criteria - Color

  Description

Color enhances the design and appearance of information on the web. Although color may be a great tool to visually convey information, it may also create accessibility barriers. When color is utilized on a web page, to ensure accessibility, the right color contrast must always be identified and color should never be the only means to convey information.  

Users who are unable to see color or have difficulty identifying colors, may not understand what information is portrayed through color. 

Color Contrast

When using color, it is important to have sufficient contrast between two colors: the background color and foreground color. Low contrast colors will make it difficult for visual users to read and/or understand the content (text or images of text) on the page. Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. However, this guideline is not applicable if: 

    • The content is large. If the text is large enough to exceed 18 pt. font size or 14 pt. font size if bold, a contrast ratio of 3:1 can exist. 
    • The content is decorative 
    • The content part of a logo or word mark 

Color Only

When color is utilized on a page, it is important to ensure color is not the only means utilized to convey significance to information. Color is typically used  to emphasize text or display links to help visual users see a difference between regular text and important text. However using color only to convey information can become a problem for users who do not see color. Moreover, if color is removed from a website, all visual users may not notice the important information.    

Color with Links

It is a common practice to use color differentiate links from regular text. However, when links have the same font, weight, size as regular text or are conveyed within a paragraph, users may not be able to differentiate the link from regular text if the color is removed for if the user has color vision impairments. Links should always have more than one means to differentiate them from regular text including bold, underline or italics. Refer to the Web Accessibility Criteria: Link Display for more information.  

Users with visual impairments may not be able to see color or users who have a greyscale activated on their screen will not see the difference between links and paragraph text. Along with color, there must be a different style for links to individualize them from paragraph text. The use of underline, bold, italics, bigger font can be used. 

Color with Forms

Forms will typically use color to highlight required sections. have required and optional sections. If users cannot see the color, they will not know the information in the form is required and will thus experience difficulties completing the form. To correctly identify required form fields content creators can: 

      • Add "required" next to each form.
      • Include an asterisk with a legend defining the asterisk.
      • Add a title attribute to form fields.

Color with Objects

Color-only objects are objects that have their meaning described through the use of color.

back to top

  Why is Color important?

Color is one of the most important elements to a webpage. It can attract users and assist in conveying information. Ensuring websites have high enough contrast between the foreground and the background is significant. Users with color vision impairments or low visibility may find difficulty in viewing an item with low color contrast. Good color contrast increases the user's readability and ensures they have a positive experience when viewing content. 

Using color only to convey information could present accessibility barriers to various users. Users who are color-blind will not be able to identify resources or important information thus preventing them from a positive experience when viewing content. Also, utilizing color only can be a problem for all users in cases when the color may be removed from a webpage due to non-support.

back to top


Section 508/ WCAG 2.0 Summary of Requirement

Color Contrast

 The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (WCAG 2.0: Contrast: SC 1.4.3)

  • 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.

Color Only

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (WCAG 2.0: 1.4.1: Use of Color)

Best Practices

Color Contrast 

  • Sufficient color contrast should be provided (at least 4.5:1 ratio) for regular text.
  • If the next is large, a color contrast ratio of 3:1 can be provided
  • Black text on a white background has the highest readability. 
  • Warm and cold colors make for the best color contrast. 
  • Use color palettes to find correct color contrast combinations. Viget provides users with a pallet of different types of tints, tones, and shades. 

Color Only

  • Color should not be used as the sole method for conveying information or differentiating different visual elements such as link text. 
  • Use underline and HTML link markup to present link
  • For forms, it is recommended to add symbols or highlight to emphasize important text. 
  • It is recommended to describe objects by shape or number, not by color. 
  • To indicate an element is in a toggled state use text, alternative text or any other indicator that can be detected without the use of color

Examples

Color Contrast

Good Example of color contrast

 The images below are examples of colors with high contrast resolutions. When the foreground and background colors have a high contrast, users will be able to read and understand the content with ease.   

Good High Contrast Color Blocks Example

 

Good Example of Color Contrast for Text and Background Color

Bad Example of Color Contrast 

 The image below shows colors with low contrast. A combination of these colors were used as foreground and background colors, the information conveyed may not be readable to most users. Colors of the similar shades is difficult for users to read. The harsh contrast will cause users yes to strain and make it difficult for users with low vision to read or notice the text on the screen. 

Low Contrast Color Blocks Example

Low Contrast font and background color examples


back to top

Color Only

Color only in Figures

The images below demonstrate the problems with  conveying information with color only. The images display an activity that asks to identify right-angled triangle and choose an answer based on the triangles color. The image to the right has color and users who can see the colored will know that the answer is "green". However as demonstrated in the left image, if color is not present or cannot be seen by users, they will not be able to know the answer to the question. 

Image utilizing Color Only
Image with No Color

To ensure all users will the able to respond to the question, a combination of color and other indicators should be used as demonstrated in the image below. The image is of the same activity asking users to identify the right triangle. However instead only color being used to answer the question, a number has been associated to each of the triangles. This will allow users to identify the right-angled triangle based on the color of the triangle and its number. 

Color Only and Numerical Indicator

Color only in Forms

The images below demonstrate the problems with using color only to identify required form fields. The image on the right (bad example) uses the color read to indicate a form field is required. Users with color vision impairments will not know the fields are required. The image to the left (good example) demonstrates how to correctly identify required form fields. All the required form fields are labeled "required" which will make it easier for all users.  

Bad Example of Required Form Fields
Good Example of Required Form Fields  

back to top

How to Test

Manual/ Visual Review

  • Visually examine the use of color on a website. Ensure that text and images are not difficult to read.
  • Identify if a website contains color only objects or text. 

Automatic Testing Tools

Color Contrast Tools 

WebAIM WAVE Toolbar*
    1. Activate the WAVE Toolbar
    2. Navigate to the "Contrast" menu
    3. Verify that there are no contrast errors 
    4. Use the Contrast Tools to test if text passes color contrast standards.

*Note: Color contrast errors on WAVE do not account for background images, gradients, etc. they must be manually tested. 

Colour Contrast Analyser 

The Color Contrast Analyser is a downloadable tool that can be used to test color contrast errors on an operating system. Users are able to select an item to identify its foreground and background color. The tool then notifies the user if the item passes color contrast standards. 

Other Tools 

Color Only Tools 

Greyscale Tool

Grayscale Tool is a Chrome Extension that can be used to test for color only.  When selected, the tool will change the Chrome browser from colored version to greyscale. This can help content creators identify which parts of the website are color only. This also gives content creators and a better understanding of what color blind users see when visiting websites. 

Compliance Sheriff

To test color in Compliance Sheriff, select Section C checkpoint group in the CSU ATI Accessibility Requirements.

Resources