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.
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
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.
For example, a webpage may the user complete a task such as, "Select the purple circle." This would create accessibility issues because not all users will know which object is purple. Instead, color dependent objects should have descriptions or alternative methods to provide the necessary information.
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.