Color Contrast

Color contrast is vital for accessibility. Color contrast refers to the difference in light between the text and its background. The right color contrast lets all users, including those with low vision and color deficiencies, perceive content on the page. 

Digital Common's base website templates are designed with color contrast compliance in mind. However, be careful when adding background colors or images to bands on landing pages. Make sure there is enough contrast for easy readability.

Don't Use Color Alone to Convey Meaning

Communicating with color alone creates barriers for users with visual impairments. Information conveyed with color must also be communicated textually. Use patterns, shapes, or other visual differentiation to be effective.

Best Practices

  • When adding or embedding charts and graphs, use colors that create the most contrast between the content and the background. Measure color compliance with a color contrast checker like WebAIM's Contrast Checker.
  • Pay attention to color contrast on landing pages. If you add background color or images to bands on landing pages, ensure there is a lot of contrast. The background behind the text should not be be busy.
  • Do not use color alone to convey meaning.