Neutral Link: Use `text-default` on all states

[Febakke]

We should consider doing something about our neutral links. There are two issues:

1. Our neutral scale often gives of a "deactivated" feel when using text-subtle This affects more then just links. But with links we have decided to break our pattern of using the same color steps for different data-color settings. This should be handled in the color scale itself

• Create issue to look into this Lets take a look at our neutral color scale #4543

2. A quick fix is to use only text-default on neutral links. We already break the pattern when it comes to using same steps. The downside is that we will not have any color change on hover. But the underline will still be "thicker" so there is a visual change. The upside is that it wont look "deactivated" when hovering.

Here is an example

[unekinn]

In Udir we use neutral as the default color for links, so pretty much every link is neutral-colored. You can see it in action on udir.no.

There was quite extensive testing on real users and we didn't hear anything about the hover state being misinterpreted as disabled.

A quick fix is to use only text-default on neutral links. [...] The downside is that we will not have any color change on hover. But the underline will still be "thicker" so there is a visual change.

While this is true for the Link component out of the box, it isn't necessarily true for all real world usages. See for example the navigation menu on the left in https://designsystemet.no/no/fundamentals — which currently has no visible change on hover 😱 — or Udir.no's header menu, both of which have no underline. Although, both of these should maybe add an underline on hover?

I don't think it's a hard rule, but G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them seems to suggest that we should provide an "additional visual cue" (e.g. showing the underline) also on hover:

This technique describes a way to provide additional cues on hover and focus so that users who may have difficulty perceiving color differences or have low vision can identify them.

WebAIM actually says this is a rule:

WCAG 2.0 has 2 additional requirements for body text links that are not underlined by default:

The link text must have a 3:1 contrast ratio from the surrounding non-link text.
The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

...but I can't find the verbiage "non-color designator" anywhere in WCAG, and every article using the same sentence in context of WCAG points back to WebAIM 😕

Side note: this is also the case for link cards, they only communicate hover state through color change. I see the link cards on https://designsystemet.no/no/fundamentals have an additional border change on hover, maybe that should be built in to the Card component?

[Febakke]

Thank you! This is great feedback. I am thinking of closing this issue as it is not fixing the issue, just "hiding" it a little better. The real issue is in the duplicity of our text-subtle colors. Semanticly it means "toned down" but in most cases it is perceived as "colorful" or "active". It only really is semanticly correct for our neutral scale. And we have doubled down on this problem, because we use it in a more "active" way. For instance in our buttons or links. To really fix it I think we would have to do some breaking changes. So for now maybe #4458 would be enough.

My understanding with G183 is that is targeting links inside textblocks. If you dont use an underline the color needs to 3:1 contrast to the surrounding text. But when I reread it now it does not say that explicitly. I think we should look into adding an underline or other visual change on hover state. #4561

Cards are difficult, as they are so connected to the brand. Maybe look into if we can do some small changes to the cards out of the box and add something about this in our documentation?