Danger button accessibility issues on Gray 90/100 themes

[laurenmrice]

Danger button label is white, which is not 4.5:1 accessible on Red 50.

If we bump it up to Red 60 then button itself is not 3:1 accessible on Gray 90 theme.

• Need to fix tokens to work for Danger button

[asudoh]

Thank you for the update @shixiedesign! Just to double-check a couple of things:

1. We are changing $support-01 for g90/g100 themes, is it correct?
2. Where should red 50 stroke be applied to?

[shixiedesign]

Hi @asudoh sorry for the late reply:

1. I don't think we can change $support-01 (Red 50 on dark themes) because it is used for error messages and have to accessible against G100 & G90. We need an additional token for Red 60 here to have the white text accessible. This can be done by adding $inverse-support colors Add $invert-support color tokens #2684

2. Red 50 stroke should be applied as a 1px border bottom. it's subtle!

[shixiedesign]

This problem is also shared in Primary and Secondary buttons. Since this issue pertains only to solving the danger button's accessibility, I will make a new issue for dev to track all button border bottom fixes.

See dev issue for fixing all 60s grade buttons: #2729

[shixiedesign]

Reopening because we need a temporary quick fix to this issue until #2729 resolves.

We will temporarily hard code a value #DC222B

Change danger button backgrounds fill to #DC222B , which should be 3:1 ✅ against Gray90, and 4.5:1 ✅ for white label to read.