0

Can anyone clarify if icons (UI elements) 20x20 etc have to be 3:1 and is that a recommendation?

Thanks

Improve this question

1 Answer 1

Reset to default
3

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:

enter image description here

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).

enter image description here

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.

enter image description here

This would fail with a 2.5:1 contrast.

Improve this answer
3
  • Very well articulated @slugolicious
    – Ashwin Kulkarni
    Apr 1 at 4:07
  • I see so even if the icon isn't clickable more for show. Example: (icon location pin) then address text, (icon phone) phone number. Even though these aren't clickable same rule applies 3:1 I assume. Thank you
    – Keano
    Apr 3 at 23:47
  • @Keano, you just provided more information than what you originally asked. I was assuming your icons were interactive elements. WCAG 1.4.11 deals with two types of elements: interactive and graphical. The latter doesn't necessarily have to be a graph or chart - just a "graphical" element - which it sounds like your "location pin" is. So, yes, the 3:1 minimum contrast does apply to your situation.
    – slugolicious
    Apr 4 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.