Attachment 124128 Details for Bug 28188 – Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient

[patch] Bug 28188: Accessibility: OPAC contrast ratio for text is insufficient

Bug-28188-Accessibility-OPAC-contrast-ratio-for-te.patch (text/plain), 3.21 KB, created by Henry Bolshaw on 2021-08-26 23:19:47 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Henry Bolshaw

Created: 2021-08-26 23:19:47 UTC

Size: 3.21 KB

patch

obsolete

>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

Actions: View | Diff | Splinter Review

Attachments on bug 28188: 124128 | 124208