Contrast

Contrast

Contrast in accessibility refers to the difference in luminance between two adjacent colors, usually text and its background. Sufficient contrast ensures readability for people with visual impairments, including color blindness and low vision.

Key Guidelines (WCAG 2.1 & 2.2)

Contrast Ratio Requirements

  • Normal Text (under 18px or 14px bold): Minimum 4.5:1 contrast ratio.
  • Large Text (18px+ or 14px bold): Minimum 3:1 contrast ratio.
  • UI Components & Graphical Objects: Minimum 3:1 contrast against adjacent colors.

Exceptions

  • Logos and brand names do not need to meet contrast requirements.
  • Decorative elements that do not convey information are exempt.

Best Practices

  • Avoid using color alone to convey meaning (e.g., errors should include icons or text, not just red).
  • Ensure good contrast even in dark mode by maintaining appropriate luminance differences.

Links in text area (Examples)

If you use links in a block of text, please ensure they are underlined.

Contrast
Key Guidelines (WCAG 2.1 & 2.2)
Links in text area (Examples)