By: David E. Miller, Minnesota IT Services, Partnering with the Department of Corrections

Since May 1999, the Web Content Accessibility Guidelines (WCAG) have had us thinking about colors. From the start, WCAG told us to use more than just colors to convey information and to use sufficient contrast between foreground and background colors. In December 2008, WCAG 2.0 stated that text should have a contrast ratio of at least 4.5:1 to its background. For those who consume text visually, the contrast ratio is extremely important. It ensures that your eyes can pick out all the lines, curves, dots, and serifs of the text for ease of reading. It makes the text pop.

You may know these guidelines by heart and are subconsciously checking for them daily. WCAG 2.1, published in June 2018, introduced some new guidelines. This article covers one of those additions: 1.4.11 Non-text Contrast – Level AA.

Text of the criterion:
“The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.”

What does this add to WCAG?

How does it apply?

Learn some basic rules to help ensure that those who design, develop, and test know How to improve non-text contrast: color schemes and interface components.

Read the full article at