Insufficient color contrast on FA request buttons #9
Description
The "Select" and "Selected" buttons in the finding aid viewer do not have sufficient color contrast.
Here is the failure summary for the "Select" button from DubBot:
Element has insufficient color contrast of 1.94 (foreground color: #ffffff, background color: #f0ad4e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1.
The "Selected" state of the buttons do not have sufficient color contrast either. The element has a color contrast ratio of 3.41:1 with foreground color: #ffffff, and background color: #449D44.
Example
https://exploreuk.uky.edu/fa/findingaid/?id=xt7xks6j2258
Further Discussion
- There needs to be a larger conversation around this component, if it should be a button or if a different component (or more descriptive button text) is better suited to serve the users needs.
- If we want to keep the buttons on brand but also as close as possible to what they currently are, we could use the Default Link Button in Sunset (#FFA360) or Goldenrod (#FFDC00) for the "Select" state and River Green (#4CBCC0) for the "selected" state.
https://patternlab.uky.edu/?p=viewall-atoms-buttons
Suggested Fix
- Use the Limestone Default Ghost Button in Wildcat Blue (#0033a0) as the "select" state
- Use the Limestone Default Link Button in Midnight (#041E42) as the "selected" state