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;
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.
Text that is part of a logo or brand name has no contrast requirement.
This success criterion requires that the texts and image of texts that are regular in size meet the color contrast ratio of 4.5:1 against their background color. For the large or large scale texts, this SC mandates at least 3:1 against their background. This requirement solely relies on the content authors, designers and the developers and the user agents or contrast enhancing assistive technology, be it at the system level or independent.
Differentiators for the regular/large text
Based on different research and books, WCAG defines a large text which uses 18 PT font or 14 PT bold text. To put into CSS pixels, 1 PT=1.333 CSS PX and therefore, 14 PT bold and 18 PT are 18.5 PX and 24 PX approximately. Anything below these font size requirement is considered regular text and therefore must meet 4.5:1 ratio.
These specificities are arrived at so that it covers people with moderately low vision who don’t use any assistive technology to enhance the contrast and people who have color deficiency too. Moreover, large texts are easily readable in lower contrast.
The contrast minimum
Excludes the following in meeting the contrast requirements:
- Incidental or decorative texts that are part of inactive components or invisible to users
- Brand names and logo type images
- Texts that are part of pictures that contain most visuals. (the sign of the painter on a painting)
Points to ponder
- Develop the style guide in such a way that all the texts that are crucial meet the minimum contrast
- Choose color schemes that are contrastive enough for everyone to see and read
- Provide a “Contrast” mode with the help of alternative CSS if you can’t
Design and develop the content with the minimum contrast requirement.
Let your site be a feast to the eyes and not a strain!