<button class="a-button a-button--standalone-icon a-button--icon js-toggle-high-contrast">
<span class="a-button__text">Toggle high contrast</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-contrast"></use>
</svg>
</button>
<button class="a-button a-button--standalone-icon a-button--icon {{trigger_class}}">
<span class="a-button__text">{{button_text}}</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-contrast"></use>
</svg>
</button>
{
"button_text": "Toggle high contrast",
"trigger_class": "js-toggle-high-contrast"
}
const element = document.querySelector('.js-toggle-high-contrast');
function classToggle() {
const body = document.querySelector('body');
body.classList.toggle('high-contrast');
}
if (element) {
element.addEventListener('click', classToggle);
}
When clicked, this component triggers the class high-contrast on the body-element which activated high contrast styles based on that class. The background is made dark and the text is made white.
When activated, the site is not supposed to “look good”. It’s suppose to make text easier to read.
The javascript is activated by this class: js-toggle-high-contrast