Color Contrast

What:

• The visual difference between an object and its background.

Why:

• Sufficient contrast ensures content remains readable for individuals with visual impairments, including color blindness.

Best Practices:

• Use contrast checking tools such as the WebAIM Contrast Checker.
• Meet contrast ratio standards:
  • Graphics and UI components: at least 3:1
  • Regular text: at least 4.5:1 (aim for 7:1)
  • Large text (over 18 pt or bold 14 pt): at least 3:1 (aim for 4.5:1)
• Use color alongside labels, patterns, or symbols to convey information.