Color Contrast

5. Provide a Strong Color Contrast

The Drupal CMS operates on themes, and those themes have been designed with color compliance in mind (or are slated to be designed with compliant contrast in the near future). If you are introducing customized code, or placing graphics like charts or graphs, you will need to test the contrast of text elements from foreground to background. 

Best Practices

  • Rely on approved styles and do not manually format in source code
  • When placing charts and graphs as images, ensure proper contrast of elements from foreground to background

Don't do This

Insufficient Color Contrast

 

Gauge with low, medium, and high; needle points to high.

Why Is This Wrong?

The foreground text is below 4.5:1 contrast ratio on the background colors which is in violation of success criteria 1.4.3 of the WCAG AA. The image does contain an equivalent alternative text description which serves the needs for the non-sighted, however the low-sighted community will have difficulty perceiving this content as it violates SC 1.4.3. 

Do This

Sufficient Color Contrast

 

Gauge with low, medium, and high; needle points to high.

Why is This Right? 

This graphic maintains a 4.5:1 contrast ratio of foreground text on background colors.