color-scheme dark mode survey

Help
,
1

Hi there!

I’m looking for some feedback to help me figure out color-scheme and default browser colors. If anyone feels like going to my website and then answering a few questions, I’d really appreciate it! But no worries if not. :slightly_smiling_face:

Questions

  • What’s your OS and your web browser?
  • If your system is set to dark mode, is my website in a dark mode?
  • If you can see a dark mode, what colors are the background, visited links, and unvisited links? (Ideally hex codes, but names or a screenshot also work.)

Background

As I’m developing my website, I’ve decided to work on mainly content and structure first. But I did add a little CSS, including color-scheme:

:root {
    color-scheme: dark light;
}

In theory, this would allow browsers to enable a dark mode based on browser color defaults if the user wants dark mode. Dark mode might not be supported in all browsers, but I figured that if it wasn’t supported, it would just show up as the default light colors. I did leave a disclaimer in my accessibility page saying that default browser colors should be accessible, but if they’re not to let me know.

Well, someone let me know that the link colors in dark mode weren’t accessible. Bummer.

So I’m hoping folks can help me figure out in what scenarios color-scheme creates inaccessible color combos. My suspicion is that it’s Safari/WebKit, since in Firefox and Chrome (on Windows 10) I get accessible default link colors:

Firefox Link Colors

  • Background: #1C1B22
  • Link: #8C8CFF (AA contrast ratio)
  • Visited Link: #FFADFF (AAA contrast ratio)

Chrome Link Colors

  • Background: #121212
  • Link: #9E9EFF (AAA contrast ratio)
  • Visited Link: #D0ADF0 (AAA contrast ratio)

How I’ll Use This Info

I intend to fix the issue if it’s reproducible, such as relenting and using prefers-color-scheme and setting colors myself. I may also write a blog post. And if it does seem to be a consistent issue with a particular browser, I’ll try to find the bug report and maybe add my 2¢. (I found a lot of potentially related bug reports, but some of them seem to say they’ve already been resolved? Confusing.)

Thanks for reading!

2 Likes
2

macOS, Firefox

Yes, and yes.

I assume you meant unvisited links? Light purple for visited and dark purple for un-clicked

3

Thanks! And yeah, I meant visited and unvisited, I’ll edit. :sweat_smile:

That sounds like it matches my experience with Firefox on Windows! So I wonder if it is in fact a Safari thing…

1 Like
4

After getting more info, it sounds like it’s an issue with older Safari versions - if I’ve managed to find the right bug report, it was fixed last fall.

I’m still going to work on a fix, since I can’t rely on people having an up-to-date browser. But I guess I probably don’t need a survey. :sweat_smile:

3 Likes