A11y: Global Styles - Light Mode Warning Yellow not hitting contrast ratio standard

[rmstinson]

Light mode warning yellow doesn't hit contrast ratio standards on a white background. Dark mode warning yellow is fine as long as it's on the prescribed background colors.

Recommend we use the dark yellow #7D7227 we use for headlines and links on the homepage as part of the out-of-the-box yellow theme option. It's kind of ugly but it's as close to yellow as we can get without it being completely brown:

Thoughts?

[github-actions[bot]]

More information is required to proceed with this issue:

• Copy the issue template format and paste it into a comment, providing all of the requested items
• Provide a codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible.

This issue will be automatically closed in three days if the information is not provided. Thanks for your understanding.

[macandcheese]

This came up in a previous issue and because the icon / accent bar color is purely decorative - and the text content itself should convey severity - it was deemed non-actionable: https://github.com/Esri/calcite-components/issues/994#issuecomment-842527676

I'll leave this issue open if others want to chime in here.

[rmstinson]

@macandcheese Gotcha! I'm wondering tho, if an icon isn't unimportant enough to not be legible for some users, should we be using the icon at all? It feels like it's not just an accessibility issue, the globe icons in the chips are barely legible to me and I don't have any visual impairments.

It seems to me like we should reassess, since it's the only global style we have in the set.

[macandcheese]

Yeah, maybe we could look at adjusting the yellow value (although, if the result of that is a brown-yellow, folks will likely just override it). As far as using the icon - it's already opt-in / user-overridable so it is ultimately up to the implementing design team.

since it's the only global style we have in the set.

What do you mean by this?

[rmstinson]

since it's the only global style we have in the set.

@macandcheese Must have lost a word in editing should be "since it's the only inaccessible global style."

[rmstinson]

Discussing it with @mitc7862 and other members of the design team, we got a lot of consensus around this direction - maintaining the yellow color theme, while keeping the warning icon as the default gray to ensure legibility - icons that are emphasizing messaging need to hit at least a 3:1 contrast ratio.

Hopefully this strategy can banish the gold/brown direction for all time

[macandcheese]

Per conversation with @rmstinson and @mitc7862 - design work / proposal to follow.

[jcfranco]

@macandcheese Any update on the design work/proposal?

[macandcheese]

@jcfranco not yet - needs to be done in coordination with the dark theme update to ensure any new colors work then. This should be pre v1 for sure but no immediate work has been done.

[jcfranco]

Got it. Thanks for the info!

@benelan We should probably adjust the milestone of this one since https://github.com/Esri/calcite-components/issues/3122 is in the Freezer. WDYT?

[benelan]

Yeah I agree, they should be together. I think we should freeze this one and add it to the v1 priorities project.

[jcfranco]

[geospatialem]

@ashetland Can you take a look at the global style to determine the feasibility prior to our 1.0.0 release? If its feasible - once design recommendations are accepted, we can relay on to developers. cc @yelenakreyndel

[geospatialem]

@ashetland Remember touching base on this one a while back, but trying to recall the next steps as we move towards 1.0. WDYT on implementing for the January release?

[ashetland]

I believe we're going to look at this post v1.0 since it will require a rethink of color application. For now though, I believe we satisfy the AA req since the use of warning yellow is on secondary items (e.g. icons) and the "warning" itself would be written in the text. Even in the Chip example above, if the yellow Chip is meant to be a warning of some kind, that would be communicated in the chip text and the yellow border would be secondary to communicating that information.

[geospatialem]

I believe we satisfy the AA req since the use of warning yellow is on secondary items (e.g. icons) and the "warning" itself would be written in the text. Even in the Chip example above, if the yellow Chip is meant to be a warning of some kind, that would be communicated in the chip text and the yellow border would be secondary to communicating that information.

With the above, we believe to be adhering to the a11y success criterion. @SkyeSeitz and @ashetland verified Figma documentation provides guidance for designers.

Additional research will be conducted to determine if additional documentation is needed to ensure devs do not rely on color alone, and provide additional supporting text content.

[geospatialem]

Removing the design label as research has been conducted previously.

[yelenakreyndel]

@geospatialem Aaron and I were wondering if this issue is good to be closed or if something else is needed?

[geospatialem]

@yelenakreyndel Yes, didn't comment on this sooner, but I assigned myself to determine if the documentation site needs to be modified to ensure we mention color should not be the only means to convey information on our site. Reassigned to the April milestone to tackle.

[geospatialem]

Added a section to the the accessibility page on color considerations, anticipated in next Wednesday's doc release on Wed May 10.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified on next.sites on the accessibility page - targeted for release on Wed May 10.