Bug 29035

Summary: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio
Product: Koha Reporter: Henry Bolshaw <bolshawh>
Component: OPACAssignee: Henry Bolshaw <bolshawh>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: minor    
Priority: P5 - low CC: fridolin.somers, kyle
Version: master   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=29066
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
Bug Depends on:    
Bug Blocks: 28188    
Attachments: Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio
Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio
Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio

Description Henry Bolshaw 2021-09-16 03:20:26 UTC
The contrast ratio for the OPAC mast_head search label fails to meet accessibility guidelines.

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 12:59:05 UTC
Created attachment 124923 [details] [review]
Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio

This patch changes the colour of the masthead
search label to improve accessibility and make it
easier to read.

To test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to test the contrast ratio.
2. Confirm that the search label has 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 now meets accessibility
   requirements.
5. Check that the OPAC still looks ok after
   the changes.
Comment 2 Fridolin Somers 2021-09-20 22:56:10 UTC
I agree with this change.

But I also propose an enhancement Bug 29066 to remove this text.
Comment 3 Owen Leonard 2021-09-22 15:11:10 UTC
Created attachment 125141 [details] [review]
Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio

This patch changes the colour of the masthead
search label to improve accessibility and make it
easier to read.

To test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to test the contrast ratio.
2. Confirm that the search label has 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 now meets accessibility
   requirements.
5. Check that the OPAC still looks ok after
   the changes.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 4 Katrin Fischer 2021-09-26 12:43:08 UTC
Created attachment 125324 [details] [review]
Bug 29035: Accessibility: OPAC masthead_search label doesn't have sufficient contrast ratio

This patch changes the colour of the masthead
search label to improve accessibility and make it
easier to read.

To test:
1. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to test the contrast ratio.
2. Confirm that the search label has 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 now meets accessibility
   requirements.
5. Check that the OPAC still looks ok after
   the changes.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 5 Jonathan Druart 2021-09-28 13:39:17 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 6 Kyle M Hall 2021-10-08 12:09:58 UTC
 Pushed to 21.05.x for 21.05.05