E-mail List Archives
Thread: Contrast for accordion
Number of posts in this thread: 2 (In chronological order)
From: Elizabeth Thomas
Date: Mon, Nov 04 2024 10:56AM
Subject: Contrast for accordion
No previous message | Next message →
=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.
From: Steve Green
Date: Mon, Nov 04 2024 11:06AM
Subject: Re: Contrast for accordion
← Previous message | No next message
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 ADDRESS REMOVED = > On Behalf Of Elizabeth Thomas
Sent: 04 November 2024 17:57
To: WebAIM Discussion List < = EMAIL ADDRESS 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]