[A11Y] Seven/Basis: secondary submit button text does not have enough contrast

[klonos]

This is a sibling issue to #5425 and part of the #5244 meta.

Current style is:

• Normal state: #828188 text color over #FFFFFF background, which is AA for large text, but fails for normal size text.
  • Making the text color #75747B would pass AA for both Seven/Basis (would make it AAA for large size text, and AA for normal size text).
  • Making it #57575C would pass AAA for both Seven/Basis, for both large and normal size text.
• Hover/focus state: #FFFFFF text color over #97979E background, which fails AA for all text sizes.
  • Making the background color #757575 would pass AA for Seven/Basis (would make it AAA for large size text, and AA for normal size text).
  • Making it #595959 would pass AAA for Seven/Basis

[klonos]

PRs filed for both options to compare and choose from:

• AA: Issue #5426: A11y - make secondary submit buttons AA backdrop#3885
• AAA: Issue #5426: A11y - make secondary submit buttons AAA backdrop#3886

Screenshot that shows progressive change from current to AA to AAA in Seven:

...and in Basis:

PS: I have not changed the border (box-shadow) for these buttons, as I think it makes for a nice "bezel" effect. Happy to change that too, to match the button text or background color (depending on normal vs hover/focus state).

[klonos]

Although AAA is ideal, I believe that we don't want to draw attention to secondary buttons, so perhaps we can call AA "good enough" and choose that here.

Waiting for feedback by others re this one.

[indigoxela]

Although AAA is ideal, I believe that we don't want to draw attention to secondary buttons

Agreed, for the same reason. Another vote for the AA approach for both, Seven and Basis.

[ghost]

I also think AA is good enough. The AAA ones look too bold...

PR looks good to me.

[quicksketch]

PS: I have not changed the border (box-shadow) for these buttons, as I think it makes for a nice "bezel" effect. Happy to change that too, to match the button text or background color (depending on normal vs hover/focus state).

I think we should change the border to match the background, as these buttons did not have a different color border before. I also find it weird that the secondary buttons would get a visible border while the primary button would not.

So while we agree going with AA is good enough, I think this needs an update to change the border to match.