LP1991562 Accessible link and button colors in Angular staff interface
authorStephanie Leary <stephanie.leary@equinoxOLI.org>
Tue, 1 Nov 2022 16:33:04 +0000 (11:33 -0500)
committerGalen Charlton <gmc@equinoxOLI.org>
Wed, 1 Mar 2023 16:45:22 +0000 (11:45 -0500)
commit1585b53dd9b421b3be6cb87059cce5e5774cf723
tree9e407b4826a293859b5c2d691eb4f1cb8c0dc642
parent6d6fff80713ff119b501cfe3c485684163bb3e3c
LP1991562 Accessible link and button colors in Angular staff interface

Several of the default colors in Bootstrap 4 do not meet WCAG Level AA
accessibility requirements when used for links (#007bff blue) or button
backgrounds with white text (blue/primary, #28a745 green/success, and

Additionally, while the yellow/warning color (#ffc107) does pass the
contrast check with black text, the button itself does not pass the
graphical object contrast check against white or #f7f7f7 page/tab
backgrounds, meaning people with some forms of color blindness can't see
the shape of the button.

This patch updates link and button colors using Bootstrap 5 tints
(https://getbootstrap.com/docs/5.0/customize/color/#all-colors). While
slightly lighter custom colors could be used to pass the contrast
checks, sticking to the Bootstrap 5 color scheme should make it easier
for us to stay consistent as new components are added in the future.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Shula Link <slink@gchrl.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
Open-ILS/src/eg2/src/app/staff/catalog/result/pagination.component.css
Open-ILS/src/eg2/src/styles.css