Contrast checker: kleurcontrast controleren (WCAG 2.2)
Vul een tekstkleur en een achtergrondkleur in of kies ze. De checker berekent de relatieve luminantie van beide kleuren en de contrastverhouding precies zoals het W3C ze definieert en laat zien aan welke succescriteria van WCAG 2.2 je voldoet. Is het contrast te laag, dan stelt hij de dichtstbijzijnde tekstkleur voor die wel voldoet.
Zo wordt het berekend
Zo wordt het contrast berekend
WCAG 2.2 definieert de contrastverhouding als (L1 + 0,05) ÷ (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtste kleur is en L2 die van de donkerste. De uitkomst loopt van 1:1 (dezelfde kleur) tot 21:1 (zwart op wit).
De checker berekent de relatieve luminantie precies zoals het W3C die definieert: elk sRGB-kanaal wordt door 255 gedeeld en gelineariseerd – waarden tot 0,04045 worden door 12,92 gedeeld, hogere worden ((waarde + 0,055) ÷ 1,055)2,4. Daarna L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Voorbeeld #777777 op wit: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Omdat de drie kanalen gelijk zijn, is L = 0,1845. Wit heeft L = 1. Contrast = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Genoeg voor grote tekst (3:1), maar net te weinig voor normale tekst (4,5:1). De voorgestelde kleur #767676 haalt 4,54:1.
De eisen van WCAG 2.2
| Succescriterium | Niveau | Normale tekst | Grote tekst |
|---|---|---|---|
| 1.4.3 Contrast (minimum) | AA | 4,5:1 | 3:1 |
| 1.4.6 Contrast (versterkt) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Contrast van niet-tekstuele content (UI-componenten, afbeeldingen) | AA | 3:1 | |
Volgens WCAG is grote tekst minstens 18 punt, of minstens 14 punt vet – in de browser ongeveer 24 px en 18,67 px. Uitzonderingen zijn onder meer logo’s, puur decoratieve tekst en uitgeschakelde bedieningselementen.
Geen afronding
WCAG vergelijkt de exacte waarde: 4,499:1 voldoet niet aan 4,5:1. De checker beoordeelt daarom de onafgeronde verhouding en toont twee decimalen; waar afronden een grens zou lijken te halen, kapt hij af (4,49 in plaats van 4,50).
Transparante kleuren
Kleuren met een alfawaarde (bijv. rgba(0, 0, 0, 0.6) of #00000099) worden over elkaar gelegd zoals een browser ze tekent: een transparante achtergrond op wit, een transparante tekstkleur op de achtergrond. Ligt je pagina op een andere ondergrond, vul die effen kleur dan in als achtergrond.
Veelgestelde vragen
Welke contrastverhouding is nodig voor toegankelijkheid?
Minstens 4,5:1 voor normale tekst (WCAG-niveau AA, SC 1.4.3) en 3:1 voor grote tekst. Het strengere niveau AAA vraagt 7:1 en 4,5:1. Bedieningselementen zoals randen van invoervelden en pictogrammen hebben 3:1 nodig (SC 1.4.11).
Welke grijstinten op wit halen AA nog?
#767676 is het lichtste grijs met minstens 4,5:1 op wit (4,54:1). #777777 blijft er met 4,48:1 net onder.
Hoe vindt de checker de voorgestelde kleur?
Hij houdt tint en verzadiging van je tekstkleur gelijk en verandert alleen de HSL-lichtheid in kleine stappen, lichter en donkerder. Hij stelt de kleinste wijziging voor waarvan de afgeronde kleur het doel zeker haalt.
Welke regels verwijzen naar deze contrastwaarden?
In de EU verwijst de European Accessibility Act (richtlijn (EU) 2019/882) via de geharmoniseerde norm EN 301 549 naar WCAG 2.1 niveau AA. De contrastcriteria zijn in WCAG 2.0, 2.1 en 2.2 gelijk: 4,5:1 voor tekst, 3:1 voor grote tekst – plus 3:1 voor UI-componenten vanaf WCAG 2.1.
Bronnen en wettelijke basis
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Bijgewerkt op:
Vergelijkbare tools
- Kleurenpalet generatorMaak bijpassende kleuren vanuit één basiskleur: complementair, analoog, triadisch, vierkant, gesplitst complementair of monochroom – met HEX, RGB en HSL.
- Kleurconverter: HEX, RGB, HSL, HSV, CMYKZet kleuren om: HEX naar RGB, RGB naar HEX, HSL, HSV, HWB en CMYK. Typ elk formaat in of gebruik de kleurkiezer en kopieer het resultaat, in je browser.
- Kleur uit afbeelding halen (pipet)Haal kleurcodes uit elke afbeelding: open een foto, klik op een plek en kopieer HEX, RGB of HSL, plus de hoofdkleuren. Geen upload, alles in je browser.
- One Rep Max (1RM) berekenenSchat je one rep max op basis van gewicht en herhalingen met de formules van Epley en Brzycki, met een %1RM-tabel voor 1 tot 10 herhalingen. Werkt in kg of lb.
- Basaal metabolisme en energiebehoefte berekenenBereken je basaal metabolisme met de formule van Mifflin-St Jeor en je totale energiebehoefte per dag met de activiteitsniveaus (PAL) van FAO/WHO in kcal en kJ.
- BMI berekenen volgens de WHOBereken je BMI op basis van lengte en gewicht in cm en kg. Bekijk je WHO-categorie, van ondergewicht tot obesitas klasse III, en je gezonde gewicht.