Report: use accessible material colors #1758
Conversation
| --poor-color: #e53935; /* md red 600 */ | ||
| --good-color: #43a047; /* md green 600 */ | ||
| --average-color: #ef6c00; /* md orange 800 */ | ||
| --warning-color: #757575; /* md grey 600 */ |
There was a problem hiding this comment.
In isolation this looks a bit odd, that a warning icon is done in gray.
I'm presuming you're okay with that because any warning debugString is displayed in red?
Personally I prefer a yellow/orange/mustard color for these error states, but I can live with this just fine. :)
There was a problem hiding this comment.
Right. My thinking was that colors should signify level of passing. Since we moved the warning icon to orange, it's felt like mixed messaging. e.g. orange for an audit error and orange for a 50/100 audit is kinda confusing. If anything, it might make more sense to make the failures red so users know they contribute 0 to the score.
There was a problem hiding this comment.
okay. i'm feeling like we'll soon graduate to sorting all results into three buckets: exceptions/failures/passing.
Once we do that, we can be very clear about how things bubble up to a score.
Also it generally seems weird to provide a score if there were exceptions in that section.
There was a problem hiding this comment.
In the meantime.. I'm ambivalent. :)
There was a problem hiding this comment.
seems weird to provide a score if there were exceptions in that section.
Definitely need to shake that out. @brendankenny and I had similar questions when redoing the error stuff.
|
|
|
Personally I see this doesn't pass WCAG2AA for at least |
R: all
The report colors were recently adjusted to meet accessibility contrast for WCAG 2 AA, but the new average color is mustard and the red/green are quite deep. This PR dials them back a bit, returns the average color to an orange, but still keeps WCAG 2 AA at 18pt. I used this tool to verify the colors are still compliant.
The colors are from the MD color palette.
cc @robdodson
Before:
After: