Accessibility Improvement: Brand color replacement

[seanmiller26]

Package

Choose from the list:

• [ ] app-content-pages
• [ ] app-project
• [ ] lib-classifier
• [ ] lib-panoptes-js
• [ ] lib-react-components
• [ ] unknown

Is your feature request related to a problem? Please describe.

Our current main Brand color does not pass contrast standards.

Describe the solution you'd like

Replace any instance of Brand with Neutral-1. The darker teal passes all contrast standards.

Additional context

@mcbouslog and I briefly discussed methods to achieve this. Find and replace could work. I also proposed swapping Brand and Neutral-1 in Grommet theming. However, this could have wider consequences.

Some visual examples:

[goplayoutside3]

How does this apply to:

• PFE
• All other websites that use FEM's Grommet theme?
  • Is the expectation that brand in the grommet-theme lib changes to neutral-1's value across all Zooniverse websites?

[seanmiller26]

@goplayoutside3 Related PFE issue just opened ^

That's the idea - our main Teal cannot remain as its failing accessibility standards. So whatever would be the easiest implementation - either swapping the definitions or finding and replacing all instances.

[seanmiller26]

I would like the darker teal #005D69 as the primary brand color if that helps. If we don't want this to get convoluted in the future this may be a good time to swap Grommet definitions.

[goplayoutside3]

I think we could just redefine brand in the grommet theme object as #005D69. This would automatically fix the accessibility failures. We could leave the definition of neutral-1 as #005D69 too for legacy support. https://github.com/zooniverse/front-end-monorepo/blob/6e0b2fae4a3dea3321475351428c04c610d9a9aa/packages/lib-grommet-theme/src/index.js#L4

Doing so would have a bit of a radiating effect because:

• The apps and libs in FEM all depend on the lib-grommet-theme
• lib-grommet-theme is published to npm and consumed by this list of dependents. Publishing a new version of lib-grommet-theme will automatically be available to those repos for update.
• Handling of repos older than FEM would be a different process I think @mcbouslog would have more experience with.

What do you imagine the timeline of this looking like? Is it crucial to update FEM and PFE at the same time? Such as during the same week?

[seanmiller26]

To address the timing - definitely ok to update at separate times if needed. We have gone this long with the lighter teal, but I'd like to future proof sooner rather than later.

[mcbouslog]

I'm hesitant to change the theme brand color unless we're officially changing the overall Zooniverse brand color, as I think there'll still be instances where we'll want to use the official Zooniverse brand teal (#00979d) in code, and if that's the brand color it should be the brand color in the theme?

I think this is an accessibility issue and not a suggestion to change the overall Zooniverse brand color, but I could be mistaken, please let me know. If we're changing the official Zooniverse brand teal I think that would need some additional discussion, approval, and coordination.

[goplayoutside3]

That's a good point Mark - is the accessibility failure for current "brand" teal against white? Or "brand" teal against black? What are the color combos of most concern?

[seanmiller26]

The main brand teal fails against white but passes against black (still fails AAA normal size). We can continue to use the color for graphical elements as well so I can see the value of keeping the two labels separate.