From b1fc0e7ee6d5716f2cffcf5bf818cd669fed5d77 Mon Sep 17 00:00:00 2001 From: Henry Bolshaw Date: Thu, 26 Aug 2021 22:36:49 +0000 Subject: [PATCH] Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient This patch makes minor changes to the OPAC SCSS files to improve the contrast ratio for text on the OPAC, including the main navigation links and buttons. These issues were identified using the WebAIM WAVE accessibility browser extension, Chrome's Lighthouse tool, and Khan Academy's Tota11y bookmarklet (the results using the three tools were very similar). To Test: 1. Use an accessibility tool (e.g. Chrome's Lighthouse Tool or WebAim's Wave Extension) to test the contrast ratio for text. 2. Confirm that the OPAC has contrast ratio issues affecting the main navigation links, the buttons, and the text of search results. 3. Apply the patch and rebuild the OPAC CSS: yarn build --view opac 4. Use the accessibility tool to confirm the contrast ratio issues have been fixed 5. Check that the OPAC still looks ok after the changes. --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 6 +++--- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 1d0c0a9419..4bf9d9ad0e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -19,7 +19,7 @@ $input-btn-focus-color: #85CA11; $input-btn-focus-box-shadow: 0 1px 1px $input-btn-focus-width $input-btn-focus-color; $color: #999999; -$links: #0076B2; +$links: #0074AD; $links-hover: #005580; $footer-height: 45px; @@ -163,7 +163,7 @@ h1 { & > li { & > a { - color: #777777; + color: #666666; font-weight: bold; } @@ -204,7 +204,7 @@ h1 { } .btn-primary { - $base-bg: #77b50f; + $base-bg: #548300; background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); background-color: $base-bg; background-position: 0; diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index e11b5202ad..171caae6a5 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -315,7 +315,7 @@ th { } &.clearsh { - color: #E8583C; + color: #D43C00; font-size: 80%; font-weight: normal; padding-bottom: .6rem; @@ -571,7 +571,7 @@ th { padding: 15px; label { - color: #727272; + color: #666666; font-size: 115%; font-weight: bold; margin: 0; @@ -1011,7 +1011,7 @@ div { } .results_summary { - color: #707070; + color: #666666; display: block; font-size: 85%; padding: 0 0 .5em; @@ -1632,6 +1632,7 @@ nav { a { background-color: #F0F3F3; border-bottom: 1px solid #D8D8D8; + color: #666666; display: block; font-weight: bold; padding: .7em .2em; -- 2.20.1