search

AlaskaAirlines / auro-accordion

Custom element that allows users to toggle the display for sections of content
https://auro.alaskaair.com/components/auro/accordion
Apache License 2.0
1 stars 1 forks source link

auro-accordion: focus state has low color contrast (a11y) #9

Closed geoffrich closed 3 years ago

geoffrich commented 3 years ago

Describe the bug

When focused, the accordion's text color uses the auro-color-brand-breeze-300 token (#00cff0). This has a contrast ratio of 1.87 on a white background which does not meet WCAG AA color contrast requirements of 4.5 : 1.

To Reproduce

Steps to reproduce the behavior:

  1. Focus the accordion
  2. Check the color contrast

Expected behavior

The color contrast meets WCAG AA requirements.

Screenshots

image

blackfalcon commented 3 years ago

The issue at hand is that the accent color used was never intended to be used on light backgrounds. But going to the standard UI blue, that is pretty harsh.

Took at stab at an approach here to darken the colors within the family and add a fill as we are commonly doing with most tab state UIs.

https://auro-accordion.surge.sh/components/auro/accordion

Will consult with the design team.

blackfalcon commented 3 years ago

@vidalmenAS any support on this would be appreciated.