ACCESSIBLE DESIGN INSPIRATION

that meets or exceeds WCAG 2.1 guidelines for color contrast.

What is color contrast?

Color contrast is a key part in designing ADA-compliant web experiences.

The rules for color contrast come from WCAG 2.1 (Web Content Accessibility Guidelines) which define how to make web content more accessible to people with disabilities.

What are the guidelines?

WCAG 2.1 lists the following for color contrast guidelines:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text
    Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
  • Incidental
    Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes
    Text that is part of a logo or brand name has no contrast requirement.

Most Recent