Understanding WCAG SC 1.4.3 – Contrast Minimum
1.4.3 Contrast Minimum
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.
Contrast Minimum Transcript
Hello everyone, today we’ll be discussing the importance of contrast ratios for the visual presentation of text and images. We’re also going to talk about its importance, some benefits, exceptions, examples, and how we can fix them.Did you know that a website’s color contrast can greatly impact the user experience for those with low vision or color blindness? According to the guidelines, the visual presentation of regular text and images of text must meet the contrast ratio of 4.5:1. This ensures the content is easily readable and accessible to all users. However, when dealing with large text, there is a slightly different requirement. If the text and image of text are large, then the contrast ratio must meet the requirement of 3:1 against the background color.
So, what exactly qualifies as regular text and large text? Well, any text that has a font size below 14-point bold or 18-point is considered as regular text, and any text that has the font size of 14-point bold or 18-point (that is, 18 pixels or 24 pixels) is considered as large text.
These requirements benefit two main groups of users. Users with moderately low vision who don’t use any assisted technologies would be able to read the text if it meets these requirements. Adequate contrast enhances legibility and ensures clear and distinguishable text. And users who have color blindness, who may have difficulty perceiving certain colors, benefit as meeting the requirement ensures that important information conveyed through text remains accessible to them.
Now, there are a few exceptions to the contrast requirement. Incidental texts that are part of photos, drawings, or purely decorative elements are not required to meet this requirement. Logos, texts that are part of brand logos, are exempt from these requirements. Logos often have specific design considerations, and while legibility is important, they’re given more flexibility in terms of contrast ratios. And the last one is inactive UI controls—texts that are part of inactive UI controls, such as disabled buttons or inactive tabs, are not required to meet these requirements.
It’s important to note that while these exceptions exist, it’s still encouraged to maintain a good contrast whenever possible to ensure overall accessibility and readability of content.
Now, let’s explore an example that illustrates the difference between meeting and not meeting the contrast requirement. Here we have two instances of text, one on the right and one on the left. On the right side, we have text that is white on a yellow background with a contrast ratio of 1.1:1. As you can see, this combination does not meet the contrast requirement. The low contrast makes it difficult for users to perceive and comprehend the text easily.
In contrast, on the left side, we have text displayed in white with a black background with a contrast ratio of 18:1. This combination meets the contrast requirement. This example demonstrates the importance of adhering to the contrast requirement to ensure that your text is accessible and readable.
Now, to address contrast issues and ensure readability, follow these guidelines:
First, choose contrastive colors. When selecting foreground and background colors, always offer combinations that have sufficient contrast. By selecting contrasting colors, you can improve the legibility of the text and enhance the overall visual presentation.
Second, check contrast in images of text. When creating images of text, ensure that the text meets a minimum contrast ratio. Also, avoid relying solely on images of text whenever possible. Instead, prioritize using actual text within your designs. This way, you can ensure that the text maintains proper contrast and remains accessible to all users.
In conclusion, maintaining adequate contrast in visual content is very important to enhance accessibility. By ensuring sufficient contrast between foreground and background colors, we can significantly improve the readability and inclusivity of digital experiences for all users.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
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.
Exceptions
The contrast minimum excludes the following in meeting the contrast requirements:
Points to Ponder
Let your site be a feast to the eyes and not a strain!
Related Reads
- Color Palette Contrast Checkers Roundup
A curated list of color palette contrast checkers from around the web, use these tools to check or generate color palettes that are accessible. - WCAG Color Contrast Checker by DigitalA11Y
The WCAG color contrast checker is a simple to use tool the help you test if the foreground and background color meets necessary WCAG requirements. It also provides a comprehensive insight if the colors chosen meet the necessary contrast requirements and if they can be perceived by color blind users with Protanomaly, Protanopia, Deuteranomaly, Deuteranopia, Tritanomaly, Tritanopia, Achromatomaly, Achromatopsia. - Understanding SC 1.4.5 Image of text
- Understanding SC 1.4.11 Non-text Contrast
- Understanding Success Criterion 1.4.3: Contrast Minimum by W3C
