1

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

Improve this question
2
  • 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, 2018 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, 2018 at 14:53

4 Answers 4

Reset to default
2

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.

Improve this answer
2
  • +1 for talking about understanding current states and interactivity
    – Roux Martin
    Aug 23, 2018 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, 2018 at 14:42
1

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

Improve this answer
1
  • 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, 2018 at 14:48
0

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.

Improve this answer
1
  • 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, 2018 at 14:49
0

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.

Improve this answer
2
  • 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, 2018 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, 2018 at 20:55

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.