Bug 29037

Summary: Accessibility: OPAC links don't have sufficient contrast
Product: Koha Reporter: Henry Bolshaw <bolshawh>
Component: OPACAssignee: Henry Bolshaw <bolshawh>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: minor    
Priority: P5 - low CC: bolshawh, kyle, martin.renvoize
Version: MainKeywords: accessibility
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.11.00,21.05.05
Circulation function:
Bug Depends on:    
Bug Blocks: 28188    
Attachments: Bug 29037: Accessibility: OPAC links don't have sufficient contrast
Bug 29037: Accessibility: OPAC links don't have sufficient contrast
Bug 29037: Accessibility: OPAC links don't have sufficient contrast

Description Henry Bolshaw 2021-09-16 03:35:48 UTC
The OPAC breadcrumb links are on a grey background and don't have sufficient contrast. 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/)
Comment 1 Henry Bolshaw 2021-09-16 07:41:31 UTC
This issue also applies to other links on a grey background e.g. the links in the OPAC search results. I've amended the bug title to remove the reference to breadcrumbs specifically.
Comment 2 Henry Bolshaw 2021-09-16 08:03:44 UTC Comment hidden (obsolete)
Comment 3 Owen Leonard 2021-09-22 15:19:21 UTC Comment hidden (obsolete)
Comment 4 Martin Renvoize (ashimema) 2021-09-24 15:52:36 UTC
Created attachment 125279 [details] [review]
Bug 29037: Accessibility: OPAC links don't have sufficient contrast

This patch changes the colour of links on the OPAC
to improve the contrast ratio and make the link
text easier to read. This accessibility issue was
identified using the WebAIM WAVE accessibility
browser extension and Google Chrome's Lighthouse
tool.

To test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to test the contrast ratio.
2. Confirm that some links (e.g. breadcrumb links
   and title links in search results) have
   insufficient contrast.
3. Apply the patch and rebuild the OPAC CSS:
   yarn build --view opac
4. Use the accessibility tool to confirm the
   contrast ratio meets minimum requirements
5. Check that the OPAC still looks ok after the
   changes.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 5 Martin Renvoize (ashimema) 2021-09-24 15:53:07 UTC
A marked improvement. Passing QA
Comment 6 Jonathan Druart 2021-09-28 13:39:21 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 7 Kyle M Hall (khall) 2021-10-08 12:10:16 UTC
 Pushed to 21.05.x for 21.05.05