From 3a49fc3e4623c04e18ae81b4ed5d0ac532633fe1 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 Signed-off-by: David Nind Signed-off-by: Martin Renvoize --- 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 1cf18685d25..93236141f34 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 48691d67a05..c16b5d5e09a 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.47.0