WCAG 1.4.11 — Non-text Contrast

Who Is Affected

Low vision users, users with color blindness (affects approximately 8% of men), older adults with reduced contrast sensitivity, and anyone using a device outdoors or in bright light who need to identify and interact with buttons, form fields, and other interface elements.

What This Means

Non-text elements that convey information or allow interaction must have sufficient contrast against their background. This includes button borders, form field outlines, icons, and focus indicators. These elements need a contrast ratio of at least 3:1 to be distinguishable.

Common failures include light gray button borders on white backgrounds, subtle form field outlines, faint icons, and barely visible focus indicators when users navigate with keyboard or screen reader.

Fix: CMS / Theme

This is typically a site-wide issue when your theme's default styling for interactive elements uses colors that are too similar to the background.

1. Identify which CSS controls the failing element (button borders, form field outlines, icons, etc.). In Joomla, check Templates → Your Template → CSS files or template overrides. In WordPress, go to Appearance → Customize → Additional CSS or check your theme's style settings.
2. Use the WebAIM Contrast Checker to test the current contrast ratio between the element and its background.
3. Adjust the color to achieve at least 3:1 contrast ratio.
4. Test interactive states (hover, focus, active) to ensure they also meet contrast requirements.
5. Save changes and re-run a OctoComply scan to verify all instances are fixed.

Common fixes:

• Darken button borders from light gray (#ccc) to medium gray (#767676) or darker
• Increase form field border thickness or darken the border color
• Add background colors or outlines to icons that rely only on color
• Strengthen focus indicator colors and thickness

Fix: Content Editor

If custom styling was applied to specific page elements:

1. Open the page containing the failing element.
2. Locate the element with insufficient contrast (button, form field, icon, etc.).
3. Remove any custom color overrides that may be causing the failure.
4. If custom styling is required, use the contrast checker to verify the new colors meet the 3:1 minimum before publishing.
5. For embedded forms or third-party widgets, contact the provider about contrast compliance or consider alternative styling options.

Standard Reference

WCAG 2.1 Success Criterion 1.4.11 — Non-text Contrast, Level AA

The visual presentation of user interface components and meaningful graphics has a contrast ratio of at least 3:1 against adjacent color(s), except for inactive components, pure decoration, invisible elements, and logotypes.

• W3C Understanding SC 1.4.11
• WCAG Technique G207 — 3:1 contrast for graphics
• WCAG Technique G209 — Sufficient contrast for boundaries
• WCAG Failure F78 — Styling that removes visual focus indicator