Perceivable · Level AA · Introduced in WCAG 2.1
WCAG 1.4.11: Non-text Contrast
Published by whatisADA / Grow Wild Agency · Updated
What this criterion means
Visual information needed to identify controls, their states and meaningful graphical objects generally needs 3:1 contrast against adjacent colors. Evaluate which parts actually convey the required information and any exceptions.
A practical example
A checkbox has a border that disappears into the form background, and its checkmark is equally faint. Strengthen the necessary outline and selected-state indicator so both the control and its state remain identifiable.
How to check it
- List controls, focus/selection indicators, chart marks and informative icons.
- Identify which visual boundaries or marks are needed to understand each component or graphic.
- Measure each necessary part against adjacent colors and document any exception for inactive or unmodified browser controls.
What can be missed
Not every decorative border needs 3:1. A labeled solid button may be identifiable without its outline, but its essential state indicator still needs review. Text contrast is assessed separately.
Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.