WCAG 1.4.3 Contrast (Minimum)

From perpendicular angel knowledgebase
Jump to navigation Jump to search

From How to Meet WCAG 2.1 by the World Wide Web Consortium (W3C).

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 minimum contrast requirement.

On that last one I wish to point out that if people can't make out what's in your logo, it's a pretty crappy logo. There may be no requirement but don't be an idiot. You want that thing to be recognizable on a poorly-lit billboard in the rain at 70 miles per hour, and that means use some freakin' contrast.

Color Contrast, Beyond the Basics by Beth Raduenzel is a great article about why color contrast is important and also covers why you should underline your goddamned links.

Related Guidelines

WCAG 1.4.6 Contrast (Enhanced) - Level AAA ratchets the guidelines above up to a ratio of 7:1.

Tools to help meet this guideline

Additional Resources