WCAG 1.4.11 Non-text Contrast

Controls and meaningful graphics have 3:1 contrast

Checked automatically: loads the page in a browser. Severity: medium. A text field whose border is barely visible, or a chart line in pale grey, cannot be found or read by a low-vision user.

An approximation: Text fields, selects and icon-only buttons are measured from computed styles: the best of each field's border and fill, or of the nearest enclosing element that draws the field's boundary (a wrapper around the input and its button), against what it sits on, and the shapes of an inline SVG icon against its background, with translucent layers composited. Under 3:1 fails. A control over an image, gradient or shadow, a field with no border or fill of its own and nothing around it that draws one, a custom-drawn checkbox or radio, and image icons are cut out of a screenshot instead and a vision model says whether their boundary or shape reaches 3:1; it fails at 85% or more. Native checkboxes and radios are taken as meeting it, the focus indicator's colour and the checked states of custom widgets are not measured, and graphics other than the 16 largest images are not read.

How to fix it. Give input borders, focus indicators, icons that carry meaning, and chart elements at least 3:1 contrast against what is next to them.