fix(colors): improve a11y by increasing red contrast

[jayjayjpg]

While working on https://github.com/meroxa/mx-ui-components/pull/21 our accessibility checks failed because the color contrast for red elements was too low.

According to WCAG 2.x, the color contrast between background and foreground colors needs to be at least 7.3:1 to meet the AAA level success criterion for color accessibility. You can learn more about WCAG success criteria for color contrast and why it matters for accessibility here

This darkens the red tone saffron-100 used for our button elements to be WCAG compliant when used in combination with white text.

Closes https://github.com/meroxa/product/issues/92

before	after
#DE583E	#DC2626

[brettgoulder]

Actually, we might have too much contrast here. I think WCAG AA should be sufficeint for colors.

What about something like #D64224 to get a 4.5:1 contrast ratio?

[jayjayjpg]

@brettgoulder Good catch!

@justmisosoup and @ogeyejammy made a good point, that we could also aim for the AAA level success criterion if we wanted to update this color, which would require a 7.3:1 ratio at minimum for elements with normal and small font-sizes. I agree that aiming for the highest success criterion would be ideal

A review of our color palette is in progress and I can update this PR accordingly a decision has been made

[brettgoulder]

According to the W3 states "It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content."

I think it would be good to come to an understanding of what accessability criteria we are trying to shoot for.

[jayjayjpg]

@brettgoulder @sara @justmisosoup Do we have consensus on the shade we could use for danger elements for now? I think we could also reiterate on the color in the future when the entire palette is updated

What are your thoughts?

[ogeyejammy]

No real decisions have been made regarding the color palette yet. I'm still playing with a few options surrounding the shades and rules. I want to make this as intentional as possible. Kindly, Lee Dante Guarin -- ***@***.*** (925) 336-3336 http://www.meroxa.io Empower your data team.

…

On Mon, Aug 16, 2021 at 9:36 AM Jessy Jordan ***@***.***> wrote: @brettgoulder <https://github.com/brettgoulder> @sara <https://github.com/sara> @justmisosoup <https://github.com/justmisosoup> Do we have consensus on the shade we could use for danger elements for now? I think we could also reiterate on the color in the future when the entire palette is updated What are your thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATJ2WBACEI2XAN6PBEFKYXDT5E5BVANCNFSM5BQQ3XDA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[jayjayjpg]

@ogeyejammy Thank you, that sounds good!

[brettgoulder]

💯

[jayjayjpg]

Thank you! 🙇🏾‍♀️