search

cisco-sbg-ui / atomic-react

https://atomic-react.security.cisco.com
2 stars 5 forks source link

Atomic Rainbow muted color Palette #1160

Open ChloeCookeWarren opened 2 years ago

ChloeCookeWarren commented 2 years ago

Related Issues

Figma File: https://www.figma.com/file/wcvexX1CqfKpVEfvyj7Ig8/Chart-colors-voting

The Issue

We need to come up with a color palette that we can all agree will work for Cisco but also has a fresh and modern look to it. Many attempts have been made in the past, but there seems to be a consensus on Atomic Rainbow Muted from the Figma file. I say we move to use that one and also address accessibility.

The color changes are pretty easy to implement, the designer will need to work with Dar's team to get them all the hex values for light and dark mode. We need to make sure that there's some kind of accessible option. Its unlikely that these muted colors will pass accessibility, so we may want to introduce an accessible theme. This free's us up to have the nicer tonal modern colors we want. For instance, the current color palette is compliant, but very saturated and high contrast. If we didn't have that WAA compliance requirement, we could've done more with that palette.

I'm open to other ways of going compliant too, it doesn't have to be a theme. It could be a mode that boosts contrast, or maybe the UI devs know of a tool we could use.

And just because colors should be simple but never are, I should probably introduce some variables that may effect this. Namely, the fact that Jordan is telling us we're moving to Meraki Magnetic as our style guide. They have a color palette picked out, but I think our atomic rainbow is better. The question is, will our hand be forced to adopt Magnetic colors or do we have some freedom there? I would fight to keep our palette.

Another issue is that we need to start assigning Designers to help module authors update some of their charts to use colors correctly. For instance, the Firepower team is using the donut chart with custom colors to signify partner data by using the colors of the partner logos. This would need to be re-thought. We'd also have to make sure all module authors are using colors in a way that makes sense with the rest of SecureX UX.

brennarvo commented 2 years ago

When it comes to choosing accessible colors, contrast ratios are what is important. For a background with text, using a color contrast checker is a quick way to determine if a combination meets varying WCAG grades. It's always good to aim for AAA.

Charts are a bit more difficult to test given that there are no foreground and background colors right-up against each other, but a good rule of thumb is to grayscale the graphic. For reference, I went ahead and gray-scaled the charts in Figma (click to get a larger image):

chart-colors-voting--grayscale

An article from Brandeis University outlines some good questions to ask when looking at the gray-scaled image:

We recommend the grayscale test instead:

  1. Print out your graphic in grayscale.
  2. Ask yourself:
    • Can I tell all the parts apart?
    • Can I match them to the legend, if there is one?
    • Are any words hard to read, even a little?
  3. Give your grayscale printout to someone who's never seen it.
  4. Ask them a few data-related questions about the chart.
ChloeCookeWarren commented 2 years ago

Oh @DarMontou , could you add Paulina in here when you get a chance? I was going to have her come up with an accessible theme to present along with our Atomic rainbow muted theme.