Bug 26706

Specifically <input> with the "btn-default" class should have white text. It looks correct if you have <button class="btn btn-default">

*** Bug 26720 has been marked as a duplicate of this bug. ***

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.

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.

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>

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>

Acted too fast, they look good to me, but would like a response to Henry's comment

(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.

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>

Pushed to master for 20.11, thanks to everybody involved!

*** Bug 26885 has been marked as a duplicate of this bug. ***

enhancement will not be backported to 20.05.x