Kleurcontrast checker
Zorg dat je tekst voor iedereen goed leesbaar is, en krijg een oplossing als dat niet zo is.
Verzegeld op dit apparaat
Werkt in je browser. Er wordt niets geüpload.
Verzegeld
Kleuren
- Contrastverhouding
- Normale tekst
- AA · 4,5:1
- AAA · 7:1
- Grote tekst
- AA · 3:1
- AAA · 4,5:1
- Interface-elementen en iconen
- AA · 3:1
- APCA-contrast (ter informatie)
APCA is een nieuwere methode die wordt onderzocht voor toekomstige toegankelijkheidsrichtlijnen. WCAG 2.2 blijft vandaag de referentie.
Voorbeeld
Grote tekst leest zo
Normale tekst moet voor iedereen goed leesbaar blijven, ook voor slechtzienden, op een telefoon in fel zonlicht of op een oud scherm.
Kleine letters en bijschriften hebben het meeste contrast nodig.
Voorgestelde oplossingen
Zo werkt het
-
Voer je twee kleuren in
Typ of kies de tekstkleur en de achtergrondkleur. Elk formaat werkt: HEX, RGB, HSL of een CSS-naam.
-
Bekijk het resultaat
Zie de contrastverhouding en of die voldoet aan WCAG 2.2 AA en AAA voor normale tekst, grote tekst en interface-elementen.
-
Pas zo nodig een oplossing toe
Haalt een niveau het niet? Gebruik dan een van de voorgestelde kleuren: dat is de meest gelijke kleur met dezelfde tint die wel voldoet.
Veelgestelde vragen
Welke contrastverhouding heb ik nodig?
WCAG 2.2 niveau AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA vraagt 7:1 en 4,5:1. Iconen, randen van invoervelden en andere interface-elementen hebben minstens 3:1 nodig ten opzichte van wat ernaast staat.
Wat telt als grote tekst?
Tekst van minstens 18 punten (24 CSS-pixels), of minstens 14 punten (ongeveer 18,7 CSS-pixels) als hij vet is. Alles wat kleiner is, is normale tekst.
Waarom voldoet 4,49:1 niet, terwijl het zo dicht bij 4,5:1 zit?
WCAG-drempels zijn strikte minimumwaarden en de verhouding mag niet naar boven worden afgerond. Daarom toont deze checker de verhouding naar beneden afgerond: een waarde die lijkt te voldoen, voldoet ook echt.
Wat is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is een nieuwere manier om contrast te meten die rekening houdt met of tekst donker op licht of licht op donker is. Het wordt onderzocht voor een toekomstige versie van de richtlijnen. Het staat hier alleen ter informatie: wettelijke eisen en audits verwijzen vandaag naar de WCAG 2-verhouding.
Hoe worden de voorgestelde kleuren gekozen?
De checker behoudt de tint en verzadiging van je kleur en verandert alleen de lichtheid, in de perceptuele kleurruimte OKLCH, tot hij de dichtstbijzijnde waarde vindt die het niveau haalt. Je kleur blijft op zichzelf lijken, alleen iets lichter of donkerder.
Werkt het met transparante kleuren?
Ja, voor de tekstkleur: een halfdoorzichtige tekstkleur wordt eerst met de achtergrond gemengd, omdat dat de kleur is die mensen echt zien. De achtergrond wordt als dekkend behandeld.