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:
- 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
- text that is smaller than 18.67px
- text that is not bold and between 18.67px and 24px large
Tools & Bookmarklet
- tota11y Bookmarklet has a contrast checker.
- Firefox has a super awesome accessibility inspector that even calculates the contrast on gradients.
- Chrome and Edge can also do this.