Bug 29036 - Accessibility: OPAC buttons don't have sufficient contrast
Summary: Accessibility: OPAC buttons don't have sufficient contrast
Status: RESOLVED 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, Manual
Depends on:
Blocks: 28188
  Show dependency treegraph
 
Reported: 2021-09-16 03:26 UTC by Henry Bolshaw
Modified: 2021-12-22 21:03 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
This improves the accessibility of the OPAC by increasing the contrast ratio for buttons, making the button text easier to read. As part of this change the OPAC SCSS was modified so that a "base theme color" variable is defined which can be used to color button backgrounds and similar elements. It also moves some other colors into variables and removes some unused CSS.
Version(s) released in:
22.05.00,21.11.01,21.05.08


Attachments
Bug_29036: Accessibility OPAC buttons don't have sufficient contrast (1.43 KB, patch)
2021-09-20 21:57 UTC, Henry Bolshaw
Details | Diff | Splinter Review
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast (1.47 KB, patch)
2021-09-24 18:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent (15.27 KB, patch)
2021-09-24 18:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Attachment to Bug 29036 - Accessibility: OPAC buttons don't have sufficient contrast (15.25 KB, patch)
2021-10-11 09:39 UTC, Jérémy Breuillard
Details | Diff | Splinter Review
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast (1.53 KB, patch)
2021-10-12 08:23 UTC, Jérémy Breuillard
Details | Diff | Splinter Review
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent (15.32 KB, patch)
2021-10-12 08:23 UTC, Jérémy Breuillard
Details | Diff | Splinter Review
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast (1.53 KB, patch)
2021-10-21 11:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent (15.33 KB, patch)
2021-10-21 11:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast (1.59 KB, patch)
2021-10-24 11:24 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent (15.41 KB, patch)
2021-10-24 11:24 UTC, Katrin Fischer
Details | Diff | Splinter Review
Moved up dividers in breadcrumbs (40.22 KB, image/png)
2021-11-01 15:21 UTC, Katrin Fischer
Details
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast (1.65 KB, patch)
2021-11-19 14:50 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent (15.46 KB, patch)
2021-11-19 14:51 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-16 03:26:00 UTC
The contrast ratio for the OPAC buttons 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 03:28:51 UTC
The Koha green we are using for the buttons isn't accessible with white text so we could change 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 2 Henry Bolshaw 2021-09-20 21:57:48 UTC
Created attachment 125080 [details] [review]
Bug_29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons
to increase the contrast ratio, improving
accessibility and making the button text easier to
read.

To test:

1. Use an accessibility tool (e.g. Chrome's
   Lighthouse tool) to check the contrast ratio
   on the OPAC
2. Confirm that the OPAC buttons don't have
   sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm
   the button contrast ratio now meets
   minimum accessibility requirements
5. Check that the OPAC still looks ok
   after the changes
Comment 3 Owen Leonard 2021-09-24 18:04:02 UTC
Created attachment 125293 [details] [review]
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.

To test:

1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
   the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
   meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 4 Owen Leonard 2021-09-24 18:04:06 UTC
Created attachment 125294 [details] [review]
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.
Comment 5 Jérémy Breuillard 2021-10-11 09:10:57 UTC
Changes done and patch applied, the difference is noticeable.
Comment 6 Jérémy Breuillard 2021-10-11 09:39:33 UTC
Created attachment 126036 [details] [review]
Attachment to Bug 29036 - Accessibility: OPAC buttons don't have sufficient contrast

Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.
Comment 7 Jérémy Breuillard 2021-10-12 08:23:45 UTC
Created attachment 126055 [details] [review]
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.

To test:

1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
   the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
   meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Comment 8 Jérémy Breuillard 2021-10-12 08:23:49 UTC
Created attachment 126056 [details] [review]
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.

Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Comment 9 Katrin Fischer 2021-10-19 21:47:50 UTC
I am sorry, but can you please rebase?

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 29036: Accessibility OPAC buttons don't have sufficient contrast
Applying: Bug 29036: (follow-up) Improve the use of variables to keep colors consistent
error: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss).
error: could not build fake ancestor
Comment 10 Owen Leonard 2021-10-21 11:10:52 UTC
Created attachment 126659 [details] [review]
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.

To test:

1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
   the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
   meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Comment 11 Owen Leonard 2021-10-21 11:10:56 UTC
Created attachment 126660 [details] [review]
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.

Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Comment 12 Katrin Fischer 2021-10-24 11:24:49 UTC
Created attachment 126806 [details] [review]
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.

To test:

1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
   the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
   meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 13 Katrin Fischer 2021-10-24 11:24:54 UTC
Created attachment 126807 [details] [review]
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.

Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Katrin Fischer 2021-10-24 11:26:35 UTC
I noticed a small inconsistency with the red buttons. Compare:

* Patron account > Search history > Remove selected searches
* Patron account > Your summary > Holds > Cancel

The first is much paler than the second.
Comment 15 Owen Leonard 2021-10-25 11:22:04 UTC
(In reply to Katrin Fischer from comment #14)

> The first is much paler than the second.

I think you're seeing the disabled state. Are any checkboxes checked?
Comment 16 Katrin Fischer 2021-10-31 14:54:19 UTC
I am sorry, but there is a strange side effect on the newly changed breadcrumbs. the > is moved upwards and sits above the text with this patch set applied.

I did:
- Apply patch set
- yarn build --view opac
- restart_all
Comment 17 Katrin Fischer 2021-10-31 14:55:28 UTC
(In reply to Owen Leonard from comment #15)
> (In reply to Katrin Fischer from comment #14)
> 
> > The first is much paler than the second.
> 
> I think you're seeing the disabled state. Are any checkboxes checked?

That was it, thx!
Comment 18 Katrin Fischer 2021-11-01 15:21:02 UTC
Created attachment 127177 [details]
Moved up dividers in breadcrumbs
Comment 19 Owen Leonard 2021-11-18 14:48:23 UTC
The breadcrumbs problem turned out to be a local dependency issue, so I'm moving this back to "Signed off."
Comment 20 Katrin Fischer 2021-11-18 16:37:06 UTC
(In reply to Owen Leonard from comment #19)
> The breadcrumbs problem turned out to be a local dependency issue, so I'm
> moving this back to "Signed off."

Oh, sorry for causing the hold up!
Comment 21 Katrin Fischer 2021-11-19 14:50:54 UTC
Created attachment 127873 [details] [review]
Bug 29036: Accessibility OPAC buttons don't have sufficient contrast

This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.

To test:

1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
   the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
   yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
   meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 22 Katrin Fischer 2021-11-19 14:51:02 UTC
Created attachment 127874 [details] [review]
Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.

The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.

To test, apply the patch and repeat the previous test plan.

Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 23 Fridolin Somers 2021-12-02 07:34:36 UTC
Pushed to master for 22.05, thanks to everybody involved!
Comment 24 Kyle M Hall 2021-12-03 15:11:20 UTC
Pushed to 21.11.x for 21.11.01
Comment 25 David Nind 2021-12-16 13:28:54 UTC
Added Manual keyword for 22.05 bugs that I consider require documentation changes. See bug 29640 and the linked spreadsheet for additional details.
Comment 26 Andrew Fuerste-Henry 2021-12-17 18:46:25 UTC
Pushed to 21.05.x for 21.05.08
Comment 27 Victor Grousset/tuxayo 2021-12-22 21:03:20 UTC
Not backported to oldoldstable (20.11.x). Feel free to ask if it's needed.