css.properties.accent-color - Partial support in Safari #16367
Description
What type of issue is this?
Incorrect support data (ex. Chrome says "86" but support was added in "40")
What information was incorrect, unhelpful, or incomplete?
The support for accent-color is incomplete in Safari. The spec says:
The UA must maintain contrast for legibility of the control, and in order to do so may adjust the luminance or brightness of the color or make color substitutions in other parts of the control (e.g. switching an overlaid glyph from using color to using background-color).
and it seems that the Safari browser doesn't adjust some form controls for a better contrast.
What browsers does this problem apply to, if applicable?
Safari
What did you expect to see?
On a Chromium browser, you can see that the tick and the dot in the checkbox and radio controls are automatically adjusted to have a better contrast:
but on Safari, with a bright accent color, I still get white ticks and dots:
Did you test this? If so, how?
I wrote the following piece of code and opened it in a Chromium browser and Safari:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: #333; accent-color: #ef0; transform: scale(5); transform-origin: 0 0;">
<input type="checkbox" checked>
<input type="radio" checked>
</body>
</html>Chromium browser: Vivaldi | 5.2.2623.46 (Stable channel) (arm64)
Safari: Version 15.4 (17613.1.17.1.13)
But perhaps a better test would be that one here: https://accent-color.glitch.me
Here's a screenshot from Safari:
As you can see, the accent color sometimes is completely different than requested.
Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
I don't know, if that's relevant, but here is a ticket for a general feature on webkit.org https://bugs.webkit.org/show_bug.cgi?id=227587
There's also this issue here to add the support for Safari #13301 but as you can see above, the implementation is only partial.
Do you have anything more you want to share?
No response
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color