2023-10-25
3257
#accessibility#css#vanilla javascript
Cristian Diaz
180080
107
Oct 25, 2023 ⋅ 11 min read

Creating contrast themes with CSS prefers-contrast and JavaScript

Cristian Diaz Cristian is a frontend developer from Colombia. He enjoys writing about what he learns and is focusing his career on helping to make web content more accessible to everyone. His main areas of expertise are HTML, CSS, and web accessibility. You can reach Cristian on Bluesky: https://bsky.app/profile/itscrisdiaz.com.

Recent posts:

8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 ⋅ 16 min read
how to truncate text in CSS (single and multi-line)

How to truncate text in CSS (single and multi-line)

Learn how to truncate text with three dots in CSS, and use two reliable CSS text truncation techniques while covering single-line and multi-line truncations.

Chinedu Okere
Jun 20, 2025 ⋅ 10 min read
how to use the Interest Invoker API for better, more accessible UX

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

Emmanuel John
Jun 19, 2025 ⋅ 7 min read
How To Build And Deploy A Web App With Bolt.new

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

Isaac Okoro
Jun 19, 2025 ⋅ 8 min read
View all posts

One Reply to "Creating contrast themes with CSS prefers-contrast and JavaScript"

  1. Hi Cristian, thanks for your interesting article. You write that the media query “prefers-contrast” is quite young. This fact means that this media query still has room for improvement. For example, this media query does not take into account that there are both light and dark contrast designs (Windows 11: “Desert” and “Night sky”). It would therefore be better if the media query distinguished between a light and a dark contrast design: “prefers-more-contrast: dark” and “prefers-more-contrast: light”. This proposed solution follows the “prefers-color-scheme” logic. I’m not a fan of too much JavaScript because the complexity and therefore the maintenance effort for a website increases very quickly. Are you aware of any ongoing discussions on this topic? If so, where can I find them?

Leave a Reply