ChromaVision Logo ChromaVision Contact

Hoog Contrast en Grote Tekst Implementeren

Hoe je gebruikersselectable modi bouwt. Stap-voor-stap HTML, CSS en JavaScript voor meer comfort.

14 min lezen Gevorderd April 2026
Gebruikersinterface met toggleknoppen voor hoog contrast en grote tekstmodus in webtoepassing
Martijn van der Linden

Geschreven door

Martijn van der Linden

Senior Accessibility & Colour Design Specialist

Waarom dit ertoe doet

Niet iedereen ziet kleuren op dezelfde manier. Sommige gebruikers hebben lage visie, andere gebruiken schermen in fel zonlicht, en weer anderen hebben kleurenblindheid. Standaard contrast van 4.5:1 is het minimum — maar het voelt niet comfortabel voor veel mensen.

Als je je gebruikers kunt laten kiezen uit een hogere contrast en grotere tekst modus, win je enorm. Ze voelen zich gezien. De ervaring wordt beter. En je website wordt toegankelijker voor iedereen.

Close-up van computermonitor met duidelijk zichtbare tekst in hoog contrast modus, zwart op wit

De HTML structuur opzetten

Je begint met een eenvoudige toggle-knop in je HTML. Dit is het control-element waarmee gebruikers de modus aan en uit kunnen zetten.

We gebruiken een data-attribute op het root-element (de <html> tag) om de modus op te slaan. Dit is schoon en voorkomt class-conflicts.

Basis HTML: 

<button id="contrast-toggle" aria-label="Toggle hoog contrast modus">
    Hoog Contrast
</button>

De aria-label zorgt ervoor dat screenreader-gebruikers snappen wat deze knop doet. Dat is belangrijk — je maakt het toegankelijk voor iedereen.

Scherm met HTML-code editor, zichtbaar zijn toggleknoppen en data-attributen voor contrast modus
Designer werkt aan stylesheets, monitor toont CSS-regels voor contrast en typografie aanpassingen

CSS-variabelen voor contrast

In je CSS definieer je twee kleurenschema’s: normaal en hoog contrast. We gebruiken CSS-variabelen zodat je ze gemakkelijk kunt wisselen.

CSS-variabelen: 

:root {
    --text-color: #333;
    --bg-color: #fff;
    --border-color: #ccc;
}

html[data-contrast="high"] {
    --text-color: #000;
    --bg-color: #fff;
    --border-color: #000;
}

Het grote verschil: zwart op wit in plaats van grijs op wit. En dikke borders. Dit maakt alles veel duidelijker. Je ziet het verschil onmiddellijk.

Belangrijk: Geen garantie op alle browsers

Dit artikel beschrijft technieken voor het implementeren van hoog contrast- en grote tekstmodi. De specifieke implementatie kan variëren afhankelijk van je stapel technologie, browserondersteuning en bestaande stylesheet-architectuur. Test altijd grondig op echte gebruikers en apparaten. WCAG-richtlijnen bieden het minimale niveau van toegankelijkheid — veel gebruikers zullen baat hebben bij instellingen die verder gaan dan deze standaarden.

Aan de slag

Begin klein. Voeg de toggle-knop toe. Zet de data-attribute op de <html>-tag. Schrijf je CSS-variabelen en test ze in je browser.

Je hoeft niet alles perfect te maken. Zelf een basis hoog contrast-modus toevoegen is al een enorme stap voor veel gebruikers. Zij zullen het merken. Ze zullen het waarderen.

En wie weet — misschien ben je wel de eerste in je team die dit doet. Dan kun je het delen, ervan leren, en samen kunnen we het web een stukje toegankelijker maken.

Wil je meer leren over kleurenblindheid en hoe je ervoor kunt ontwerpen?

Ontdek kleurenblindheid simulatie

JavaScript voor het wisselen van modi

Je hebt nog één ding nodig: de JavaScript die het wisselen van modus mogelijk maakt. Dit is eenvoudig — je slaat de voorkeur op in localStorage zodat het onthouden wordt.

Basis JavaScript: 

const button = document.getElementById('contrast-toggle');
const html = document.documentElement;

button.addEventListener('click', () => {
    const current = html.getAttribute('data-contrast');
    const next = current === 'high' ? 'normal' : 'high';
    html.setAttribute('data-contrast', next);
    localStorage.setItem('contrast', next);
});

window.addEventListener('load', () => {
    const saved = localStorage.getItem('contrast') || 'normal';
    html.setAttribute('data-contrast', saved);
});

Dit script doet drie dingen: het wisselt de modus wanneer de knop wordt geklikt, het slaat de voorkeur op, en het laadt de voorkeur opnieuw wanneer de pagina wordt vernieuwd. Gebruikers zien hun keuze behouden, pagina na pagina.

Laptop-scherm toont developer console met JavaScript-code en localStorage-opslag van contrast-instellingen