Bug 38383 - say_info messages in web installer have bad contrast/font color
Summary: say_info messages in web installer have bad contrast/font color
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Installation and upgrade (web-based installer) (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Emily Lamancusa (emlam)
QA Contact: Martin Renvoize (ashimema)
URL:
Keywords:
Depends on: 35402
Blocks:
  Show dependency treegraph
 
Reported: 2024-11-07 09:48 UTC by Ewa Gózd
Modified: 2024-12-19 09:17 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
24.11.00
Circulation function:


Attachments
Bug 38383: [DO NOT PUSH] Dbrev for testing (1.99 KB, patch)
2024-11-08 21:03 UTC, Emily Lamancusa (emlam)
Details | Diff | Splinter Review
Bug 38383: Improve font color contrast on web installer (2.71 KB, patch)
2024-11-08 21:03 UTC, Emily Lamancusa (emlam)
Details | Diff | Splinter Review
Bug 38383: [DO NOT PUSH] Dbrev for testing (2.04 KB, patch)
2024-11-10 18:20 UTC, David Nind
Details | Diff | Splinter Review
Bug 38383: Improve font color contrast on web installer (2.76 KB, patch)
2024-11-10 18:20 UTC, David Nind
Details | Diff | Splinter Review
Bug 38383: (follow-up) Undo global text-info change (1.52 KB, patch)
2024-11-12 13:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38383: [DO NOT PUSH] Dbrev for testing (2.10 KB, patch)
2024-11-12 13:51 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 38383: Improve font color contrast on web installer (2.83 KB, patch)
2024-11-12 13:51 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 38383: (follow-up) Undo global text-info change (1.59 KB, patch)
2024-11-12 13:51 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
claims tab (37.63 KB, image/png)
2024-11-18 16:39 UTC, Pedro Amorim
Details
administration (253.04 KB, image/png)
2024-11-18 17:00 UTC, Pedro Amorim
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ewa Gózd 2024-11-07 09:48:21 UTC
This might be another effect of the Bootstrap 5 upgrade. The font color of the say_info messages in the web installer are not well readable/lack contrast.
Comment 1 Katrin Fischer 2024-11-07 10:15:55 UTC
Sorry Ewa - logged you out now and logged back in as me!
Comment 2 Emily Lamancusa (emlam) 2024-11-08 21:03:01 UTC
Created attachment 174298 [details] [review]
Bug 38383: [DO NOT PUSH] Dbrev for testing
Comment 3 Emily Lamancusa (emlam) 2024-11-08 21:03:03 UTC
Created attachment 174299 [details] [review]
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
Comment 4 Emily Lamancusa (emlam) 2024-11-08 21:09:29 UTC
Taking a stab at this one...but feel free to submit an alternate patch, Owen (or whoever), if there's a better way to do this! say_warning and the raw database failure didn't meet WCAG accessbility standards for contrast either, so I addressed all three in the patch.

The highlight I used for say_warning breaks with the design a bit, but I felt it was the best choice, as it's virtually impossible to darken yellow enough to be accessible on a white background without losing the "yellow-ness" of it (see https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d for a good discussion on this).
Comment 5 David Nind 2024-11-10 18:17:36 UTC
This is wider than just the web installer, as this will affect all messages displayed in the staff interface.

For example, to see an Info message after the patch is applied go to Koha administration: "Share with Mana DB" and "Share anonymous usage statistics with the Koha community?".

This definitely needs fixing, and I've signed off.

However, should there be another bug to check the contrast for all the different message types? I'm not sure what the colours should be, whether the current colours are okay, and how it fits with the default staff interface and OPAC design.

Testing notes (using KTD)
1. To fix the web installer messages so that you can see the colors (instead of the span classes), apply bug 38385 first.
2. To change the version number go to Koha administration > System preferences > Local use > Version. For some reason, searching for local use system preferences does not work.
3. I used the WAVE web accessibility evaluation tool (https://wave.webaim.org/extension/) to check for contrast.
Comment 6 David Nind 2024-11-10 18:20:36 UTC
Created attachment 174313 [details] [review]
Bug 38383: [DO NOT PUSH] Dbrev for testing

Signed-off-by: David Nind <david@davidnind.com>
Comment 7 David Nind 2024-11-10 18:20:38 UTC
Created attachment 174314 [details] [review]
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 <david@davidnind.com>
Comment 8 Owen Leonard 2024-11-12 13:08:17 UTC
Although we do need to adjust the "info" color in the staff client--the alert background is too light IMO--I don't think this change is the right thing to do globally.

I would much prefer that we add an override in installer.scss.
Comment 9 Owen Leonard 2024-11-12 13:08:32 UTC
Created attachment 174409 [details] [review]
Bug 38383: (follow-up) Undo global text-info change

Adding an !important override to installer.scss isn't ideal but it's
an acceptable interim solution pending a more thorough review of how we
customize Bootstrap's text-* classes.
Comment 10 Martin Renvoize (ashimema) 2024-11-12 13:51:42 UTC
Created attachment 174411 [details] [review]
Bug 38383: [DO NOT PUSH] Dbrev for testing

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 11 Martin Renvoize (ashimema) 2024-11-12 13:51:45 UTC
Created attachment 174412 [details] [review]
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 <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 12 Martin Renvoize (ashimema) 2024-11-12 13:51:48 UTC
Created attachment 174413 [details] [review]
Bug 38383: (follow-up) Undo global text-info change

Adding an !important override to installer.scss isn't ideal but it's
an acceptable interim solution pending a more thorough review of how we
customize Bootstrap's text-* classes.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 13 Martin Renvoize (ashimema) 2024-11-12 13:52:17 UTC
Agree with distinct bug for this.. Passing QA on this one.
Comment 14 Katrin Fischer 2024-11-12 16:55:43 UTC
Pushed for 24.11!

Well done everyone, thank you!
Comment 15 Pedro Amorim 2024-11-18 15:50:18 UTC
Hi guys I'm using '.text-info' on a dev piece (bug 35604). When it was implemented a while ago (prior to bootstrap upgrade), it worked fine (good readable blue). Now it's barely visible.
The first patch solves the issue. The 2nd patch isolates the fix to the installer only, why?
Comment 16 Owen Leonard 2024-11-18 16:08:20 UTC
(In reply to Pedro Amorim from comment #15)
> The 2nd patch isolates the fix to the
> installer only, why?

Because we need to review how the '.*-info' tag is used elsewhere to make sure we don't break something. For example, when I tested the first version of this patch the "Claims" tab on the checkout page was unreadable.

When I was customizing variables for the Bootstrap 5 upgrade I did not test ALL of them because so many were unused. We need to make sure .text-info works well without making .text-bg-info unusable.
Comment 17 Pedro Amorim 2024-11-18 16:39:53 UTC
Created attachment 174738 [details]
claims tab

(In reply to Owen Leonard from comment #16)
> (In reply to Pedro Amorim from comment #15)
> > The 2nd patch isolates the fix to the
> > installer only, why?
> 
> Because we need to review how the '.*-info' tag is used elsewhere to make
> sure we don't break something. For example, when I tested the first version
> of this patch the "Claims" tab on the checkout page was unreadable.
> 
> When I was customizing variables for the Bootstrap 5 upgrade I did not test
> ALL of them because so many were unused. We need to make sure .text-info
> works well without making .text-bg-info unusable.

I feel like we need to file a follow-up bug with a test plan if this is the case.
From my testing, things ((alert-info boxes, etc) generally look better (more contrast) using:
$info:          $blue-500;

I don't see an issue on the claims tab, see attachment - other than the blue being darker - but I'm not familiar with that tab / feature and I'm possibly missing something.

I don't fully agree with isolating the fix to the installer because it's not fixing the root issue and is specific styling when this should ideally be global.
I think it'd be better if we adopt the correct color globally and then address individual issues as we stumble upon then, instead of having the *-info color be wrong everywhere except the installer.
Comment 18 Katrin Fischer 2024-11-18 16:41:04 UTC
(In reply to Pedro Amorim from comment #17)
> Created attachment 174738 [details]
> claims tab
> 
> (In reply to Owen Leonard from comment #16)
> > (In reply to Pedro Amorim from comment #15)
> > > The 2nd patch isolates the fix to the
> > > installer only, why?
> > 
> > Because we need to review how the '.*-info' tag is used elsewhere to make
> > sure we don't break something. For example, when I tested the first version
> > of this patch the "Claims" tab on the checkout page was unreadable.
> > 
> > When I was customizing variables for the Bootstrap 5 upgrade I did not test
> > ALL of them because so many were unused. We need to make sure .text-info
> > works well without making .text-bg-info unusable.
> 
> I feel like we need to file a follow-up bug with a test plan if this is the
> case.
> From my testing, things ((alert-info boxes, etc) generally look better (more
> contrast) using:
> $info:          $blue-500;
> 
> I don't see an issue on the claims tab, see attachment - other than the blue
> being darker - but I'm not familiar with that tab / feature and I'm possibly
> missing something.
> 
> I don't fully agree with isolating the fix to the installer because it's not
> fixing the root issue and is specific styling when this should ideally be
> global.
> I think it'd be better if we adopt the correct color globally and then
> address individual issues as we stumble upon then, instead of having the
> *-info color be wrong everywhere except the installer.

Not sure if that's the same spot. But I notice the Hea and ManaKB notes on the administration start page are also a bit pale.
Comment 19 Pedro Amorim 2024-11-18 17:00:55 UTC
Created attachment 174739 [details]
administration

(In reply to Katrin Fischer from comment #18)
> Not sure if that's the same spot. But I notice the Hea and ManaKB notes on
> the administration start page are also a bit pale.

Yes.
Comment 20 Pedro Amorim 2024-12-18 13:24:19 UTC
Owen, Katrin, should we open a bug about this blue info color?
Comment 21 David Nind 2024-12-18 19:21:09 UTC
(In reply to Pedro Amorim from comment #19)
> Created attachment 174739 [details]
> administration
> 
> (In reply to Katrin Fischer from comment #18)
> > Not sure if that's the same spot. But I notice the Hea and ManaKB notes on
> > the administration start page are also a bit pale.
> 
> Yes.

Bug 38519 fixes the colors and colour contrast for Bootstrap alerts and text background classes.
Comment 22 Pedro Amorim 2024-12-19 09:17:20 UTC
(In reply to David Nind from comment #21)
> Bug 38519 fixes the colors and colour contrast for Bootstrap alerts and text
> background classes.

Thanks David++
I wasn't aware of this one! Awesome!