Reactiflux recently added a role menu to allow members to self-identify their experience and attitude at work, which we make visible in the server by a combination of role colors and role icons. While doing so, I had to wrestle with picking effective colors.
Discord exposes a palette of colors, but the slate of options isn't very rich. We needed to add colors for a total of 8 similar roles, so it was obvious that we'd need to go beyond what Discord makes available.
We approached this with a couple of goals in mind. We wanted to make it easy to get a rough idea of someone's experience and to give an obvious way to distinguish managers and tech leads. In picking exact colors to use, we were subject to a constraint from Discord as well: role colors must be easy to read for members who use either dark mode or light mode, since we can't select a different color for each.
For this reason, we chose to use 2 gradients. One to span our 6 individual contributor roles, and another to signify the 2 management track roles. I am in no way a visual designer, but I did my best. I found the tools on colordesigner.io very helpful for coming up with colors to use, and WebAIM useful to verify contrast ratio.
I used the random color generator to gather a couple of likely candidates for start- and end-colors for the gradient, plugging them into the WebAIM contrast accessibility checker to verify that the colors had a contrast ratio of at least 3, in both light- and dark-mode.
Once I had a pair of colors I was happy with, I plugged them into the gradient generator to create a set of intermediate colors. It took some trial and error to make sure the entire gradient was sufficiently distinct, and we may iterate on this further.
I wanted to keep colors from being too close to each other, while also ensuring they weren't too visually similar to our staff and distinguished member colors.
We're pretty happy with these! It may be a small detail, but if names are difficult to read then it's that much more difficult to get to know who's in the community, so the work is worth doing.
Thanks for reading! Reactiflux is the largest chat community of React developers, it's a great place to get help with learning React, level up your skills, or get advice for your career. Check out our past Q&As with notable React community members, and join the conversation yourself!
Top comments (0)