Kleurcontrastcontrole

Zo gebruik je de Kleurcontrastcontrole

1. 1. Voer de twee kleuren in. Typ elke kleur als HEX (#777777), rgb(), hsl() of een CSS-naam, of gebruik de kiezer. Wisselen verwisselt ze, handig om licht-op-donker- en donker-op-licht-versies te controleren.
2. 2. Lees de verhouding en de tabel af. De verhouding loopt van 1:1 (identieke kleuren) tot 21:1 (zwart op wit). De tabel vergelijkt haar met elke WCAG-eis en zegt in woorden Geslaagd of Mislukt, niet alleen met kleur.
3. 3. Bepaal de grootte. Grote tekst heeft lagere eisen. De voorbeeldweergave toont normale tekst, grote tekst, vetgedrukte grote tekst en een omlijnd element, zodat je je eigen geval kunt beoordelen.
4. 4. Repareer een mislukt paar. Kies het niveau waarop je wilt uitkomen en gebruik de voorgestelde tekst- of achtergrondkleur. De tool houdt de tint en verandert alleen de helderheid, in de kleinste stap die slaagt.

Wat WCAG 2.2 vereist

De Web Content Accessibility Guidelines (WCAG) 2.2 stellen minimale contrastverhoudingen in drie succescriteria. De verhouding is (L₁ + 0.05) ÷ (L₂ + 0.05), waarbij L₁ de relatieve helderheid van de lichtste kleur is en L₂ die van de donkerste.

Grote tekst is minstens 18 pt, of 14 pt vet — 24 px en ongeveer 18.7 px op een scherm van 96 dpi. Logo’s, puur decoratieve tekst en inactieve bedieningselementen vallen buiten 1.4.3. De 3:1-eis van 1.4.11 geldt voor de onderdelen van een bedieningselement die nodig zijn om het te vinden (de rand van een knop, de omlijning van een selectievakje), de toestanden ervan zoals focus, en de afbeeldingen die een lezer nodig heeft om de inhoud te begrijpen, zoals de lijnen in een grafiek.

Hoe de verhouding wordt berekend

Elk sRGB-kanaal wordt geschaald naar 0–1 en gelineariseerd: c ÷ 12.92 als c ≤ 0.04045, anders ((c + 0.055) ÷ 1.055)^2.4. De relatieve helderheid is dan 0.2126 R + 0.7152 G + 0.0722 B. Groen telt het zwaarst omdat het oog er het gevoeligst voor is.

WCAG rondt niet af: een verhouding van 4.4999 mislukt 4.5. De controle toont daarom de verhouding afgerond naar beneden op twee decimalen, zodat een bijna-mislukking nooit als geslaagd wordt getoond.

Dia’s, posters en figuren controleren

• Dia’s en posters zijn geen webpagina’s, maar de WCAG-verhoudingen zijn ook voor hen de geaccepteerde maatstaf. Lopende tekst op een dia is meestal groot (24 px is 18 pt); bijschriften, voetnoten en as-labels zijn dat niet, dus controleer ze als normale tekst.
• Mik boven het minimum voor projectie. Een projector in een verlichte ruimte verlaagt het contrast voor iedereen. Kies AAA (7:1) voor tekst op een dia die je in een lichte ruimte toont.
• Tekst over een foto of verloop heeft geen enkele achtergrond. Controleer de lichtste en donkerste gebieden achter de tekst, of zet de tekst op een effen vlak.
• Grafieken en figuren vallen onder 1.4.11: lijnen, staven en markeringen hebben 3:1 nodig tegen de achtergrond. Kleur alleen mag de betekenis niet dragen — zie de Kleurenblindheidssimulator.
• Transparante kleuren worden vóór de meting afgevlakt: de achtergrond over wit, daarna de tekst over de achtergrond. Staat er iets anders achter, voer dan die kleur rechtstreeks in.

Een opmerking over APCA

Het Accessible Perceptual Contrast Algorithm (APCA) is een kandidaatmethode in het conceptdocument van WCAG 3, die rekening houdt met tekstgrootte, gewicht en polariteit. Het is een concept, geen eis, en geen wet of norm vraagt er op dit moment om. WCAG 2.x-verhoudingen — die in deze tool — blijven de basis voor conformiteitsclaims.

Veelgestelde vragen

Wat is een goede contrastverhouding?

4.5:1 of hoger voor normale tekst voldoet aan WCAG AA, en 7:1 voldoet aan AAA. Grote tekst heeft 3:1 nodig voor AA en 4.5:1 voor AAA. Zwart op wit is het maximum, 21:1. Alles onder 3:1 is voor veel mensen moeilijk leesbaar, zelfs met goed zicht.

Wat telt als grote tekst in WCAG?

Tekst van minstens 18 pt (24 px) in normaal gewicht, of minstens 14 pt (ongeveer 18.7 px) vet. De grootte wordt gemeten zoals ze wordt weergegeven, dus een lettertype op een dia dat op een handout klein lijkt, kan bij projectie nog steeds groot zijn.

Geldt de contrasteis ook voor pictogrammen en grafiekenlijnen?

Ja, via succescriterium 1.4.11 Contrast van niet-tekstuele elementen: gebruikersinterfacecomponenten en afbeeldingen die nodig zijn om de inhoud te begrijpen, moeten minstens 3:1 contrast hebben met aangrenzende kleuren. Decoratieve afbeeldingen en inactieve componenten vallen buiten de eis.

Waarom toont mijn kleur 4.49 als de verhouding bijna 4.5 is?

Omdat WCAG de exacte verhouding vergelijkt en niets geeft voor afronding. Een paar van 4.4999:1 mislukt de eis van 4.5:1, dus de tool toont de waarde naar beneden afgerond op twee decimalen in plaats van 4.50.

Hoe werken de voorgestelde kleuren?

De tool behoudt de tint en verzadiging van je kleur en verschuift de HSL-helderheid in kleine stappen omhoog of omlaag. Ze geeft de dichtstbijzijnde waarde die de doelverhouding haalt als 8-bit HEX-code. Als geen helderheid die kan halen — 7:1 tegen een middelgrijs bijvoorbeeld — dan zegt de tool dat en stelt voor de andere kleur aan te passen.

Is APCA beter dan de WCAG-verhouding?

APCA modelleert waarneming nauwkeuriger, vooral voor donkere modus en dunne tekst, maar het maakt deel uit van een concept (WCAG 3), geen geaccepteerde eis. Toegankelijkheidswetgeving en aanbestedingsnormen die naar WCAG 2.x verwijzen, gebruiken de hier berekende verhouding.