From 8a44b651e3766ba51dad55c9712ffb56edd8a88e Mon Sep 17 00:00:00 2001 From: Emily Lamancusa Date: Fri, 8 Nov 2024 15:49:22 -0500 Subject: [PATCH] Bug 38383: Improve font color contrast on web installer Update the font colors for info, warning, and database errors on the web installer to meet WCAG accessibility guidelines for color contrast. For the yellow text, it is impossible to meet minimum contrast levels on a white background without losing the yellow-ness of the yellow. This patch opts for a dark text color with a light yellow highlight, to meet contrast standards while allowing the yellow to be easily distinguished from other message colors. To test: 1. Apply patch for test dbrev 2. Trigger a database update from the web installer In KTD this can be done by: i. Changing the Version system preference to a slightly lower number (for example, from 24.0600057 to 24.0600056) ii. Reload the staff client iii. Log in with koha_kohadev, password --> Note that the blue and yellow colors are very light 3. If possible, use browser tools to check the accessibility of the different colors of text (in Firefox, right click on the text and choose "Inspect accessibility properties") --> Note that some of the text does not meet WCAG accessibility standard 4. Apply this patch and yarn build 5. Clear browser cache and refresh the page --> Note that the blue and yellow text is more readable 6. If possible, repeat step 3 --> Note that all text now meets WCAG standards --- koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss | 2 +- koha-tmpl/intranet-tmpl/prog/css/src/installer.scss | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 1cf18685d2..93236141f3 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -304,7 +304,7 @@ $cyans: ( $primary: $yellow; $secondary: $gray-600; $success: $green; -$info: $blue-100; +$info: $blue-500; $warning: $yellow; $danger: $red; $light: #FFF; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss index 48691d67a0..c16b5d5e09 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss @@ -144,10 +144,15 @@ th { } .update_error { - color: #FF0000; + color: #dc3545; font-weight: bold; } +.text-warning { + color: #8a6804 !important; + background-color: #fff1c1; +} + .checkbox { margin-bottom: 1em; } -- 2.34.1