All Checks

Contrasting Colors

To ensure that user elements are easy to distinguish and text is easy to read, ensure a sufficient color contrast.

Why Is This Important?

When user interface elements have sufficient contrast, they make it easy for users to use the site without any additional technologies at all.

Contrasting text ensures that the text is readable in broad daylight and by people with visual impairments.

Checking for Basic WCAG Requirements

The following contrast thresholds are met:

  1. 3:1 for

    • all graphical elements that are adjacent, for example the button and the background color behind the button
    • text that is both, bold and 18.67px and larger, against its background
    • text that is 24px and larger, against its background
  2. 4.5:1 for

    • text that is smaller than 18.67px
    • text that is not bold and between 18.67px and 24px large

Tools & Bookmarklet

WCAG 2 Requirements

Other Checks:

All Checks