Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Accessibility Workshop on OER for LaGuardia Community College: Color and Contrast

Accessibility Information on Color and Contrast

General Information

Don't shy away from using colors but use color intelligently. Having a general understanding of color and color contrast is important to help communicate in an accessible manner. 

"Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color." - W3C Working Group Notes

Why using colors accessibly is important

  • Colors affect the readability of your document and site for all users, not just those with vision impairments.
  • Some people cannot read text if there is not sufficient contrast between the text and background.
  • High contrast is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing.
  • While some people need high contrast, for others — including some people with reading disabilities such as dyslexia — bright colors are not readable. They need low luminance.
  • The WCAG 2.0 require that color combinations meet clearly defined contrast ratios. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).

How to use color accessibly

  • Don't use color as the only way of communicating information, always make sure meaning is conveyed in multiple ways.
  • Choose colors with sufficient contrast.
  • Check the color contrast of your items to make sure they are accessible.
    • WCAG Contrast Checker is a Firefox browser plug-in.
      This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
    • Color Contrast Analyzer is a Chrome browser plug-in.
      This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.