Contrastchecker

Q: Is 4,49:1 dichtbij genoeg om te slagen?

Nee. De WCAG drempels zijn harde minimumwaarden: 4,49:1 zakt voor AA bij normale tekst. Gebruik de suggestie om een kleur te krijgen die echt slaagt.

Contrastchecker

Gratis WCAG-contrastchecker. Voer een tekst- en achtergrondkleur in en krijg de contrastverhouding, de AA/AAA-resultaten en de dichtste geslaagde kleur.

Tekstkleur

Achtergrondkleur

Contrastverhouding

–

WCAG 2.2-resultaten

	AA	AAA
Normale tekst
Grote tekst
Interface-elementen en afbeeldingen		–

Voorbeeld

Normale tekst (16 px). Pa’s wijze lynx bezag vroom het fikse aquaduct.

Grote tekst (24 px)

Grote vette tekst (18,66 px vet)

Knop

Suggesties

Doel

Dichtstbijzijnde geslaagde tekstkleur

–

Dichtstbijzijnde geslaagde achtergrondkleur

–

Zo gebruik je de contrastchecker

Voer de Tekstkleur en de Achtergrondkleur in. Gebruik de kleurstalen of typ een willekeurige CSS-waarde in de velden: een HEX-code zoals #595959, rgb(89 89 89), hsl(0 0% 35%) of een naam zoals navy.
De Contrastverhouding wordt bijgewerkt terwijl je typt, van 1:1 (geen contrast) tot 21:1 (zwart op wit).
De tabel WCAG 2.2-resultaten toont Geslaagd of Gezakt voor Normale tekst, Grote tekst en Interface-elementen en afbeeldingen, op de niveaus AA en AAA.
Bekijk het Voorbeeld: het toont normale tekst, grote tekst, grote vette tekst, de rand van een knop en een icoon in je twee kleuren.
Zakt een niveau, kies dan een Doel onder Suggesties. De tool stelt de Dichtstbijzijnde geslaagde tekstkleur en de Dichtstbijzijnde geslaagde achtergrondkleur voor. Klik op Gebruiken om er een toe te passen. Kleuren omwisselen verwisselt tekst en achtergrond.

Alles wordt in je browser berekend; er wordt niets verstuurd.

Hoe de contrastverhouding wordt berekend

WCAG 2.x definieert de verhouding als (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtste kleur is en L2 die van de donkerste. De relatieve luminantie wordt berekend uit gelineariseerde sRGB-kanalen: elk kanaal wordt gedecodeerd met de sRGB-overdrachtscurve, daarna geldt L = 0,2126 R + 0,7152 G + 0,0722 B. Groen weegt het zwaarst omdat onze ogen daar het gevoeligst voor zijn. Daarom lijkt zuiver groen veel helderder dan zuiver blauw van dezelfde “sterkte”.

De verhouding wordt nooit naar boven afgerond. #777777 op wit geeft ongeveer 4,48:1 en zakt voor AA bij normale tekst, ook al lijkt het op “4,5”. Deze tool kapt de getoonde waarde af op twee decimalen, zodat je ziet wat WCAG controleert.

Is de tekstkleur halfdoorzichtig (bijvoorbeeld rgb(0 0 0 / 60%)), dan wordt ze eerst over de achtergrond gemengd, zoals de browser haar zou tekenen. Transparantie in de achtergrondkleur wordt genegeerd, omdat onbekend is wat er achter de pagina ligt.

WCAG-niveaus in één oogopslag

Inhoud	AA	AAA
Normale tekst	4,5:1	7:1
Grote tekst (24 px, of 18,66 px vet)	3:1	4,5:1
Interface-elementen en betekenisvolle afbeeldingen	3:1	–

“Grote tekst” betekent minstens 18 pt (24 CSS-pixels), of 14 pt vet (ongeveer 18,66 px). Logo’s en puur decoratieve tekst hebben geen eis. De 3:1-regel voor interface-elementen (succescriterium 1.4.11) geldt voor randen van invoervelden en knoppen, focusindicatoren, iconen en lijnen in grafieken die gebruikers moeten kunnen zien.

Hoe de suggesties werken

De voorgestelde kleuren behouden de tint en chroma van je kleur in de OKLCH-ruimte en veranderen alleen de lichtheid, donkerder of lichter, tot de doelverhouding is bereikt. De tool kiest daarna de richting die visueel het dichtst bij je oorspronkelijke kleur ligt, gemeten in OKLab. Het resultaat wordt na afronding naar een HEX-code opnieuw gecontroleerd, zodat het echt slaagt. Kan geen enkele lichtheid het doel halen (bijvoorbeeld 7:1 tegen een middengrijs), dan meldt de tool dat.

Over APCA

APCA (Accessible Perceptual Contrast Algorithm) is een nieuwer contrastmodel dat wordt overwogen voor een toekomstige WCAG 3. Het houdt rekening met letterdikte, lettergrootte en polariteit (donker op licht tegenover licht op donker). Het is nog een concept en geen wettelijke of normatieve eis. Deze tool geeft daarom WCAG 2.x-resultaten, die de referentie blijven voor de Europese toegankelijkheidsnorm EN 301 549, Section 508 en de meeste wetten.

Veelgestelde vragen

Welke contrastverhouding heb ik nodig voor lopende tekst?

Minstens 4,5:1 voor niveau AA, het niveau dat de meeste wetten en richtlijnen eisen. Mik op 7:1 (AAA) voor lange teksten of voor lezers met een visuele beperking.

Slaagt witte tekst op mijn merkkleur?

Voer wit in als tekstkleur en je merkkleur als achtergrond. Veel middentinten blauw, oranje en groen halen maar 3:1: prima voor grote koppen en knoppen met grote labels, niet voor kleine tekst. Gebruik de voorgestelde achtergrondkleur als je AA nodig hebt voor normale tekst.

Waarom verandert de volgorde van de kleuren de verhouding niet?

De formule deelt altijd de lichtste luminantie door de donkerste, dus donker op licht en licht op donker geven dezelfde verhouding. Het waargenomen contrast kan wel iets verschillen; dat is een van de problemen die APCA probeert op te lossen.

Is 4,49:1 dichtbij genoeg om te slagen?

Nee. De WCAG-drempels zijn harde minimumwaarden: 4,49:1 zakt voor AA bij normale tekst. Gebruik de suggestie om een kleur te krijgen die echt slaagt.

Werkt de contrastchecker ook voor placeholdertekst of uitgeschakelde tekst?

Placeholdertekst moet aan hetzelfde minimum van 4,5:1 voldoen als ze informatie overbrengt. Uitgeschakelde bedieningselementen zijn vrijgesteld van contrasteisen, maar leesbare uitgeschakelde toestanden helpen gebruikers toch.