Closed jvine closed 2 months ago
Buttons and links are now using the specified hover color #00548f
as their default colour, and an even darker colour for hover state.
The default colour is #006CB8
, hover is #00548f
. These are Stanford identity colours - upstream may not care.
And I didn't specify this detail for the button - apologies - but the border colour should be the same as the background colour in both default and hover states. Currently the border is a slightly different colour.
Yep, I transposed the two colors...and we were importing bootstrap twice which helpfully "fixed" the visual problem by darkening the primary color for us.
Addressed by the new designs and design system. Please note the following:
@dbranchini should we add a dotted underline link style to the component library?
This is currently called the .su-underline
in purl:
https://github.com/sul-dlss/purl/blob/main/app/assets/stylesheets/application.css#L81-L85
Yes, dotted underline on links embedded in text is correct. (Figma does not allow us to do this well or accurately.) DLUX team met about this and we decided we like the style of the dots in PURL, but here's the official color guidelines to adjust for accessibility:
Default - text link is Digital Blue #006CB8 with a dotted underline that's Black 60 #767674 (anything lighter than this is an accessibility violation) Hover - text link is Digital Blue Dark #00548F with a solid underline that's also Digital Blue Dark #00548F - text link is Digital Blue Dark #00548F with a solid underline that's also Digital Blue Dark #00548F
su-underline
is in the component library now https://github.com/sul-dlss/component-library/commit/03299607598b405d7142a02beab717754e83d713
1. Link colour is too similar to the body text colour.
There's no visual distinction of links until they are hovered; and then the hover state is slightly different from our other assets. (Instead of underline, we use border-bottom for better readability.)
Before
After
Note that the bottom border in hover state won't appear on the titles in search results until that display is fixed. #687 Link text colour and border should also apply to
.page-link
, but not to other button-styled links.2. The Bootstrap blue button does not provide enough contrast.
color: #006CB8;
as the background, and the hover colourcolor: #00548f;
for ... hover.Before: Contrast ratio 3.97:1
After: Contrast ratio 5.47:1
3. Selected facet header does not provide enough contrast
This is the weirdest thing.
#212529
text on#009b76
background has a contrast ratio of 4.37:1. Target is 4.5:1Obvious choice would be to switch the text to white
Clearly better, right? But the contrast ratio is now 3.52:1.
I tested both versions with a vision simulator, and with every type of colour-blindness and degree of contrast loss, the white is more perceptible. Tried a real life test with a colour-blind low-vision human with same result: "The white letters leap out from the dark background."
#ffffff
on#009b76
background, with the understanding that it will continue to be reported as an error.