tiiaaurora/low-contrast-example

This is a small website to present an easy way to implement a low contrast mode only via CSS and JavaScript

Hi there 👋

• 🐈 Ask me about my cat
• 📫 How to reach me: Twitter: @TiiaAurora or Discord TiiaAurora#1337
• 👩 Pronouns: she/her
• 💀 Fun fact: I worked in the Archeology before - Yes I dug out dead people

• 📘 I'm currently learning Python and Svelte (JavaScript)
• 🌍 I'm also fiddleing with APIs

• 🐍 I’m currently working on my Discord-Bot SmartSnek - A bot connecting to Notion.so as a backend providing a knowledgebase
• 💕 I'm also working on HandsomeSquidward - a Discord-Bot, that works with the ARK API to provide Server- and Dinosaur-Data to my Community.
• 👓 "Twitch to Python" let's creators import their Twitch-Data into a Notion Database to further analyze it.
• 🎮 LeapStone Lost Ark Tracker helps you to keep track of your tasks in the MMO Lost Ark.

low-contrast-example's Issues

Thanks Tiia! Works amazing, but am having a few quirks

This is really an ingenious solution and I love how easy it was to set up, however I'm experiencing some quirks. (In chrome 101)

1. It breaks fixed positioning, think it's related to this https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning

2. This may be on my end, but in my setup when I have a white body background it stays the same, thus actually increasing contrast compared to a light gray background.

Image without low contrast

Image with low contrast

Though I patched it with the following

body.lowcontrast {
    filter: contrast(70%) saturate(70%);
    background-color: whitesmoke;
}

*Sorry for any bad formatting, it's late lol