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/)
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.
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
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>
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.
Changes done and patch applied, the difference is noticeable.
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.
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>
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>
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
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>
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>
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>
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>
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.
(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?
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
(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!
Created attachment 127177 [details] Moved up dividers in breadcrumbs
The breadcrumbs problem turned out to be a local dependency issue, so I'm moving this back to "Signed off."
(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!
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>
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>
Pushed to master for 22.05, thanks to everybody involved!
Pushed to 21.11.x for 21.11.01
Added Manual keyword for 22.05 bugs that I consider require documentation changes. See bug 29640 and the linked spreadsheet for additional details.
Pushed to 21.05.x for 21.05.08
Not backported to oldoldstable (20.11.x). Feel free to ask if it's needed.