Non-text Contrast
Visual presentation of user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors, with exceptions for inactive components and where appearance is determined by the user agent.
What it means
The intent of this success criterion is to ensure that user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in 1.4.3 Contrast (Minimum) . Note that this requirement does not apply to inactive user interface components. Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the web page then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology. The 3:1 contrast ratios referenced in this success criterion is intended to be treated as threshold values. When comparing the computed contrast ratio to the success criterion ratio, the computed values should not be rounded (e.g. 2.999:1 would not meet the 3:1 threshold). Because authors do not have control over user settings for font smoothing and anti-aliasing, when evaluating this Success Criterion, refer to the colors obtained from the user agent, or the underlying markup and stylesheets, rather than the non-text elements as presented on screen.
Failing example
/* Fails: checkbox border barely visible on white background */
input[type="checkbox"] {
border: 1px solid #cccccc; /* ~1.6:1 contrast on white */
}How to fix it
/* Pass: checkbox border meets 3:1 on white */
input[type="checkbox"] {
border: 2px solid #767676; /* 4.5:1 on white — exceeds 3:1 */
}How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →