Perceivable → Distinguishable → 1.4.11
Non-text Contrast
WCAG Requirement
UI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors.
Experience Builder Notes
EB widget borders, focus indicators, and icon buttons often fail 3:1 contrast. Check toolbar icons and chart elements.
Map & GIS Considerations
Map symbology must meet the 3:1 contrast ratio against adjacent colors — both the basemap and surrounding UI elements. This applies to point markers, line symbols, polygon boundaries, and any graphical indicators. Test at multiple zoom levels since basemap colors change. Zoom/pan control icons are frequently low-contrast against the map background, especially on satellite imagery basemaps.
Sufficient Techniques
- ✓Ensure borders and icons meet 3:1 contrast
- ✓Focus indicators must be visible against background
- ✓Test map control icons against the basemap at multiple zoom levels
- ✓Use outlined or high-contrast zoom/pan buttons
Common Failures in EB Apps
- ✗Light gray borders on white background
- ✗Low-contrast toolbar icons
- ✗Focus indicator not visible against EB theme
- ✗Map zoom controls blending into light-colored basemap
- ✗Legend symbols with insufficient contrast against card background
Full specification: WCAG 2.1 — 1.4.11 Non-text Contrast
Have questions about 1.4.11?
Ask our AI assistant about this criterion, remediation strategies, or how it applies to your EB app.
Ask About 1.4.11