1.4.3 Contrast (Minimum)
Official description of the success criterion
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.
What to do?
Ensure sufficient contrast between text and background.
Why is it important?
Improves readability for users with low vision or color blindness.
Common pitfalls
Lack of contrast is surprisingly common. The issues increase when hover and focus styles are involved.
How to test for it?
Check the color contrast between text/images of text and their background. A lot of automated tools can detect color contrast issues.
The contrast should be at least 4.5:1 unless the text is large, then the contrast requirement is 3:1.
Large text: text that is 19px bold or 24px regular.
Note: Text characters, such as 'X' or '>' are considered as non-text characters/symbols when they are used as symbols. That means they are used for their visual appearance and not expressing something in the human language. So for example a close button that has an 'X' in it, the X is considered non-text content.
It's good to be aware that if the font used is used with a separate font variant for e.g. bold text instead of having the CSS property font-weight, automated tools can flag these as a problem. I usually don't flag these as issues (but instead will report them under misc accessibility improvement ideas). But it's good to think about a situation where the fonts might not load properly. In those cases, the text could become problematic. The optimal situation is to have the contrast between text and its background be high enough regardless of text size.
How to take this criterion into account in design?
It can be beneficial to start the design in black and white. Add color once everything works. This design approach helps with several color-related criteria.
Start by checking the color combinations for their contrast and ensure all planned combinations have at least 4.5:1 contrast between the text and the background.