Insufficient contrast between links and surrounding text

[cimaja]

Environment Information

• Package version(s): 7.155.3
• Browser and OS versions: Edge(chromium) 85.0.564.63, Windows 10 Enterprise 10.0.19042 Build 19042

Describe the issue:

Links should have contrast ratio of 3:1 with surrounding text and have a non-color visual distinction for colorblind people (see W3C for more details).

Find below some Link/Text contrast ratios for various themes:

• With Default theme, contrast is 2.86:1
• With Power Apps theme, contrast is 1.41:1
• With Power Automate theme, contrast is 2.68:1

Please provide a reproduction of the issue in a codepen:

https://codepen.io/cimaja/pen/yLapMXB alternatively the issue is also visible on the Fluent demo website.

Actual behavior:

Fluent links use only color to differentiate links from surrounding text.

Expected behavior:

Fluent links should be underlined to help differentiate links from normal text for color-blind people. Optionally, links color should have a contrast ratio greater than 3:1 with surrounding text.

Documentation describing expected behavior

Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

[ecraig12345]

Talked about this with our designers, and the proposed solution (which aligns with an upcoming design refresh) is to add a new prop determining whether to use an underline or not. The terms used for this in the design refresh will be "subtle" (no underline) and "inline" (underline).

This is my proposal for the API but open to suggestions from @khmakoto (who's worked on Link convergence) or others.

/**
 * Determines which styling variant to use.
 * `inline` means the link will be underlined, suitable for use within text.
 * `subtle` means the link won't be underlined, suitable for standalone use.
 * 
 * The default is currently `subtle` to match existing behavior, but will likely change to 
 * `inline` in a future release.
 * @default 'subtle'
 */
variant?: 'inline' | 'subtle';

[ecraig12345]

Or I suppose a simpler solution would be to just do a boolean prop underlined.