Fix color contrast issues from #1450

[akegan]

In #1450, we added automated a11y testing to ui-components. The tests raised some color contrast issues. Rather than addressing them in that PR, we're creating this follow-up ticket to address them holistically.

as @slowbot mentioned, many of them are due to issues of contrast with the default link color on backgrounds. In DAHLIA the workaround was to darken links on backgrounds, so we could probably do something similar here.

If we decide not to fix a11y in specific cases, then we can disable the check for individual stories as demonstrated in this inaccessible button story

Once all of the color contrast issues have been fixed or individually suppressed, we can turn the automatic checks back on by re-enabling color contrast in the config

Issues can be found by going through the accessibility tabs for components or by running hte a11y tests locally with the color-contrast rule enabled. Here's a list of components that currently have errors.

Blocks/Application Status Item

• App Status Item Submitted (link on gray background)

Blocks/Housing Counselor (language pill)

• With Only Required Fields
• With Multiple Languages
• With All Fields

Listing Sidebar/Application Section

• Due Soon (Element has insufficient color contrast of 4.31, not showing up in the tab for some reason)

Listing Sidebar/Apply (text on gray background)

• Hard Application Deadline
• Accepts Postmarked Applications
• Shows Multiple Download UR Ls
• Link Directly To Internal Application
• Link To Internal Application And Downloads
• Link Directly To External Application

Notifications/Alert Notice (colored text on gray background)

• Alert Notice Alert
• Alert Notice Alert Inverted
• Alert Notice Notice
• Alert Notice Notice Inverted
• Alert Notice Success
• Alert Notice Success Inverted

Sections/Info Card Grid

• Three Cards

Text/Tag

• Pill Colors (accent cool dark)
• Pill Listings (results example)