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:

6 Hidden Gems In The JavaScript API You Should Be Using

6 hidden gems in the JavaScript API you should be using

Explore underrated JavaScript APIs like `structuredClone` and `AbortController` that let you build dynamic, performant, and user-friendly apps.

Rahul Padalkar
Apr 28, 2025 ⋅ 10 min read
next js environmental variables

How to configure Next.js environmental variables

Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.

Joseph Mawa
Apr 25, 2025 ⋅ 9 min read
useActionState in React

useActionState in React: A practical guide with examples

Discover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.

Rishi Purwar
Apr 25, 2025 ⋅ 5 min read
three js vs babylon js

Three.js vs. Babylon.js: Which is better for 3D web development?

Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.

Elijah Asaolu
Apr 24, 2025 ⋅ 7 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