Contrast

Goed contrast is noodzakelijk om de inhoud toegankelijk te maken en zoveel mogelijk mensen te bereiken.

Dit is erg belangrijk voor, maar niet beperkt tot, mensen die kleurenblind zijn, slechtziend, sneller overprikkeld raken of dyslexie hebben. Ook is het in het algemeen voor iedereen belangrijk, omdat je sneller moe wordt van het lezen van tekst met een laag contrast. Daarnaast werkt je website beter in verschillende omgevingen en belichtingen. Met goed contrast is je ontwerp dus beter voor iedereen. Gebruik onze contrast meter om contrast te meten.

Tip

Simulaties

Je kan op deze site bovenaan ieder artikel op de instellingen knop klikken op verschillende soorten kleurenblindheid op de site te simuleren.

Genoeg & niet te veel

Er bestaat ook zoiets als te veel contrast. Dit is ook vermoeiend voor de ogen. Het is dus belangrijk om een goede balans te vinden tussen contrast en rust. Bekijk ook de contrast meter.

Contrast ratio

De WCAG 2 contrast checker. Je selecteert twee kleuren om de score te krijgen. Je kan dan zien of het voldoet voor kleine en grote tekst of voor grafische elementen.
WCAG 2 contrast checker tool van WebAIM. De berekening van WCAG 2 houdt geen rekening met verschillende kleuren van de regenboog, alleen lichte en donkere kleuren. Dit komt niet overeen met hoe mensen kleur ervaren.

Op de WebAIM: Contrast Checker kun je live je kleuren checken op WCAG niveau. Let op: dit is niet de beste manier om contrast te checken. Er zijn betere methodes ontwikkeld, zoals APCA, die waarschijnlijk in WCAG 3 wordt opgenomen. Ga naar onze contrast meter om beter je contrast te meten.

Kritiek

Er is kritiek op de berekening die wordt gebruikt voor WCAG 2. Het werkt namelijk niet goed met alle kleurcombinatie's. Soms krijgt een laag contrast een goede score en een hoog contrast geen goede score. Het is belangrijk om zelf ook nog te kijken of het goed leesbaar is. Met onze contrast meter kan je de verbeterde methode gebruiken om contrast te meten. Ook houdt deze tool rekening met achter- en voorgrondkleur. Als je deze omdraait kan de uitkomst veranderen.

WCAG 2 eisen (verouderd)

SoortNiveauRatio
TekstAA4.5:1
TekstAAA7:1
Tekst groter dan 1.2rem/20pxAA3:1
Tekst groter dan 1.2rem/20pxAAA4.5:1
GraphicAA3:1
GraphicAAA3:1
Verder lezen

Meer weten?


Externe bronnen zijn niet verbonden met NTR