Color contrast is crucial for making content accessible to all users. This refers to the difference in brightness between the color of a foreground item (such as text or an icon) and its background color. Adequate color contrast ensures that users, including those with low vision or color deficiencies, can easily perceive content on the page.

Our base website templates at Digital Common are crafted with color contrast compliance in consideration. However, when incorporating background colors or images into landing page sections, it's important to ensure there's sufficient contrast for effortless readability.

Best Practices for Color Contrast

  • 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 a background color or image to a band on a landing page, ensure there is a lot of contrast between the background and any text on top of it. The background behind the text should not be busy.
  • Do not 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.

Learn More

Off