A WCAG success criterion is a testable requirement for checking whether an accessibility guideline has been met. WCAG 2.1 organizes 61 criteria under 12 guidelines and four principles: perceivable, operable, understandable, and robust. section 4.4.2
Each criterion has a conformance level:
- A: the required baseline for accessibility. section 4.4.2
- AA: a stronger target that supports more people. section 4.4.2
- AAA: the strictest level, which is not recommended as a universal site-wide requirement. section 4.4.2
Color contrast in practice
A blue bar against light gray measures only 1.93:1 and fails the AA threshold of 3:1. Adding a dark-gray border raises the relevant contrast to 8.7:1, making the bar easier to perceive. section 4.4.2
Figure 4.34 On the left, the blue bars have no border, so the contrast is calculated between the blue and the light gray as 1.93:1, which is too low to pass WCAG’s AA level of 3:1. However, if you add a dark-gray border, the contrast is then calculated using the border against the background, which shows up better than just the plain blue bars. The contrast between the darker gray border and the lighter gray background is a whopping 8.7:1, beating out the AA level by almost a factor of two.
Compare the borderless and bordered bars to see how a small visual change can determine whether a color-related criterion passes. section 4.4.2
