Contrast and identity colour changes for links, buttons, text

[jvine]

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.)

• [x] Change link styling to:

  a {
  border-bottom: 1px solid transparent;
  color: #006CB8;
  text-decoration: none;
  }
  a:hover, a:focus, a:active {
  border-bottom: 1px solid #00548f;
  color: #00548f;
  text-decoration: none;
  }

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.

• [x] Use the link text colour color: #006CB8; as the background, and the hover colour color: #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:1

Obvious 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."

• [x] Change text colour to #ffffff on #009b76 background, with the understanding that it will continue to be reported as an error.

[jvine]

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.

[cbeer]

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.

[dbranchini]

Addressed by the new designs and design system. Please note the following:

• Links embedded or surrounded by text should have a dotted underline by default and a solid underline on hover. See PURL and SearchWorks. Note the link text should remain blue on hover (different than PURL today).
• Buttons from design system are contrast compliant.

[jcoyne]

@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

[dbranchini]

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:

https://www.figma.com/design/FE5WZAvHf2e97GJeOP3mH6/Stanford-Styles?node-id=124-2&t=0IbtRiNhfhFvmUgt-4

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

[jcoyne]

su-underline is in the component library now https://github.com/sul-dlss/component-library/commit/03299607598b405d7142a02beab717754e83d713