Fix Contrast on Buttons to Pass Accessibility Threshold

[mariastudnicka]

Overview

Currently the buttons do not pass the threshold for proper contrast.They will need to have higher contrast for better visibility.

[ladissi]

@chalimar please provide update

1. Progress
2. Blockers
3. Availability
4. ETA

[chalimar]

Please see proposed changes in Accessibility Updates to button styling.

[bruceplai]

@chalimar I'm still getting insufficient contrast notices from axe. The updated button text and background colors are 0F1D2F and 0A7A9E, correct?

[bruceplai]

[chalimar]

Hey @bruceplai

The two colors we are using for the button and its label should be the CTI Light Blue (#0D99C6) and CTI Dark Blue (#0F1D2F). The updated hex code for the darker shade of light blue (#0A7A9E) didn't pass accessibility on different colored backgrounds which Axe is picking up. Can we please change it back to (#0D99C6)?

• Additionally, I recommend changing the Light Gray used throughout on the site to #F2F2F2 to help boost contrast between buttons and light backgrounds.

Happy to connect in the meeting! Thank you so much!

[bruceplai]

@chalimar just following up from the discussion in the last meeting. The darker shade of blue (#0A7A9E) with white text seems to allow buttons to pass the contrast test. That'll be updated in the code soon. A separate issue will be opened for link and header link contrast (which I think can be fixed by using the same shade of blue). Thanks!

[chalimar]

Thank you @bruceplai, primary buttons in the design system have been updated to #0A7A9E to match with the new changes. Can I please get a copy of the button states when possible so I update the hex-codes in Figma? Thank you!

[bruceplai]

@chalimar for buttons, the opacity is updated during state changes. I'd have to see how that affects the actual hex color codes in the browser. Thanks

const defaultButtonSettings = {
  backgroundColor: LIGHT_BLUE_3,
  color: WHITE,
  '&$disabled': {
    backgroundColor: LIGHT_BLUE_3,
    color: WHITE,
    opacity: '0.50',
  },
  '&:hover': {
    backgroundColor: LIGHT_BLUE_3,
    opacity: '0.92',
  },
  '&:focus': {
    backgroundColor: LIGHT_BLUE_3,
    opacity: '0.76',
  },
  '&:active': {
    backgroundColor: LIGHT_BLUE_3,
    opacity: '0.68',
  },
};

[bruceplai]

@chalimar looks like the color value doesn't change with opacity updates. Can that be modeled in the figma?