Steps to reproduce:

1. Enable the high contrast theme on Windows.
2. Open The Verge main page.
3. Observe that the the embedded hyperlinks in the text on the left are indistinguishable from the plain text.

Actual results:

Indistinguishable links

Expected results:

Links should be distinguishable from text

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Since it may be be hard to find where the links are hidden in the text, you can visit the site with Chrome while still keeping the high contrast theme enabled to see where they are.

Here's a screenshot of the issue on Linux at https://www.theverge.com/2024/4/23/24137653/amazon-makes-checking-for-its-ai-watermarks-available-for-all-bedrock-users , comparing Chrome to Firefox, with forced colors mode off vs on.

Specifically, this screenshot shows:
Top-left: Chrome 126dev, standard config
Top-right: Chrome 126dev, with forced colors emulation turned on in DevTools
Bottom-left: Firefox 127 Nightly, standard config
Bottom-right: Firefox 127 Nightly, forced colors turned on ("Override the colors specified by the page with your selections")

In Firefox 127 Nightly with forced colors (bottom right), the link in the article (the phrase can check if an image) is indistinguishable from the surrounding text.

This seems to be because the Verge explicitly styles links to have the same color and decoration as the body text with a{color:inherit;text-decoration:inherit} (in the "tailwindcss v3.3.3" section of this stylesheet). They then try to make these links distinguishable again by adding a fake underline with a box-shadow, here:

.\[\&_a\]\:shadow-underline-black a,
.\[\&_a\]\:shadow-underline-blurple a {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

(and one of those awkward-looking shadow-underline classes is present on the parent in this case, so that rule matches the a element.)

But box-shadow doesn't show up in forced colors mode. So we're left following their instructions to make the a element inherit the regular color and (lack-of) text-decoration, which makes it indistinguishable.

This is arguably a site bug as I think Emilio was alluding to in bug 1892053 comment 5 (the site being not set up properly to render nicely in forced colors mode); though it seems it only affects us at the moment, until/unless other browsers match our behavior (and the spec?) for forced colors mode. (Chromium at least doesn't seem to currently match us, as I observed in bug 1892053 comment 7.)

In any case: I think we should morph this into a WebCompat bug, related to bug 1892053 as the underlying Firefox bug (or at least behavior-difference, for now at least).

It presumably affects other sites using tailwindcss v3.3.3 or similar, too... The reporter of this bug and bug 1892053 mentioned Tom's Hardware as being another affected site (bug 1892053 comment 3), though I'm not seeing any issues on Tom's Hardware (links in articles are my chosen link-color there), and unfortunately the user's account seems to have been deactivated so we can't really follow up on that.