Understanding WCAG SC 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.

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