5. Provide a Strong Color Contrast

Create Accessible 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. 

Back to Accessibility Checklist

Incorrect usage of color contrast

Correct usage of color contrast

Best Practice

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. 

Test

Use this desktop tool or automated testing tool like WAVE to test all text content from foreground to background.

  • Does all small text meet 4.5:1 contrast ratio?
  • Does all large text meet 3:1 contrast ratio?

Exceptions

Logos and decoration

Applicable WCAG Success Criteria

SC 1.4.3 Contrast (Minimum)

Resources

Penn State University's page on color contrast

Free desktop application for color contrast checking