This is a collector bug for cases where the contrast ratio of text is insufficient (usually less than 4.5:1). This makes the text difficult to read and fails to meet accessibility criteria. WCAG 2.1 1.4.3 Contrast (Minimum) Level AA: "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: - Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; - Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. - Logotypes: Text that is part of a logo or brand name has no contrast requirement." (https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#contrast-minimum) There are several free websites for checking the contrast ratio, e.g. https://webaim.org/resources/contrastchecker/ You can also use the built-in accessibility functions in Firefox and Chrome, as well as specialist accessibility browser extensions like WAVE (https://wave.webaim.org/)
Good call Henry.. I look forward to seeing some work happen on this during the next cycle :)
Created attachment 124128 [details] [review] Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient This patch makes minor changes to the OPAC SCSS files to improve the contrast ratio for text on the OPAC, including the main navigation links and buttons. These issues were identified using the WebAIM WAVE accessibility browser extension, Chrome's Lighthouse tool, and Khan Academy's Tota11y bookmarklet (the results using the three tools were very similar). To Test: 1. Use an accessibility tool (e.g. Chrome's Lighthouse Tool or WebAim's Wave Extension) to test the contrast ratio for text. 2. Confirm that the OPAC has contrast ratio issues affecting the main navigation links, the buttons, and the text of search results. 3. Apply the patch and rebuild the OPAC CSS: yarn build --view opac 4. Use the accessibility tool to confirm the contrast ratio issues have been fixed 5. Check that the OPAC still looks ok after the changes.
Created attachment 124208 [details] [review] Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient This patch makes minor changes to the OPAC SCSS files to improve the contrast ratio for text on the OPAC, including the main navigation links and buttons. These issues were identified using the WebAIM WAVE accessibility browser extension, Chrome's Lighthouse tool, and Khan Academy's Tota11y bookmarklet (the results using the three tools were very similar). To Test: 1. Use an accessibility tool (e.g. Chrome's Lighthouse Tool or WebAim's Wave Extension) to test the contrast ratio for text. 2. Confirm that the OPAC has contrast ratio issues affecting the main navigation links, the buttons, and the text of search results. 3. Apply the patch and rebuild the OPAC CSS: yarn build --view opac 4. Use the accessibility tool to confirm the contrast ratio issues have been fixed 5. Check that the OPAC still looks ok after the changes. Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Hi Henry, thanks a lot for this! Especially for the tips on how to test. It was the first time for me using Chrome dev tools and the lighthouse audit tool. Lots of interesting things there. I noticed that there is another warn on the OPAC front page, that is only visible if you are logged in, have some checkouts and OPACUserSummary active. The "heading" of the summary table has bad contrast (grey script on grey background). Owen, would you mind having a look here too and give us your opinion? I also wonder if we could automate tests for accessibility using these kind of tools somehow. So we'd get a warn if the accessibility rate of a page drops after pushing a new feature or patch.
Ah, just a tip: if we do this for more pages, it might be good to file separate bugs for separate pages/elements to be changed and link it to this omnibus bug, instead of posting the bugs directly here.
Thanks for testing and for spotting that summary heading issue. (I'd seen that issue before but I'd forgotten about it...) Thanks for the tip about filing separate bugs, I'm not sure why I didn't do that in the first place. Would it be helpful if I broke the issues from this patch into separate bugs and then added them as dependencies for this bug? Then I could add the OPACusersummary as a new bug at the same time. Or would that overcomplicate things? The biggest visual change I made is the change to the button colour. The green we were using isn't accessible with white text so I changed it to a green that is. Alternatively we could change the text to black (which keeps the Koha green) or choose a completely different button colour.
Comment on attachment 124208 [details] [review] Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient I'm breaking this down into smaller patches on other bugs so I've marked this obsolete. Thank you for testing!
I agree about the automated testing. I've found some instructions for setting up automated accessibility tests: https://accessibility-manual.dwp.gov.uk/best-practice/automated-testing-using-axe-core-and-pa11y/#acceptance-tests-using-axe-core-and-selenium This can be done with selenium or puppeteer. I don't have any experience with these but I think we already use selenium for testing: https://wiki.koha-community.org/wiki/Using_Selenium_with_Koha The tests rely on Pa11y (https://pa11y.org/) and axe-core (https://github.com/dequelabs/axe-core)