I'm designing a timeline in which certain "event cards" are interactive while others are not. I'm running into a problem where the icons on the non-interactive cards look very dark, and therefore interactive, because I'm coloring them with the same HEX quality as the accompanying text ("PROMPT"), which is itself quite dark to conform to accessibility standards. My first inclination is to just make the icon color lighter (after all, it is a heavier weight than the text), but does that violate any rule that text/icon pairings need to be the same color? Really would appreciate any feedback here, thank you!

enter image description here

  • Not your answer, but a suggestion: if it's a non-interactive element which can't be made interactive through some other condition, maybe you could just remove the button for good. – João Otero Aug 23 '18 at 3:28
  • Thanks @JoãoOtero, thats a great point. However, since its a timeline that helps patients track their recovery progress, we're trying to experiment with having all content viewable in card form, with some of it being interactive and some of it not. I agree though, it does seem a bit counterintuitive from a UX standpoint. We're still working on parsing that question with users. Thanks again! – Conor Aug 23 '18 at 14:53

The simple answer is "no", as explained by others, but there's sort of an unasked question which is implied in your original description:

the accompanying text ("PROMPT"), which is itself quite dark to conform to accessibility standards

Normal color standards for accessibility require a 4.5:1 ratio. However, for elements that are inactive (ie, disabled), the contrast minimum is not required (but it is nice to try to keep the ratio to at least 3:1). So you can actually lighten up the color for "PROMPT" (and the icon too, if you want).

  • Thanks for pointing that out, @slugolicious, thats great to know. I'm walking kind of a delicate line in this instance in that I'd like users to know that this info is there, but that its not clickable (kind of a ux contradiction, i know) But great to know that I could stand to make the icon and text a little lighter. Thanks again! – Conor Aug 23 '18 at 14:48

Icons do not have to be the same colour as the text. In fact, many UI designers choose a different shade of the text colour or even a contrasting colour for their icons, in order to balance out icons that would otherwise be too prominent or unnoticeable. The icon 'heaviness' usually dictates whether it should be darker (for thin line icons for example) or lighter (for thick icons).

Above all, your colour use should support a clear understanding of the current state and interactivity, rather than just following a blanket rule for each icon regardless of what it's purpose is.

  • +1 for talking about understanding current states and interactivity – Andrew Martin Aug 23 '18 at 7:59
  • Thank you @Wanda, thats extremely helpful. Definitely a good practice to observe context before any "blanket rule," as you said. Thanks again! – Conor Aug 23 '18 at 14:42

I think that as you mentioned you can make the icon's color lighter without violating any rule. You could also reduce the icon's weight. In my opinion both could work.

  • Thanks for reaching out @BenDev88. Thats great to know, definitely going to lighten the icon a bit, as well as tweak the weight. Thanks again! – Conor Aug 23 '18 at 14:49

Do icons need to be the same color as their text? Let's find out.

On this very page, over to the right, there's a yellow block with some links to articles and icons next to each one:

enter image description here

I'm sure you can find plenty more examples all over the web.

  • Hey Ken, thanks for reaching out. Could you explain what you mean by "make the icons interactive also?" I mentioned that this particular icon is in a non-interactive card, and therefore isn't interactive either, because we don't want users to engage with this particular content. Thanks again! – Conor Aug 22 '18 at 15:29
  • Apologies. I didn't read closely enough to see that some cards are not interactive. I'll edit my answer accordingly. But the answer to your main question is that an icon's color can differ from its label. – Ken Mohnkern Aug 22 '18 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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