Bug 29068 - Accessibility: OPAC search results summary text has insufficient contrast
Summary: Accessibility: OPAC search results summary text has insufficient contrast
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low minor (vote)
Assignee: Henry Bolshaw
QA Contact: Testopia
URL:
Keywords: accessibility
Depends on:
Blocks: 28188
  Show dependency treegraph
 
Reported: 2021-09-20 22:39 UTC by Henry Bolshaw
Modified: 2022-06-06 20:27 UTC (History)
2 users (show)

See Also:
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


Attachments
Bug 29068: Accessibility OPAC search results summary text has insufficient contrast (1.34 KB, patch)
2021-09-20 22:58 UTC, Henry Bolshaw
Details | Diff | Splinter Review
Bug 29068: Accessibility OPAC search results summary text has insufficient contrast (1.39 KB, patch)
2021-09-21 10:48 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29068: Accessibility OPAC search results summary text has insufficient contrast (1.45 KB, patch)
2021-09-26 13:02 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Henry Bolshaw 2021-09-20 22:39:36 UTC
The OPAC search results summary text ("Edition", "Material type", "Format" etc) is hard to read (grey text on a grey background) and the contrast ratio 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-20 22:58:19 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2021-09-21 10:48:04 UTC
Created attachment 125092 [details] [review]
Bug 29068: Accessibility OPAC search results summary text has insufficient contrast

This patch changes the colour of the label text in
OPAC search results to increase the contrast ratio,
improve accessibility and make the text easier to read.

To test:

1. Search for something on the OPAC
2. Use an accessibility tool (e.g. Chrome's Lighthouse
   tool) to check the contrast ratio
3. Confirm that the labels (Edition, Format etc.) in the
   results summary have insufficient contrast
4. Apply the patch and rebuild CSS:
   yarn build --view opac
5. Use the accessibility tool to confirm the contrast
   ratio now meets minimum accessibility requirements
6. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 3 Katrin Fischer 2021-09-26 13:02:01 UTC
Created attachment 125328 [details] [review]
Bug 29068: Accessibility OPAC search results summary text has insufficient contrast

This patch changes the colour of the label text in
OPAC search results to increase the contrast ratio,
improve accessibility and make the text easier to read.

To test:

1. Search for something on the OPAC
2. Use an accessibility tool (e.g. Chrome's Lighthouse
   tool) to check the contrast ratio
3. Confirm that the labels (Edition, Format etc.) in the
   results summary have insufficient contrast
4. Apply the patch and rebuild CSS:
   yarn build --view opac
5. Use the accessibility tool to confirm the contrast
   ratio now meets minimum accessibility requirements
6. 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 4 Jonathan Druart 2021-09-28 13:39:55 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 5 Kyle M Hall 2021-10-08 12:11:59 UTC
 Pushed to 21.05.x for 21.05.05