Accessibility fixes to "reliance on color"

[lwrubel]

See comments from @maxs regarding:

• links in alert messages should be underlined without hover (and have 3:1 contrast with rest of body text ideally)
• breadcrumbs that are links should be underlined
• links in the seed list table should be underlined

Not from Max, but related to color:

• the "i" button should have the same blue applied as to buttons (it's the bootstrap default now). Making it larger could help too.

Finally, a remaining issue not with color, but on the collection_detail page:

• hint_id_history_note not unique id on collection_detail page. It's used twice, in the modals for adding a history note when turning off the collection and for deactivating the collection .

[lwrubel]

@maxstarkenburg Could you confirm I've described these issues and their solutions correctly?

[maxstarkenburg]

Mostly right, but I would say that 4.5:1 would be the minimum contrast for text that size, and that the examples I put in the other ticket were just samples, not really an exhaustive list. Other places, for example, I'd probably underline links would be the "View all __ harvests" link problably, the "contact us" link on the Profile page, the "Forgot your password?" link on the Change Password page, pretty much all the links in the <main> of the login page, etc. It could be that it's easier to do a blanket main a { text-decoration: underline; } (or maybe even just a {}?) and then override any specific cases where you'd prefer it not be underlined (a.nav-link, a.collapse-toggle, etc.)

[lwrubel]

Sorry, the 3:1 was the link:body text ratio I was seeing in SiteImprove, which would be in addition to 4.5:1 contrast with the background. But it sounds like we should be really underlining as much as possible and not rely on contrast at all. I'll look at what it's like when underlining by default.

[maxstarkenburg]

The text contrast would be independent of the "rely on color"/underlining question (the contrast guidelines apply to any text, link or not). Though FWIW, I'm seeing the blue #2971A7 link color as having 4.66:1 and the gray #333333 text as having 11.27:1 against the yellow background #fcf2cf of the warning (though I don't recall if there are other kinds of alerts with other-than-yellow backgrounds that might also need checking?)