Bug 235328

Summary: `-webkit-link` color does not adjust to `color-scheme: light dark`
Product: WebKit Reporter: Sam Henri-Gold <sam>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Minor CC: akeerthi, ntim, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: macOS 12   
Attachments:
Description Flags
Safari's rendering vs MS Edge Chromium's rendering. none

Sam Henri-Gold
Reported 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>
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
View All Add attachment proposed patch, testcase, etc.
Aditya Keerthi
Comment 1 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.
Radar WebKit Bug Importer
Comment 2 2022-01-18 13:42:17 PST
<rdar://problem/87733212>
Aditya Keerthi
Comment 3 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.
Sam Henri-Gold
Comment 4 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.
Tim Nguyen (:ntim)
Comment 5 2022-03-28 12:11:05 PDT
*** This bug has been marked as a duplicate of bug 209851 ***
Note You need to log in before you can comment on or make changes to this bug.