[bug] Inline links not sufficiently distinguishable from surrounding text in dark contexts

[hellogreg]

Describe the bug

By default, inline links in dark contexts are 1) not underlined (except when hovered/focused), and 2) do not have 3:1 color contrast from their surrounding paragraph text.

This is a failure of WCAG criterion 1.4.1: Use of color.

Frank Taylor first brought this up in the RHDS chat, resulting from this Red Hat Jira issue.

Which Component?

n/a

Steps to reproduce

1. Go to a link using one of the dark mode contexts, like the Red Hat Integration page.
2. Scroll to a section of the page with the dark mode context until you see some text with inline links, like this:
3. Inspect the link text and the regular text and do a color contrast check (WebAIM has an online checker). The regular text is #ffffff, and the link text is #73bcf7, for a contrast of 2.04:1. This is below the required 3:1 contrast ratio.

Expected behaviour

The link text should either 1) be underlined by default (pre-hover/focus), or 2) have 3:1 color contrast from the surrounding text (current fail) and also have a visual enhancement, like an underline, upon hover and focus (current pass). All normal-sized text must still meet or exceed 4.5:1 contrast from the background, too.

Screenshots

No response

Element HTML

No response

Operating System (OS)

macOS

Browser

Chrome

More browser information

Chrome 110

Additional Info

The tricky part of this may not be just a matter of picking a link color that contrasts with the non-link text. But it has to do so while keeping its sufficient color contrast against all backgrounds, too! The "dark" context could be especially tough.

Honestly, the easiest thing to do may just be to underline the inline links--at least in dark contexts.

[zeroedin]

This could be represented in docs if we aren't changing the color value with the components/link#interaction-states

Thoughts @coreyvickery?

Psuedo code example: (implementation would differ based on inside a component vs on general page)

a {
  color: var(--_link-color, var(--rh-color-accent-base-on-light, #0066cc));
  text-decoration: var(--_link-decoration, none);
}

.dark a {
  --_link-color: var(--rh-color-accent-base-on-dark, #73bcf7);
  --_link-decoration: underline;
}

[bennypowers]

Do we need to fix this in tokens prior to 1.0? See also #869

[coreyvickery]

@bennypowers No, something so small doesn't need to hold up 1.0.

@zeroedin Makes sense to me, Marionne or I can update the documentation when we're ready to jump back into working on ux dot again.

@hellogreg We'll probably go with adding an underline for dark theme as Steven outlined.