From b1fc0e7ee6d5716f2cffcf5bf818cd669fed5d77 Mon Sep 17 00:00:00 2001
From: Henry Bolshaw <bolshawh@parliament.uk>
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