Default Hyperlink style states are not accessible (workaround)

Hi everyone. I have submitted a case reporting this issue to Articulate (#02914165), but just wanted to inform everyone of the issue and share a workaround on how to make your links accessible.

Displaying Hyperlink Style dialog: Select a word or phrase to link. On the Home tab, in the Font section, select the style drop-down menu to the left of the font style drop-down. Select Hyperlink and Modify.

Issues:

WCAG standards (1.4.1 Use of Color) require that a visual cue other than color be used to convey meaning. This means that, for hyperlinks, color alone is not sufficient to distinguish different link states from each other. You need a non-color visual cue, such as formatting, to identify different hyperlink states from each other for users who are color blind. Unfortunately, Articulate offers very limited choices in non-color visual cues. The Decoration drop-down offers only one non-color option: Underline. (Highlight is based on color and, therefore, not reliable as a non-color option unless you use it to invert text/background colors.) My case to Articulate requests that they expand the Decoration options to include a broader range of formatting.

Additionally, the default SL settings for hyperlink states are not compliant. In a brand new project (with the default Office theme selected in the Design tab), the hyperlink state defaults are blue #0000FF for normal, lighter blue text #6666FF for hover/active, and purple #800080 for visited, and underline is applied to all four states. The same non-color visual cue (underline) is applied to all four states. Assuming black text on white background is used in the course, fully compliant hyperlinks would need to use a very narrow set of mid-rangy colors set on at least the normal and visited states to adequately distinguish themselves from both non-link text (black) and still have enough contrast against the background (white). Additionally, the mid-rangy colors, by definition, are not going to have enough contrast against each other, which is why WCAG requires a non-color visual cue. The default blue and purple, in particular, have a contrast ratio of only 1.09:1 and are poor color choices if distinct non-color visual cues are not used. This is because a learner with deuteranopia (red-green color blindness), which is the most common form of color blindness, will perceive purple as a shade of blue, making the normal and visited link states indistinguishable from each other without a non-color visual cue.

Workaround: There is a workaround that can result in accessible hyperlink states. This something I'm recommending these settings to my team. The colors are loosely based on a WebAIM article on this topic, and have high contrast against a white background and contrast just over 3:1 compared to surrounding black text. The text/background inversion idea for hover/active states came from a third-party accessibility advisor I have consulted.

1. Hyperlinks, regardless of state, have bold (or bold and italics, if bold is used in non-link contexts) applied to distinguish them from non-link text. To do this, manually apply that formatting to the link text, and then highlight it. On the Home tab, in the Font section, select the style drop-down menu to the left of the font style drop-down. Select Hyperlink and Update Style from Selection. This applies that special formatting to all of the hyperlink states.
2. Each hyperlink state is further distinguished from each other thus:

Normal -- Text color: Blue #3344DD ... Decoration: Underline
Hover and Active -- Text color: White #FFFFFF ... Decoration: Highlight box, Blue #3344DD
Visited -- Red #B8000F ... Decoration: None

Distinguishing hover and active from each other is less important because these states appear after the user has already identified a link and taken action on it.

Minus the underline, the visited link will be distinguishable from the surrounding non-link text, even to a learner with deuteranopia, because of the special formatting (bold, bold/italic, whatever) applied to all hyperlink states in the first step.

I hope this helps somebody!
Lisa

Here are the links to the resources I referenced above:

https://www.w3.org/WAI/WCAG21/quickref/#use-of-color
https://webaim.org/blog/wcag-2-0-and-link-colors/
https://www.color-blindness.com/deuteranopia-red-green-color-blindness/