WebAIM - Web Accessibility In Mind

E-mail List Archives

Contrast for accordion

for

From: Elizabeth Thomas
Date: Nov 4, 2024 10:56AM

=EF=BB=BFGood afternoon,
We are updating the colors on our site and as a result, I have a question about contrast for accordions. We have some accordions on our site that, in addition to the accordion bar, have a circle with a V to open the accordion and an upside down v to close the accordion. There is a contrast ratio of about 8:1 between the open/close icon and the accordion color. There is a contrast ratio of about 4.85:1 between the accordion text and its background.
However, does there also need to be at least a 3:1 contrast ratio between the accordion color and its background? You can technically click anywhere on the accordion to open or close it, so the whole =E2=80=9Cbar=E2=80=9D is actually the button. So would the accordion need to have at least a 3:1 contrast ratio with its background?
I have attached an inaccessible screenshot as an example. Alt for screenshot: four light blue accordions with dark blue text. The background is white. At the far right (or end) of each accordion is a dark blue circle with a transparent V inside.