Dark theme woes

Noted by on his Website.

I try to have limited reliance on CSS media queries in favor of being inclusive by as many people as possible by default, including fingerprinting-averse readers. Unfortunately, I have concluded that it is impossible to set one single website color palette that ticks all of the following boxes:

  • Familiar: colors aren’t particularly “novel” and don’t impose a learning curve. The difference between a visited and unvisited link should be clear enough from the get-go.
  • Friendly to various types of color blindness
  • Sufficient contrast for high-contrast needs
  • Autism-friendly, anxiety-friendly colors that do not trigger overstimulation or imply a warning.
  • Related: sensitive to cultural norms (is red actually a “warning” to everyone?).

I set a custom palette for my site’s dark theme. Since its contrast is a bit high, I made it respond to the prefers-contrast: less media query. Now, My 108% body text typically renders at 17.4 px, which should have an absolute value below 90 Lc on the APCA lookup table. I dropped my link contrast to 90 Lc and my body text to something slightly higher (article body text should have at least as much contrast as link text and buttons to avoid the “piercing glare” effect interactive elements can have; I should add that to my website best practices article sometime).


Webmen­tions

This site supports Webmentions, a backlink-based alternative to traditional comment forms.

Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.

Webmentions received for this post will appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. Check the Wayback Machine if any links are broken.

Toggle Webmentions
Nothing here
This post does not have any approved Webmentions yet.

Feel free to contact me directly with feedback; here’s my contact info