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:

designing llm first products

Designing LLM-first products, not just features

Everyone’s building chat-first AI products. And most of them suck. Here’s how to break the mold and ship LLM-native software that actually solves problems.

Rosario De Chiara
May 30, 2025 ⋅ 4 min read
Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 ⋅ 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 ⋅ 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 ⋅ 11 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