Interface component or border has low contrast
Why it matters
Form field borders, icons and other parts you need to see to use the page need at least 3:1 against what is behind them.
How to fix it
Darken the border or icon colour to at least 3:1 against its background.
input { border: 1px solid #767676; } /* 4.5:1 on white */Read the W3C guidance: Understanding 1.4.11 Non-text Contrast.
Related rules
- Text does not have enough contrast (WCAG 1.4.3)
- Text misses the enhanced (AAA) contrast level (WCAG 1.4.6)
- Link is only distinguished by colour (WCAG 1.4.1)
- Text sits over an image or gradient (WCAG 1.4.3)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.