Contrastchecker
Local only — nothing is uploaded unless you save or share it.
Een kleurcontrastchecker voor de WCAG-niveaus van toegankelijkheid.
- Vul je tekstkleur en je achtergrondkleur in
- Lees de verhouding en welke WCAG-niveaus die haalt
- Zakt hij, gebruik dan de voorgestelde kleur die wel slaagt
Voorbeeld van grote tekst
Voorbeeld van gewone lopende tekst — de maat die het grootste deel van je inhoud echt gebruikt.
Bewaar deze tool
Houd Contrastchecker bij de hand
Gebruik het deelmenu van je browser en dan „Zet op beginscherm”.
Over deze tool
Gebruik hem als eenvoudige kleurchecker voor twee kleuren, of als contrastchecker met dekking: een half doorzichtige voorgrond wordt over de achtergrond gelegd voordat de verhouding wordt uitgerekend, in plaats van dat de alfa stilletjes genegeerd wordt. De kleurcontrastverhouding meet hoe goed tekst te onderscheiden is van de achtergrond erachter, op een schaal van 1 tot 21. De Web Content Accessibility Guidelines leggen de lat op 4,5 op 1 voor gewone lopende tekst op niveau AA, laten hem zakken naar 3 op 1 voor grote tekst en tillen hem naar 7 op 1 voor het strengere niveau AAA. Die getallen zijn geen willekeurige voorkeuren: laag contrast is een van de meest voorkomende toegankelijkheidsfouten op het web, en het raakt veel meer mensen dan het lijkt, waaronder iedereen met verminderd zicht, iedereen boven ongeveer veertig, en iedereen die een scherm leest in fel zonlicht. Deze checker berekent de verhouding netjes en lineariseert eerst de sRGB-waarden, de stap die naïeve rekenmachines overslaan en de reden dat hun uitkomsten niet stroken met echte toegankelijkheidsaudits. Doorschijnende tekst legt hij eerst over de achtergrond, want een kleur met alfa heeft op zichzelf geen echte contrastwaarde. Zakt een paar, dan stelt hij de dichtstbijzijnde schakering van je tekstkleur voor die wel slaagt.
Veelgestelde vragen
Wat is een goede contrastverhouding?
4,5:1 of beter voor gewone lopende tekst, dat is WCAG-niveau AA. Grote tekst mag omlaag naar 3:1, en het strengere niveau AAA vraagt 7:1. Alles onder 3:1 is voor de meeste mensen zwaar werk en voor sommigen onleesbaar.
Wat is een goede contrastverhouding?
4,5:1 of beter voor gewone lopende tekst, dat is WCAG-niveau AA. Grote tekst mag omlaag naar 3:1, en het strengere niveau AAA vraagt 7:1. Alles onder 3:1 is voor de meeste mensen zwaar werk en voor sommigen onleesbaar.
Wat telt als grote tekst?
18pt, dat is 24px, of 14pt vet, dat is ongeveer 18,66px. Alles op of boven die maat heeft op niveau AA maar een verhouding van 3 op 1 nodig in plaats van 4,5 op 1. De drempel voor grote tekst toepassen op gewone lopende tekst is een van de meest voorkomende manieren waarop een audit alsnog zakt nadat iedereen dacht dat hij geslaagd was.
Moet ik op AA of op AAA mikken?
AA is de praktische standaard en is waar de meeste wetgeving naar verwijst, waaronder de European Accessibility Act. AAA is strenger en over een heel ontwerpsysteem lastig te halen, dus wordt het meestal behandeld als een streven voor lopende tekst en niet als een algemene eis.
Waarom verschilt jullie verhouding van een rekenmachine die ik elders gebruikte?
Bijna altijd omdat die andere de rauwe RGB-waarden middelt in plaats van ze eerst te lineariseren. sRGB is gammagecodeerd, dus de WCAG-formule past per kanaal een bepaalde transformatie toe voordat ze gewogen worden. Dat overslaan levert getallen op die plausibel lijken en zakken bij echte audits.
Hoe wordt doorzichtige tekst behandeld?
Die wordt eerst over de achtergrondkleur gelegd en dan gemeten. Een kleur met een alfakanaal heeft op zichzelf geen zinnige contrastverhouding, want wat je werkelijk ziet is een mengsel. Gereedschap dat alfa negeert meldt geslaagd voor tekst die in de praktijk onzichtbaar is.
Telt contrast ook voor iconen en randen?
Ja. WCAG 2.1 eist 3 op 1 voor onderdelen van de gebruikersinterface en betekenisdragende afbeeldingen, wat de randen van formuliervelden, focusaanduidingen en icoonknoppen omvat. Die worden hier naast de tekstniveaus meegenomen.
Help deze tool beter te maken
Een fout gevonden, iets anders willen, of mis je een tool?
Je hebt een niet-verzonden bericht.
Dank je — hij is binnen. Het antwoord vind je in je postvak.Go to my messages