Contrast Accessibility Demonstration

This page is a demonstration on how you can implement a low contrast mode to help users with photosensitivity / photophobia. With a small JavaScript snippet, you can easily either create a toggle or buttons to switch between the two modes.

For this demonstration the switch applies two filters to the entire page. The first one is a contrast filter set to 70%. The second one is a saturation filter set to 70%.

For the CSS:

body.lowcontrast {
    filter: contrast(70%) saturate(70%);
}

For the JavaScript:

function addLowContrast() {
    document.body.classList.add('lowcontrast');
}

function removeLowContrast() {
    document.body.classList.remove('lowcontrast');
}

Since this project uses Svelte, you can easily bind the functions to buttons with:

<button on:click={addLowContrast}>Low Contrast</button>

<button on:click={removeLowContrast}>High Contrast</button>

The code is available on GitHub. A detailed blog post explaining the reasoning is available on Hashnode.

Example Text

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid minima quo distinctio, error hic iusto. Quisquam nobis, minus error vitae, nemo hic totam voluptatum ipsum cum quasi atque. Nisi, sint.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt laboriosam, sequi perferendis quis labore veniam omnis optio sit aspernatur, unde numquam id magni repudiandae, ullam vero ratione sunt? Minus impedit iusto voluptatum eligendi ea, autem incidunt! Sint quod, obcaecati eum eos id, ducimus sequi debitis optio earum expedita vitae delectus suscipit quisquam aliquam perferendis quia temporibus voluptates odio labore nobis laudantium iusto. Nostrum, impedit excepturi voluptatem dicta explicabo odit nihil animi nobis quam amet unde quia fugiat cum voluptas commodi odio magnam! Autem aliquid accusantium at enim adipisci corporis magni suscipit neque, inventore maxime?