Non-text contrast-ratio on visual boundaries is too low
| Field | Value |
|---|---|
| Rule code | NonText_Contrast_TooLow |
| WCAG conformance level | AA |
| WCAG success criterion | 1.4.11 Non-text Contrast |
| Must be fixed at source | Yes |
Description
For active controls on the page such as buttons and form fields, any visual boundary that indicates the component's hit or activation area must have at least a 3:1 color contrast-ratio (luminosity) against it's background.
How to fix
To address issues with non-text contrast ratios, modify the CSS for your interactive elements (such as buttons, form fields, and links) to enhance the contrast between their visual boundaries (e.g., borders, outlines) and the background. This adjustment ensures these elements are easily distinguishable and accessible, especially for users with visual impairments. Utilize tools to accurately measure and adjust contrast ratios. Some helpful resources include the AudioEye Contrast Checker Tool: https://www.audioeye.com/color-contrast-checker/