Color Contrast

5. Provide a Strong Color Contrast

Princeton's website templates have been designed with color compliance in mind. 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 change font colors
  • When placing charts and graphs as images, ensure proper contrast of text from foreground to background
  • Don't rely on color alone to differentiate elements

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.

Note that explaining the image in its alternative text only helps non-sighted users; alternative text is invisible to the users with low vision who need the increased contrast.

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. 

Testing for Accessibility

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

Resources