Kleurcontrastcontrole

Over de kleurcontrastcontrole

Deze gratis kleurcontrastcontrole meet de contrastverhouding tussen een tekstkleur en een achtergrondkleur, en vertelt u of die voldoet aan WCAG AA en AAA voor normale en grote tekst.

Hij draait in uw browser — er wordt niets geüpload.

Wat de verhouding betekent

De contrastverhouding vergelijkt de relatieve luminantie van twee kleuren — hoeveel licht elk ervan uitstraalt of weerkaatst — op een schaal van 1:1 tot 21:1.

• 1:1 — identieke kleuren, de tekst is onzichtbaar
• 21:1 — zuiver zwart op zuiver wit, het hoogst haalbare
• 4.5:1 — het minimum voor gewone lopende tekst onder WCAG AA

Het belangrijke detail is dat de berekening uitgaat van luminantie, niet van hoe verschillend de kleuren ogen. Twee kleuren kunnen sterk verschillend aanvoelen en toch zakken. Rood op groen is het klassieke voorbeeld: visueel opvallend, vrijwel dezelfde luminantie, en voor veel mensen bijna onleesbaar.

Daarom ook kunt u contrast niet met het blote oog beoordelen. Ontwerpers werken op goede monitoren, bij gecontroleerd licht en met jonge ogen, en het lichte grijs dat in de studio elegant oogt, verdwijnt op een telefoon in de zon.

De drempelwaarden

WCAG stelt twee niveaus vast, en de eis hangt af van de tekstgrootte.

Niveau AA — het gebruikelijke doel, en datgene waarnaar de meeste toegankelijkheidswetten verwijzen:

• 4.5:1 voor normale tekst
• 3:1 voor grote tekst
• 3:1 voor bedieningselementen en betekenisdragende afbeeldingen

Niveau AAA — een strengere norm, passend voor inhoud gericht op lezers met een visuele beperking:

• 7:1 voor normale tekst
• 4.5:1 voor grote tekst

Grote tekst betekent 18pt (24px) of groter, of 14pt (18.66px) vet of groter. Grotere letters hebben dikkere stokken, dus die overleven een lager contrast.

AA is voor de meeste sites het realistische doel. AAA is over een heel ontwerp heen lastig te halen en wordt voor algemene inhoud niet verwacht.

Waarom dit veel meer mensen raakt dan u denkt

Het is verleidelijk om contrast weg te zetten als een "randgeval". De cijfers zeggen iets anders.

Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurenzienstoornis — wereldwijd zo'n 300 miljoen mensen. Rood-groen komt verreweg het meest voor.

Vrijwel iedereen boven de 40 ervaart een afnemende contrastgevoeligheid, en de ooglens vergeelt met de jaren, waardoor blauwtinten anders worden waargenomen.

Iedereen, soms. Contrastproblemen treffen ook mensen met een perfect gezichtsvermogen die buiten lezen, op een gedimd scherm, op een goedkope monitor, of door een besmeurd telefoonscherm in de bus. Verbeteringen in toegankelijkheid zijn hier eenvoudigweg verbeteringen in leesbaarheid voor iedereen.

Er is ook een juridische kant. WCAG 2.1 AA wordt in de praktijk aangehaald door de Americans with Disabilities Act, door Section 508 bij federale inkoop in de VS, door de European Accessibility Act, en door vergelijkbare regels in het Verenigd Koninkrijk, Canada en Australië. Contrast behoort tot de meest genoemde tekortkomingen in klachten over toegankelijkheid, vooral omdat het zo eenvoudig te meten is.

Waar ontwerpen meestal sneuvelen

• Lichtgrijze tijdelijke tekst in formuliervelden — uiterst gangbaar en vrijwel altijd onvoldoende
• Witte tekst op een foto — de verhouding verandert over de afbeelding heen; voeg een overlay of een donkere sluier toe
• Merkkleuren gebruikt als tekstkleur — een middentonig bedrijfsblauw of -oranje op wit komt vaak rond 3:1 uit
• Uitgeschakelde toestanden — vrijgesteld van de eis, maar toch de moeite waard om leesbaar te houden
• Links die alleen door kleur opvallen — heeft een link dezelfde lichtheid als de tekst eromheen, onderstreep hem dan
• Witte tekst op geel, of grijs op grijs — de eeuwige boosdoeners
• Donkere modus — zuiver wit op zuiver zwart is technisch 21:1 maar veroorzaakt halo-vorming; iets verzachte kleuren lezen prettiger
• Foutmeldingen in rood op een witte achtergrond — vaak onder 4.5:1, juist bij de melding die het meest telt

Een zakkend paar herstellen

Als een combinatie zakt, verander dan de lichtheid in plaats van de kleurtoon. U kunt een merkkleur meestal herkenbaar houden en hem toch ver genoeg verdonkeren of verlichten om te slagen.

Praktische aanpakken:

Houd de merkkleur voor grote elementen — koppen, knoppen, pictogrammen — waar de drempel 3:1 is, en gebruik een donkerdere variant voor de lopende tekst.

