Do buttons, icons and input borders need 3:1 contrast? The WCAG non-text rule

Success Criterion 1.4.11 asks that "Visual information required to identify user interface components and states" have at least 3:1 against adjacent colors. The Understanding page narrows that: a visual boundary around a control "is only required when there is no other visual way to identify the presence of the control." So a text field with nothing but a thin outline needs that outline at 3:1, while a button with a clear text label doesn't need an edge for this rule. The same page says "the computed values should not be rounded" and gives the example "2.999:1 would not meet the 3:1 threshold." When a result sits near 3:1, read the unrounded value before you decide, since a figure that rounds up to the threshold can still fall short.

Here are the pairs on white. An input border in #8A8A8A gives 3.45:1, and it passes the 3:1 bar. The border #CCCCCC gives 1.61:1, and that fails 3:1, so it can't be the only mark on the field. An icon-only button glyph in #A0A0A0 gives 2.61:1, and that misses 3:1 for a glyph that carries the meaning. A solid button is a separate case. If its fill is the only cue, #2563EB on white gives 5.17:1, and that meets the 3:1 rule for the fill. Its white label is text, so it's held to the text rule: 5.17:1, and that passes 4.5:1. The text says the rule applies "except for inactive components," and decorative graphics need nothing. Logos are exempt too, though if a logo works as a link or control, the Understanding page encourages a higher-contrast version.