WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Contrast for accordion

for

From: Steve Green
Date: Nov 4, 2024 11:06AM

It’s not a WCAG non-conformance, but it’s potentially a usability issue, particularly for people using screen magnification, in which case it is possible that neither the text nor the icon might be displayed. In user testing I have seen this sort of thing cause problems when participants have clicked or touched what they thought was an empty area of the page, only for something unexpected to happen.

Steve Green
Managing Director
Test Partners Ltd

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Elizabeth Thomas
Sent: 04 November 2024 17:57
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Contrast for accordion

Good 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 “bar” 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.
[cid:image001.jpg@01DB2EE4.0E5DEFA0]