Bug 235328 - `-webkit-link` color does not adjust to `color-scheme: light dark`
Summary: `-webkit-link` color does not adjust to `color-scheme: light dark`
Status: RESOLVED DUPLICATE of bug 209851
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: All macOS 12
: P2 Minor
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-01-18 12:47 PST by Sam Henri-Gold
Modified: 2022-03-28 12:11 PDT (History)
4 users (show)

See Also:


Attachments
Safari's rendering vs MS Edge Chromium's rendering. (87.93 KB, image/png)
2022-01-18 12:47 PST, Sam Henri-Gold
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Sam Henri-Gold 2022-01-18 12:47:27 PST
Created attachment 449411 [details]
Safari's rendering vs MS Edge Chromium's rendering.

When a document is set to use `color-scheme: light dark` and an anchor color is not set, the default link color has poor contrast on a dark background.

I don't know if I'm able to add two attachments, here's the document I used to verify this bug:

<html>
<head>
  <style>
    :root { color-scheme: light dark; }
  </style>
</head>

<body>
  <h1>Non-link text</h1>
  <a href="##">Non-visited link</a>
  <br>
  <a href="">Visited link</a>
</body>
</html>
Comment 1 Aditya Keerthi 2022-01-18 13:31:34 PST
Thanks for the report!

Did some investigation – the link color is currently fixed to rgb(0, 0, 238) in RenderTheme.cpp.

I think we should fix this by always using the system (semantic) color on macOS and iOS, which will adapt to dark mode.

There's an old comment that says "Web views that want system appearance get the system version of link colors, which differ from the HTML spec." But I was unable to find a spec that restricts the value of the link color, so it should be fine to always use the system color.
Comment 2 Radar WebKit Bug Importer 2022-01-18 13:42:17 PST
<rdar://problem/87733212>
Comment 3 Aditya Keerthi 2022-01-18 14:02:29 PST
Simon found https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3, which specifies the default link color in light mode. Consequently, we cannot use the system color to fix this issue, since the colors may differ.

Instead, I think we can use #9E9EFF as the default dark-mode link color, which is what Chrome and Firefox already use.

And we'll need a separate bug to track correctness for CSS LinkColor: https://bugs.webkit.org/show_bug.cgi?id=235332.
Comment 4 Sam Henri-Gold 2022-01-18 14:15:50 PST
I quite like #9E9EFF. However, the visited link color Chrome uses (#D0ADF0) ends up looking very similar to non-visited links. I'd suggest #CA81EF or similar for the dark visited link color; there's greater contrast while remaining AAA-compliant.
Comment 5 Tim Nguyen (:ntim) 2022-03-28 12:11:05 PDT

*** This bug has been marked as a duplicate of bug 209851 ***