Look at your "Add to cart" button and ask a strange question: if it had no text on it at all, could someone still tell it was a button? Now the search box at the top of your page - where does it end? Is there a visible edge, or does the field melt into the background until you click inside it? Most sites have at least one control that answers those questions badly: a pale-grey button on a white page, a form field bordered by the faintest hairline, a set of icons washed out to a tasteful whisper. On the designer's calibrated monitor in a dim room, it all looks clean and modern. To a customer with low vision, on a cheap laptop tilted back in daylight, the edges simply are not there. That gap has its own WCAG rule, and it is one of the most commonly missed on the entire web.
Key facts
- WCAG (Web Content Accessibility Guidelines) Success Criterion 1.4.11 Non-Text Contrast is Level AA and was added in WCAG 2.1 (2018) (W3C).
- The rule: the visual information needed to identify user-interface components and their states, plus graphical objects required to understand the content, must have a contrast ratio of at least 3:1 against adjacent colours (W3C).
- It is separate from text contrast: the text rule (1.4.3, Level AA) asks for 4.5:1 on normal-size text; non-text contrast is its own 3:1 test for controls and meaningful graphics (W3C).
- Ontario's enforceable floor is WCAG 2.0 Level AA (IASR, O. Reg. 191/11, s.14, for organizations with 50 or more employees and the public sector) - and because 1.4.11 is a 2.1 criterion, it sits just outside that legal floor but inside WCAG 2.2 (ontario.ca / W3C).
- The next ACR (Accessibility Compliance Report) for organizations with 20 or more employees is due December 31, 2026 (ontario.ca).
What does the non-text contrast rule actually require?
Something narrower than "make everything high contrast," and it splits into two buckets. The first is user-interface components: the parts of a control you need to see to know it is a control and what state it is in. That means the boundary of a button, the outline of a text field, the tick inside a checkbox, the dot in a selected radio, the toggle that says on or off, the focus outline that shows where you are as you tab through. Each of those visual cues has to reach 3:1 against whatever sits right next to it. The second bucket is graphical objects: parts of an image or diagram you need to understand the point - the slices of a pie chart, the lines on a graph, an icon that carries meaning with no text label beside it.
There are sensible exceptions, and they matter. A control that is inactive or disabled does not have to meet the ratio. Anything whose look is left entirely to the browser default, untouched by your design, is exempt. And where a particular presentation is essential - a company logo, a flag, a photograph, a screenshot - the rule steps aside. What is left is the everyday furniture of your site: the buttons, fields, and icons people actually have to find and use.
Where do real sites fail this without noticing?
In the places a designer chose "subtle" and never tested against a bad screen. The runaway leader is the borderless or hairline form field - a search box or checkout input with no edge, or an edge so pale it never reaches 3:1, so a low-vision user cannot tell where to click. Close behind is the low-contrast button: light grey on white, or a "ghost" button that is just faint text with a barely-there outline. Then there are icon-only controls - a magnifier for search, a hamburger for the menu, a bare X to close - drawn in a soft grey that dissolves into the header. Toggles and checkboxes whose on and off states differ by a shade too close to read. And charts where two data series are the same lightness, which is exactly where this rule shakes hands with the use-of-colour rule: colour must not be the only signal, and whatever signal you do use must also be visible.
The tell is always the same. It looks fine to the person who built it, because they know it is a button and they can see the colour. Non-text contrast is about the visitor who does not know and cannot.
Isn't this the same as the text contrast rule?
No, and mixing them up is why sites pass one and miss the other. The text contrast rule (1.4.3) is about reading words - normal text needs 4.5:1 so a person with low vision can make out the letters. Non-text contrast (1.4.11) is about seeing controls and meaningful shapes - the button's edge, the field's boundary, the icon, the chart line - at a lower 3:1 bar. Your paragraph text can pass 1.4.3 beautifully while the "Continue" button beneath it fails 1.4.11 because its outline is nearly invisible. Two separate checks, two thresholds, and a scanner will catch some of the text failures while quietly missing most of the component ones - one more reason a scan is not an audit.
Is non-text contrast actually required in Ontario?
Here is the honest answer, because the corner-cutting version helps no one. Ontario's IASR points at WCAG 2.0 Level AA, and 1.4.11 did not exist until WCAG 2.1. So on the strict letter of the regulation, a faint button is not itself an IASR violation the way missing alt text or a keyboard trap would be. That is the narrow reading - and it is a bad reason to skip it.
Three things make it matter anyway. First, the durable target for any serious build is WCAG 2.2 Level AA, which includes 1.4.11 - the law is the floor, not the ceiling, and the floor is scheduled to rise. Second, the real individual route in Ontario is not the AODA at all: the AODA (Accessibility for Ontarians with Disabilities Act) has no private right of action, so the live path is a complaint to the HRTO (Human Rights Tribunal of Ontario) under the Ontario Human Rights Code - and a person who genuinely cannot find your checkout button has a barrier, whichever WCAG version happens to name it. Third, if you sell into the United States, low-contrast controls are the kind of thing that shows up in ADA (Americans with Disabilities Act) web claims, where WCAG 2.1 and 2.2 AA are the usual reference points. The defensible position is the same as always: documented remediation, a dated record of what you checked and fixed, which is what an honest ACR should reflect by December 31, 2026.
The good news is that this is cheap to fix. Deepening a button outline, darkening a form-field border, giving an icon enough weight to stand out - these are small CSS changes, not rebuilds, and they make the site easier to use for everyone squinting at a phone in the sun.
See whether your buttons, form fields, icons, and focus outlines meet the 3:1 bar, and check for other accessibility issues - free Vayle Report, about 30 seconds: vayle.art. It detects overlay widgets, surfaces real WCAG failures, and tells you exactly what legally applies to your organization in Ontario. No obligation.
Vayle is a remote-first accessibility-engineering studio serving Ontario. General information, not legal advice.