a11y/non-text-contrast

Why

A text field drawn with a pale grey line on white, or a toggle whose on and off states differ only slightly, cannot be found or read by people with low vision. No automated engine checks this today.

Fix

Give the boundary that identifies a control (input border, checkbox box, switch track) and every state indicator 3:1 against the adjacent colour. The focus ring needs 3:1 too. Icons that carry meaning without text (a warning sign, a chart line) need 3:1 against their background.

Examples

/* bad: #e5e7eb border on white is about 1.2:1 */
input { border: 1px solid #e5e7eb; }
/* good: #6b7280 on white is about 4.8:1 */
input { border: 1px solid #6b7280; }

Sources

• WCAG 2.2, Understanding SC 1.4.11 Non-text Contrast

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/non-text-contrast