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:46:06 +0000 (11:46 -0500)
commit4e891f2233bde5b0626fcd99434ab91c9d369a80
treec6af22758022cfaf9d88546c57212f2d87303fb4
parentf652cb7ee6258c5a0222c2a9254a4eada9d24d1a
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