Notification Colors - Icon colors against notification background colors don't meet accessibility

[KennyAtHPE]

Related to #2425

Text color - default text Background colors - Validation Warning, Validation Critical, Background Contrast, Validation OK Status icon colors - Status Warning, Status Critical, Text Strong, Status OK

Concerns relating to the current dark mode validation and status colors:

• Default text is hard to see with the current validation colors
• Status colors blend in with validation colors
• Whether or not they do a good enough job capturing user's attention

This is affecting use cases such as global banners and form validation

Updated Success Criteria

• Update Status icon and foreground colors, so that when used against validation and default backgrounds in both light and dark themes, shall achieve a minimum contrast ratio of 3:1 (Accessibility rules).

[vavalos5]

@KennyAtHPE Were there colors you had explored as alternative colors for this ticket?

[KennyAtHPE]

@vavalos5 there's a very small amount of exploration here. The colors used here are all already within our current color palette. Ultimately, we moved away from this exploration since we didn't want to use different existing colors but instead are advocating that the highlighted colors within this ticket be changed instead.

[vavalos5]

Thanks Kenny. Once Chris returns, i'll chat w/ him on this matter. If it's a priority @SOjaHPE

[vavalos5]

Chatted w/ Chris, here's his feedback: We should do more research and data on colors "not to be so rainbow-ish" - we can bring colors up and down question whether we are making the styles aligned to code and that it should react like the coded component

[vavalos5]

An idea I came across which we can possibly consider

https://aui.atlassian.com/aui/8.1/docs/messages.html

[vavalos5]

Sherry Mead reached out today to see if we have a solution. Don't know if we want to bump this up

[SmWorkGitHub]

Just wanted to repeat the issue description I gave Vicky in Figma. It applies to light and dark mode validation colors:

I'm going to be asking the owners of a UI component library to change the validation behavior of their form components and they will push back on semi transparent form field backgrounds for the reason Matt gave.

They can't control what teams do with their components so the components have to be readable and pass accessibility even if teams place them on colored or patterned backgrounds.

This is Sherry Mead. Sorry about the crappy user name.

[ericsoderberghp]

These colors were updated as part of https://github.com/grommet/grommet-theme-hpe/pull/280. We should re-check if the issue still exists.

[taysea]

@KennyAtHPE @oliverHPE before I close this, can you assess the current values and confirm if we've resolved this issue?

[oliverHPE]

Thanks @taysea Have found several colours for each validation type and need to confirm which are the latest. Will update you when these have been confirmed.

[KennyAtHPE]

@taysea @oliverHPE I've reviewed all the different states within our notifications and here's what I've found:

• Current text color is now accessible on all the different state backgrounds within the dark theme
• The dark theme Icons are NOT accessible in all four states

WCAG states "if the icons are required to understand the content, then the icons need to have a contrast ratio of at least 3:1." Link to docs. I suggest we reformat this ticket with this new scope in mind.

[oliverHPE]

@taysea Thanks @KennyAtHPE Also had a look at our status colors as measured against validation backgrounds in the light theme, and these also do not meet a 3 : 1 contrast ratio.

[luketa8]

Updating:

• Added an assessment of current icon/background pairs with contrast ratios.

• Added alternative color explorations that meet the 3:1 ratio, modifying the icon color the least possible.

Tagging @oliverHPE, @KennyAtHPE and @SeamusLeonardHPE for visibility

[luketa8]

Updating Success Criteria:

• Status icon colors, when used against validation and default backgrounds in both light and dark themes, shall achieve a minimum contrast ratio of 3:1. This applies to all instances of status icons across the design system.

• [x] Provide viable options within existing design system colors that meet the success criteria

[luketa8]

• Finished new color Tokens, reviewed with @oliverHPE.

• Next steps: Final signoff from @SeamusLeonardHPE. Updating the Primitive and Semantic Token Libraries.

• Follow up: Ticket to make the same updates in code @jcfilben.

[jcfilben]

Can we also run the new notification colors by Chris, Joelle, and Ashley to give them visibility?

[luketa8]

Thanks Jessica. I 've sent a Slack message to @joellegregory.

[luketa8]

From Joelle:

Everything looks great—Chris was happy with the proposed colors

• I'll pair with @oliverHPE tomorrow and update the Tokens.
• I'll open a follow up task to pair with @britt6612 and make the updates in code.

[luketa8]

• Added Accesible Info (Blue) color new token -> color.blue-600

• Oliver updated Semantic and Primitive Token libraries.

• Moving to Done and Opening follow up task to update colors in code