Kleurcontrast controleren

Kies een tekstkleur en een achtergrondkleur om te zien of je ontwerp leesbaar en toegankelijk is. Je krijgt de contrastverhouding, of die voldoet aan de niveaus AA en AAA van de WCAG en, als dat niet zo is, de meest gelijkende tekstkleur die wel voldoet.

Tekst en achtergrond

Accepteert HEX, rgb(), hsl(), oklch() of CSS-namen. Halfdoorzichtige tekst wordt gemengd met de achtergrond.

Grote voorbeeldtekst

Dit is tekst van normale grootte. Webtoegankelijkheid betekent dat iedereen, ook mensen die slechtziend of kleurenblind zijn, je pagina kan lezen en gebruiken.

Knop

Contrastverhouding

Normale tekst (4,5:1) AA
Normale tekst (7:1) AAA
Grote tekst (3:1) AA
Grote tekst (4,5:1) AAA
Pictogrammen en componenten (3:1) AA

Wat is de contrastverhouding?

De contrastverhouding vergelijkt de relatieve luminantie van twee kleuren en loopt van 1:1 (dezelfde kleur) tot 21:1 (zwart op wit). Ze is vastgelegd in de toegankelijkheidsrichtlijnen WCAG 2 van het W3C en vormt de basis van toegankelijkheidswetgeving (in Nederland en België via de Europese norm EN 301 549) en van tools zoals Lighthouse.

Niveaus AA en AAA

AA is het niveau dat meestal wordt geëist: 4,5:1 voor normale tekst en 3:1 voor grote tekst (vanaf 24 px, of 18,66 px vet). AAA is het verscherpte niveau: respectievelijk 7:1 en 4,5:1. Pictogrammen, randen van formuliervelden en andere interfacecomponenten hebben minstens 3:1 nodig ten opzichte van de kleuren eromheen.

Logo's en puur decoratieve tekst of uitgeschakelde elementen zijn uitgezonderd.

Zo verbeter je het contrast

Meestal volstaat het om de tekst donkerder te maken (of lichter op een donkere achtergrond) zonder de tint te veranderen: daarom stellen we dezelfde kleur voor met een andere lichtheid, berekend in de OKLCH-kleurruimte zodat de wijziging zo klein mogelijk is. Vermijd lichtgrijze tekst op wit en tekst op afbeeldingen zonder donkere tussenlaag.