Contrastchecker

Hoe je dit gebruikt Contrastchecker

1. Kies de tekstkleur en de achtergrondkleur.
2. Bekijk de verhouding en welke niveaus je haalt.
3. Pas de helderheid aan tot je het benodigde niveau haalt.

De WCAG-drempels

De verhouding wordt uitgedrukt als een ratio, van 1:1 (identiek) tot 21:1 (zwart op wit).

Grote tekst begint bij 18 punt, of 14 punt vet. In pixels komt dat neer op ongeveer 24 px, of 18,66 px vet.

Niveau AA is wat de regelgeving vraagt. AAA is een ambitieuzer doel dat met behoud van een merkidentiteit zelden haalbaar is.

Logo's zijn uitgezonderd, net als puur decoratieve tekst en uitgeschakelde interface-elementen.

Een punt dat vaak wordt overgeslagen: de eis van 3:1 voor interface-onderdelen geldt ook voor de randen van invoervelden, betekenisdragende iconen en de focusindicator. Een lichtgrijze rand op wit valt daar vrijwel altijd door.

Wat er in Nederland geldt

Hier is het contrast geen smaakkwestie meer.

Het Tijdelijk besluit digitale toegankelijkheid overheid verplicht overheidsinstanties om te voldoen aan de Europese norm EN 301 549, die op zijn beurt verwijst naar WCAG op niveau AA.

Het Nederlandse eigene zit in de verantwoording: elke overheidswebsite en -app moet een toegankelijkheidsverklaring publiceren in een centraal register, en die verklaring is voor iedereen openbaar te raadplegen.

In die verklaring staat een status — van volledig voldoen tot eerste maatregelen genomen — plus wat er niet voldoet en wanneer dat wordt opgelost.

Dat openbare register werkt in de praktijk sterker dan een boete: iedereen kan zien hoe een organisatie ervoor staat, en journalisten en belangenorganisaties kijken mee.

Daarnaast breidt de Europese toegankelijkheidsrichtlijn verplichtingen uit naar private diensten, onder meer webwinkels, bankieren en personenvervoer. Veel bedrijven die eerder buiten schot bleven vallen er nu onder.

Wat precies voor jou geldt hangt af van je organisatie en dienst; controleer dat bij de geldende regelgeving. Het technische criterium verandert niet: WCAG niveau AA.

En los van de regels is er een praktische reden: ongeveer één op de twaalf mensen heeft een vorm van kleurenblindheid, en veel meer mensen lezen in de zon of met vermoeide ogen.

Onvoldoende contrast oplossen

Er is meer ruimte dan je denkt zonder het ontwerp te verpesten.

Maak de tekst donkerder in plaats van de achtergrond lichter. Dat verandert de sfeer van de pagina meestal minder.

Haalt je merkkleur het niet, gebruik hem dan op grote elementen — koppen, vlakken, grote iconen — en niet in lopende tekst.

Meer verzadiging helpt vrijwel nooit; het gaat om luminantie. Twee sterk verzadigde kleuren kunnen onderling een dramatisch contrast hebben.

Let op tekst over afbeeldingen, de meest voorkomende fout. Die heeft een halftransparante kleurlaag nodig, of een schaduw, of een egaal vlak.

Een geval dat structureel wordt vergeten: de tijdelijke aanduiding in formuliervelden, meestal heel lichtgrijs. Bevat die noodzakelijke informatie, dan moet hij net zo goed voldoen als gewone tekst — en belangrijke informatie hoort daar sowieso niet alléén te staan.

Controleer ook de donkere modus apart. Een palet dat in licht voldoet kan omgekeerd zakken, en zuiver wit op zuiver zwart geeft een verblinding die veel mensen onprettig vinden.

Veelgestelde vragen