Color Contrast

September 17, 2024 | No Comments

Color is an important asset in web content design, enhancing its aesthetic appeal, usability, and accessibility. However, some people have difficulty perceiving color. In addition, people using text-only, limited-color, or monochrome displays and browsers cannot access information presented only in color.

Color Contrast Best Practices

Our web templates are designed with color contrast in mind. Using proper content formatting within the template features and block editor in WordPress will be sufficient to meet color contrast standards. 

Usually, color contrast becomes an issue when custom graphics, charts, and graphs are added as images in website content, or when custom styles (CSS) are added to a page. When you are creating graphics, in Canva or other tools, make sure that you are using proper color contrast. Webaim.org has links to several tools that can be used for checking contrast (Link to an external site).

Additional Tips

  • Use heading markup to delineate the hierarchy and importance of the text. Avoid using only visual formatting styles such as bold, italics, and underlining as ways to delineate structure and importance.
  • Avoid communicating information with color alone.
  • Use high levels of color contrast. 
  • If you aren’t sure, stick with black and white. These two colors together provide the highest contrast.