Non-text contrast
The 3:1 contrast needed for meaningful control edges, icons, state indicators, and graphic details, not just words.
See it
What it is
Non-text contrast is the WCAG 1.4.11 requirement for visual information that is needed to identify a control or understand its state, plus the meaningful parts of graphics. Those parts need at least 3:1 contrast against adjacent colors. Think input boundaries, the check in a checked box, a selected-tab indicator, a standalone icon, or the lines that carry data in a chart.
Use it when setting component tokens, drawing icons, or adding hover, selected, error, and focus states. Test the exact neighboring colors, not just the icon against the page background: a focus ring around a dark button can pass against the white page and disappear against the button itself.
Gotcha: it does not require every decorative border and flourish to hit 3:1. Only the pixels needed to identify the component, state, or graphic meaning count, and inactive controls are exempt. Browser controls whose appearance you did not modify are also exempt; once you replace their native styling, the contrast is yours to preserve.
Ask AI for it
Audit this interface against WCAG 1.4.11 Non-text Contrast. Measure the meaningful pixels of input boundaries, icons, checked and selected states, custom focus indicators, error markers, and chart lines against each adjacent color with TPGi's Colour Contrast Analyser or the eyedropper in the Chrome DevTools color picker, and require at least 3:1. Exclude decoration, inactive controls, and unchanged browser-native controls. Fix failures with CSS custom properties so every component state uses a tested color token; use currentColor for icons that should inherit a passing label color, and add a second-color halo where an indicator touches mixed backgrounds. Also test Windows forced-colors mode. Return each measured pair, its ratio, and the replacement token.