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