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.

Recent posts:

Exploring The Aha Stack: Astro, Htmx, Alpine — A Complete Tutorial With A Demo Project And Comparison To Other Stacks

Exploring the AHA stack: Tutorial, demo, and comparison

The AHA stack — Astro, htmx, and Alpine — is a solid web development stack for smaller apps that emphasize frontend speed and SEO.

Oyinkansola Awosan
May 3, 2024 ⋅ 13 min read
Comparing Hattip Vs Express Js For Modern Application Development

Comparing Hattip vs. Express.js for modern app development

Explore what Hattip is, how it works, its benefits and key features, and the differences between Hattip and Express.js.

Antonello Zanini
May 2, 2024 ⋅ 8 min read
Using React Shepherd To Build A Site Tour

Using React Shepherd to build a site tour

React Shepherd stands out as a site tour library due to its elegant UI and out-of-the-box, easy-to-use React Context implementation.

Onuorah Bonaventure
May 1, 2024 ⋅ 14 min read
A Guide To Cookies In Next Js

A guide to cookies in Next.js

Cookies are crucial to web development. This article will explore how to handle cookies in your Next.js applications.

Georgey V B
Apr 30, 2024 ⋅ 10 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