[Button] Accessibility fix for Primary, Secondary, and Danger buttons for dark themes

[shixiedesign]

Accessibility fix for Primary, Secondary, and Danger buttons on dark themes

Problem

The 60s grade colors are not 3:1 accessible on G90 backgrounds, and we cannot use 50s grade colors for fill of the components because label text is white, and white is not 4.5:1 accessible on grade 50s colors.

Previous solution now ditched

• add 1px inner border to Primary, Secondary, and Danger buttons on Dark themes
• border colors are in spec image below

A few more design issues to resolve here before it is ready for dev. This issue is currently blocked by

• adding $inverse-suppport tokens Add $invert-support color tokens #2684
• secondary button's border color has no token. TBD

[elizabethsjudd]

For my own curiosity can you explain to me how adding a border makes this accessible? How was the white text on the colored buttons not accessible before?

[shixiedesign]

Hi @elizabethsjudd, I see what you are asking and yes this has been a bit of a debate on our side too. The underline makes sure component has a visual indicator that's 3:1 contrast against page background, Gray90 & Gray100. We fixed this with an underline because we cannot lighten the button fill color any more, because white text has to be 4.5:1 accessible against the button fill. So this is a fix to satisfy the rule, and arguably without real improvement to the component.

[shixiedesign]

We are likely gonna change from underline to a full border, which would make more sense, and would actually help with accessibility. Waiting on getting in alignment.

Edit: YES WE ARE GOING FULL BORDER! Updated spec image above.

[shixiedesign]

Alternative solution

Ultimate goal is to make sure buttons are accessible against background 3:1 and button labels are accessible against button fill 4.5:1.

An alternative solution is to adjust our color palette. Adding border would cause issues for light theme buttons. Below buttons uses a lightened up version of the 60s grade colors:

[shixiedesign]

Update

This issue no longer describes the work done to address it. Making a new issue for palette changes, and making it a dependency of this issue. Once new palette is merged, button accessibility issue should be automatically fixed via tokens getting new values.

Palette v2 issue #3226