Color Contrast

Color Contrast

The use of color (e.g., highlighted text or text in another color) is not inherently non-compliant. There are two main questions to ask to determine if it is compliant:
  1. Is the color contrast high enough between the foreground and background colors?
  2. Is color alone being used to convey meaning?

Checking Contrast

Use one of the color contrast analyzer tools, found on the ADA Checklist & Checkers page, to determine if contrast meets minimum requirements. 

If the contrast between the foreground and background are not high enough, the colors need to be adjusted so that the contrast meets the WCAG AA minimum color contrast.
  1. Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.
  2. Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.

Examples

Color contrast example 

The contrast ratio between the background color and text color is 2.35:1, which is too low to pass the WCAG minimum standards.

Color contrast example

Changing the font color corrects the error and changes the WCAG AA minimum color contrast to 8.91:1.

Color contrast example

Changing the background color corrects the error and changes the ratio to 17.24:1, which is high enough to pass the WCAG minimum standard. 

Color That Conveys Meaning

It is acceptable to use color to convey meaning if an alternative method is used also. Please note: meaning is different than using color for emphasis. To determine if color alone is conveying meaning, see if the content is equally understandable when you remove the color. 

Non-compliant Example

Study the acronyms below. All of the items in red will be on your midterm.
  1. CPR
  2. DNR
  3. EHR
  4. ICU
  5. NICU
  6. OTC
  7. SOP
If color alone is being used to convey meaning, use another means to indicate the same information for screen reader users and those with color blindness. 

Compliant Example

Study the acronyms below. All of the items in red with an asterisk will be on your midterm.
  1. CPR*
  2. DNR
  3. EHR
  4. ICU*
  5. NICU
  6. OTC*
  7. SOP

Color as Emphasis or Decoration

If the contrast is high enough and if meaning is not being conveyed by color alone, the use of color is not an accessibility concern. It still may not be aesthetically pleasing, but this is a separate conversation and should not be presented as an ADA compliance issue. 

Example

This may not be visually appealing and even MAY BE distracting, but it is ADA compliant. 

    • Related Articles

    • ADA Checklist & Checkers

      Checklists ADA Compliance Checklist for Digital Assets (last updated: 12/6/24) This checklist is organized by digital asset type and lists the accessibility formatting criteria for each (e.g., LMS, links, images, text, etc.). This is a great one to ...

    • Accessibility Overview (Talking Points & Examples)

      What is accessibility? When we say something is accessible, we simply mean that people with disabilities can use it. Specifically, they can 1) perceive, 2) understand, 3) navigate, and 4) interact with it. What does accessibility look like? ...

    • Accessibility Glossary

      The following terms are excerpted from the W3C website. For the full glossary of terms, go to Appendix A: Glossary (Normative) on the W3C website. accommodation vs. accessible (inclusive/universal design) Accommodation addresses requests made by ...

    • When to Use Content Control Boxes (aka Fill-in-the-Blank)

      Below you will find three scenarios that explain when and when not to use content control boxes in Microsoft Word. In general, use of content control boxes should be the exception, not the norm. Scenario 1: Fill-in-the-Blank Questions (Use Content ...