The reason the underline is there, instead of just using color alone, is to ensure there is a visual indicator of a link because of colorblindness. I’m confused about why you mention your monitor type and that you’re not colorblind yourself, feel free to elaborate there I just don’t see the connection, but rest assured that I did use my human eyeballs.

Regardless of what contrast checkers or calculations may say, there’s no substitute for human eyeballs on the work.

I did some quick experiments seeing what mix ratio with transparency is needed to get a 3:1 contrast ratio against the background, as per SC 1.4.11.

The background is #FFF3E0.
The blue underline mixed 53% with transparency is #8781E7, resulting in a contrast of 3.02:1.
But the red underline mixed 53% with transparency is #F39C90, resulting in a contrast of 1.92:1.

In other words, we really just need to experiment to see which color is sufficient. It would be great if there was a built-in CSS function that determined the color that obtains a minimum contrast against another color.

(Personally, I find typical link underlines really distracting from me just trying to read the text. I think reducing underlines’ contrast can help cognitive accessibility, as long as they still have sufficient contrast against the background.)

Ironically, there’s an ad on this page at the time of my reading that has a black background, hyperlink in red that becomes black on hover. Truly awful. I thought maybe it was a good example of what not to do 🙂

The problem is the blue used in the codepen has a 2.23:1 contrast ratio with surrounding text and not a 3:1. This means some other indicator is needed. Underline, bolding, boxing, highlighting, etc. But they all still need a 3:1 contrast level.

APCA accounts for opacity, but using it alone won’t give you passing WCAG colors.

Actually it’s 1.4.11 Non-Text Contrast (not 1.4.3, that’s for text content).

The calculation would be based on the rendered result (including the result of opacity blending), comparing that with adjacent colors (which in this case would be the background). If that has a 3:1 ratio, then it’s fine.

If you’re worried about the “in your face” nature of links within text (and my feeling is it isn’t a problem), another approach is to change the underline style to, say, dotted.

Then you could technically pass 1.4.3 on colour contrast, but the underline might not be that discernible.

While I agree that a strong underline would be best, the WCAG recommendations state that it is sufficient if the link text has at least a 3:1 contrast with the surrounding text. Blue works best, since it it the least affected by color blindness. When there are additional style differences on hover and focus, the solution presented here should satisfy the success criteria!

https://www.w3.org/WAI/WCAG21/Understanding/use-of-color
https://www.w3.org/WAI/WCAG21/Techniques/general/G183

This is a good overview of the issue, including color contrast considerationa (and why color alone plus change on hover isn’t recommended): https://adrianroselli.com/2016/06/on-link-underlines.html