Bug 26706

Summary: Fix btn-default styling for better contrast
Product: Koha Reporter: Katrin Fischer <katrin.fischer>
Component: OPACAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: bolshawh, david, dcook, lucas, nick
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00
Bug Depends on:    
Bug Blocks: 26758    
Attachments: Bug 26706: Fix btn-default styling for better contrast
Attachment to Bug 26706 - Fix btn-default styling for better contrast
Bug 26706: Fix btn-default styling for better contrast
Bug 26706: Fix btn-default styling for better contrast

Description Katrin Fischer 2020-10-16 13:37:02 UTC
When btn-default is used on buttons in the OPAC, they appear as dark grey with black writing which is hard to read for lack of contrast.
Comment 1 Owen Leonard 2020-10-16 13:38:20 UTC
Specifically <input> with the "btn-default" class should have white text. It looks correct if you have <button class="btn btn-default">
Comment 2 Owen Leonard 2020-10-21 02:15:47 UTC
*** Bug 26720 has been marked as a duplicate of this bug. ***
Comment 3 Owen Leonard 2020-10-21 02:23:29 UTC
Created attachment 112084 [details] [review]
Bug 26706: Fix btn-default styling for better contrast

This patch makes some updates to the OPAC's CSS in order to make
Bootstrap button styles more consistent. Some CSS has been simplified
and some has been made more specific.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

View a variety of pages in the OPAC to confirm that button styles look
good. For example:

 - Advanced search.
 - Catalog search results.
 - Bibligraphic details (including sidebar menu links and menus).
   - Subscription details, brief and full
 - "Your summary" page, various tabs.
 - Lists

The more pages tested the better! Be sure to test the hover and active
states of buttons as well.
Comment 4 Henry Bolshaw 2020-10-21 21:28:06 UTC
Hi Owen

<input> and <button> with the "btn btn-primary" class also have low contrast e.g. the green search and advanced search buttons, the login button etc.

Using the firefox accessibility inspector (https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector) I'm finding that the contrast ratio for these buttons is between 2.2:1 and 2.4:1. 

From an accessibility perspective, contrast should be:

- at least 4.5:1 to meet WCAG AA standards 
(see success Criterion 1.4.3 Contrast (Minimum): https://www.w3.org/TR/WCAG21/#contrast-minimum)

- at least 7:1 to meet AAA standards 
(see Criterion 1.4.6 Contrast (Enhanced): https://www.w3.org/TR/WCAG21/#contrast-enhanced)

These buttons weren't changed by your patch so this probably needs to be a separate bug but you did say "confirm that button styles look good" in the test plan so I thought I'd mention it in case it's easy to fix with a follow-up.
Comment 5 Lisette Scheer 2020-10-23 23:56:28 UTC
Created attachment 112333 [details] [review]
Attachment to Bug 26706 - Fix btn-default styling for better contrast

Bug 26706: Fix btn-default styling for better contrast

This patch makes some updates to the OPAC's CSS in order to make
Bootstrap button styles more consistent. Some CSS has been simplified
and some has been made more specific.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

View a variety of pages in the OPAC to confirm that button styles look
good. For example:

 - Advanced search.
 - Catalog search results.
 - Bibligraphic details (including sidebar menu links and menus).
   - Subscription details, brief and full
 - "Your summary" page, various tabs.
 - Lists

The more pages tested the better! Be sure to test the hover and active
states of buttons as well.

https://bugs.koha-community.org/show_bug.cgi?id=26707

Signed off: Lisette Scheer <lisetteslatah@gmail.com>
Comment 6 Nick Clemens 2020-10-24 00:14:36 UTC
Created attachment 112336 [details] [review]
Bug 26706: Fix btn-default styling for better contrast

This patch makes some updates to the OPAC's CSS in order to make
Bootstrap button styles more consistent. Some CSS has been simplified
and some has been made more specific.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

View a variety of pages in the OPAC to confirm that button styles look
good. For example:

 - Advanced search.
 - Catalog search results.
 - Bibligraphic details (including sidebar menu links and menus).
   - Subscription details, brief and full
 - "Your summary" page, various tabs.
 - Lists

The more pages tested the better! Be sure to test the hover and active
states of buttons as well.

https://bugs.koha-community.org/show_bug.cgi?id=26707

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 7 Nick Clemens 2020-10-24 00:16:40 UTC
Acted too fast, they look good to me, but would like a response to Henry's comment
Comment 8 Owen Leonard 2020-10-24 00:24:34 UTC
(In reply to Henry Bolshaw from comment #4)
> These buttons weren't changed by your patch so this probably needs to be a
> separate bug but you did say "confirm that button styles look good"

I guess I should have said, "confirm that button styles look correct and consistent with other buttons in the OPAC." :-)

I think we absolutely need to revisit the color scheme with contrast in mind, including both the possibility of changing the default colors and the option of providing a "high contrast" mode. But I think it belongs on another bug. This one is just a bug fix.
Comment 9 Nick Clemens 2020-10-24 00:48:05 UTC
Created attachment 112347 [details] [review]
Bug 26706: Fix btn-default styling for better contrast

This patch makes some updates to the OPAC's CSS in order to make
Bootstrap button styles more consistent. Some CSS has been simplified
and some has been made more specific.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

View a variety of pages in the OPAC to confirm that button styles look
good. For example:

 - Advanced search.
 - Catalog search results.
 - Bibligraphic details (including sidebar menu links and menus).
   - Subscription details, brief and full
 - "Your summary" page, various tabs.
 - Lists

The more pages tested the better! Be sure to test the hover and active
states of buttons as well.

https://bugs.koha-community.org/show_bug.cgi?id=26707

Signed off: Lisette Scheer <lisetteslatah@gmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 10 Jonathan Druart 2020-11-02 10:05:44 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 11 Owen Leonard 2020-11-02 12:36:21 UTC
*** Bug 26885 has been marked as a duplicate of this bug. ***
Comment 12 Lucas Gass 2020-11-16 18:13:35 UTC
enhancement will not be backported to 20.05.x