Contrast and color use are vital to accessibility. In order for a web to be accessible, it needs to provide enough color contrast between text and its background so that it can be read by people with moderately low vision.
The contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.
What is Color Contrast Ratio
Color Contrast Ratio is the numerical value assigned to the difference in light between the foreground and the background., which ranges from 1 to 21 and commonly written 1:1 to 21:1.
The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1 to be considered accessible by WCAG 2.1 Guidelines.
Best Practices
- Rely on approved styles and do not manually change font colors
- Don’t only rely on color alone
- Use Color Contrast Checker or download the WCAG Color Contrast Checker Extension to make sure the color contrast is accessible.
Gradients, Background Images, and Transparency
Text over gradients, semi-transparent colors, and background images still need to meet contrast requirements.
To test contrast, consider testing the area where contrast is lowest. You might also have to test color contrast in several places on the image to optimize the visual of its content.
Color contrast of text on background images should be tested on a variety of screen sizes to make sure users will not encounter issues when they zoom into the page.
Exceptions
There are three exceptions to the 4.5:1 contrast requirement: large text, incidental text, and logotypes.
- Large Texts: text that is 18pt and larger, or 14pt and larger if it is bold. Large texts are easier to read, therefore the minimum requirement is reduced to 3:1.
- Incidentals (Types of Incidentals):
- An inactive element, like a disabled Submit button, is identified visually by its lower-contrast state.
- Decorative text that is not meant to be read.
- Text that is meant to be hidden, such as an invisible skip button.
- Text that does not contain important information on an image.
- Some Images: certain images may need to be presented with lower contrast to keep their meaning and purpose. These type of image do not have contrast requirements
- Logotypes: Text that is part of a logo has no contrast requirement.
Examples
Adequate Color Contrast
Text Contrast: Can you read this text?
Non-text Contrast:
Why is this color contrast accessible?
- Both of the examples pass the color contrast requirement.
Inadequate Color Contrast
Text Contrast:
Non-text Contrast:
Why is this color contrast inaccessible?
- The text above has a ratio of 1.38:1, which is below the 4.5:1 requirement.
- The landscape image’s highest color contrast ratio is 2.5:1, which is also below the 4.5:1 requirement.
- Both of the examples are inaccessible for some users.
Test for Accessibility
Use Color Contrast Checker or download the WCAG Color Contrast Checker Extension to make sure the color contrast is accessible.
To check if color contrast on a page are accessible, make sure:
- Small text should at least have 4.5:1 contrast ratio
- Large text should at least have 3:1 contrast ratio