Can anyone clarify if icons (UI elements) 20x20 etc have to be 3:1 and is that a recommendation?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Yes, it must have at least a 3:1 contrast with adjacent colors.
The size of the icon is irrelevant with regards to WCAG unless you are working on AAA compliance, in which case, WCAG 2.5.5 Target Size might come into play which requires a clickable element be at least 44x44 pixels.
In WCAG 2.2 (still under development), there will be a AA recommendation for at least 24x24 pixel target size, WCAG 2.5.8 Target Size (Minimum).
But getting back to contrast, WCAG 1.4.11 Non-text Contrast says that non-text (such as an icon) must have at least a 3:1 contrast to any adjacent colors (unless the clickable thing is inactive/disabled).
For example, the icons in the main menu at the top of ux.stackexchange look like this:
They're light gray icons (#D6D9DC) on an almost black background (#232629). The contrast is 10.7:1 so significantly passes.
But if the icons were darker, such as ##6A6D70, the contrast would be 2.9:1, which just barely fails (although it's pretty difficult to see them so it would seem like it should be a more significant failure than just 0.1 away from passing).
If the '?' in the middle icon were a different color, such as lightblue, then the lightblue against the (original) lighter gray icon background would need to be at least 3:1.
This would fail with a 2.5:1 contrast.