Pas maar één kant aan. De tekst donkerder maken is doorgaans minder ingrijpend dan de achtergrond veranderen.

Leg op afbeeldingen een sluier — een halftransparante donkere laag tussen foto en tekst. Die garandeert de verhouding, ongeacht wat de foto laat zien.

Vertrouw niet op kleur alleen om betekenis over te brengen. Voeg een pictogram, een label of een onderstreping toe, zodat de informatie ook overeind blijft voor iemand die de kleuren helemaal niet kan onderscheiden.

Hoe u het gebruikt

• Kies een tekstkleur en een achtergrondkleur
• Bekijk de contrastverhouding en de AA / AAA-badges voor geslaagd of gezakt
• Lees het live voorbeeld om zelf te oordelen en pas daarna de kleuren aan

Goed om te weten

• Test de werkelijke kleuren, inclusief eventuele doorzichtigheid. Tekst op 70% dekking is tegenover zijn achtergrond in feite een andere kleur.
• Controleer beide thema's. Een palet dat in de lichte modus slaagt, kan in de donkere modus zakken.
• Logo's zijn vrijgesteld van de contrasteis, net als bijkomstige en decoratieve tekst.
• Dunne lettertypen hebben in de praktijk meer contrast nodig dan de verhouding suggereert. De norm meet de lijndikte niet, maar uw lezers merken die wel.
• Controleer het op een telefoon bij daglicht als dat kan. Dat is een eerlijkere test dan welke monitor ook.
• Slagen is een ondergrens, geen doel. 4.5:1 is het minimaal aanvaardbare, niet het streven.

Veelgestelde vragen

Wat is een goede contrastverhouding?

Voor gewone lopende tekst minstens 4.5:1 om aan WCAG AA te voldoen — het niveau waarnaar de meeste toegankelijkheidswetten verwijzen. Grote tekst, dus 18pt/24px of 14pt/18.66px vet en groter, heeft 3:1 nodig. Het strengere AAA-niveau vraagt 7:1 bij normale tekst. Beschouw deze waarden als minima in plaats van als doelen; comfortabel lezen zit meestal ruim daarboven.

Wat is het verschil tussen WCAG AA en AAA?

AA is de praktische norm die de meeste regelgeving en organisaties overnemen, met 4.5:1 voor normale tekst en 3:1 voor grote tekst. AAA is strenger, met 7:1 en 4.5:1, en is bedoeld voor inhoud die specifiek gericht is op lezers met een visuele beperking. AAA is over een heel ontwerp heen moeilijk te halen en wordt van algemene websites niet verwacht.

Waarom zakt mijn kleurcombinatie terwijl hij mij goed lijkt?

Omdat contrast wordt berekend uit luminantie, niet uit hoe verschillend twee kleuren ogen. Rood en groen zien er sterk verschillend uit maar hebben een vergelijkbare luminantie, en daarom zakt die combinatie. Ook het eigen oordeel is onbetrouwbaar: ontwerpers werken doorgaans op goede schermen, bij gecontroleerd licht en met een goed gezichtsvermogen — omstandigheden die de meeste lezers niet hebben.

Is contrast ook van belang voor afbeeldingen en pictogrammen?

Ja. WCAG vereist 3:1 voor bedieningselementen en voor afbeeldingen die betekenis dragen, zoals pictogrammen die een status aangeven of de rand van een formulierveld. Puur decoratieve afbeeldingen en logo's zijn vrijgesteld. Tekst over een foto is het gebruikelijke probleem, omdat de verhouding over de afbeelding heen verandert — een halftransparante overlay lost dat op.

Hoe herstel ik een zakkend kleurenpaar zonder mijn merkkleur te verliezen?

Pas de lichtheid aan in plaats van de kleurtoon. Een donkerdere of lichtere versie van dezelfde kleur blijft meestal herkenbaar bij het merk passen en haalt toch de drempel. U kunt het origineel ook bewaren voor koppen, knoppen en pictogrammen, waar slechts 3:1 vereist is, en een donkerdere variant gebruiken voor de lopende tekst, waar 4.5:1 geldt.

Is zuiver zwart op zuiver wit de beste keuze?

Het is met 21:1 het maximum, maar niet per se het prettigst. Heel hoog contrast kan halo-vorming veroorzaken — een gloed rond de letters — vooral in de donkere modus en bij sommige lezers met dyslexie of astigmatisme. Een zeer donker grijs op een gebroken wit, of een verzacht wit op een donkergrijs, leest vaak comfortabeler en slaagt nog steeds ruimschoots.

Worden mijn kleurkeuzes ergens naartoe gestuurd?

Nee. De verhouding wordt in uw browser berekend terwijl u kleuren kiest, dus er wordt niets verzonden of opgeslagen en het hulpmiddel werkt offline.

Gerelateerde hulpmiddelen

• Kleurkiezer — kleuren vinden en omrekenen tussen HEX, RGB en HSL
• Kleurkiezer uit afbeelding — een kleur uit een afbeelding halen
• Kleurenpalet uit afbeelding — een palet samenstellen en het hier testen
• CSS-verloopgenerator — het tekstcontrast aan beide uiteinden van een verloop controleren