update status colors to meet wcag #7472
Conversation
|
This color change affected some storybook stories. We will want to go back and clean up the Skeleton/Individual story and the Notification/Themed Notification story. This can be done in a separate PR |
There was a problem hiding this comment.
Given these changes are in base grommet as a minor update, I'm betting we're going to get some complaints/reactions about the status-warning change.
Given this example:
Old
New
The old text contrast ratio for the status-warning badge passed WCAG AAA and AA easily with a 12.52. The new ratio is 6.12 (and I find it rather hard to read.)
So I think although the new status-warning color helps support the contrast needed for icon differentiation (light or dark background) it will cause problems when text is over the top (even though it passes for AA)
That said I think we still need to go with the change, but I'm pretty sure we'll hear about the difference from partners.
|
^ good callout, I agree it's a necessary change but a bit awkward with backwards compatibility |
What does this PR do?
This PR updates the
statuscolors in our base theme.status-ok#00C781#009E672.02:1. New value has3.06:1and5.5:1in dark modestatus-warning#FFAA15#C27B001.77:1. New value has3.07:1and5.67:1in dark modestatus-unknown#CCCCCC#9191911.53:1. New value has3.01:1and5.84:1in dark modestatus-critical#FF4040#EB0000*3.06:1. However, this color is proposed to be changed to meet 4,5:1 on white background in Form error ticket. This new value meets3.15:1in Notifications, and4.36:1in dark modeWhere should the reviewer start?
base theme
What testing has been done on this PR?
locally
How should this be manually tested?
locally
Do Jest tests follow these best practices?
screenis used for querying.asFragment()is used for snapshot testing.Any background context you want to provide?
our colors were failing wcag
What are the relevant issues?
Screenshots (if appropriate)
Do the grommet docs need to be updated?
yes
Should this PR be mentioned in the release notes?
yes
Is this change backwards compatible or is it a breaking change?