Kleurcontrastverhouding berekenen: formule en WCAG AA/AAA

De kleurcontrastverhouding meet hoe sterk een tekstkleur opvalt tegen de achtergrond, als getal van 1:1 (identieke kleuren) tot 21:1 (zuiver zwart op zuiver wit). WCAG 2.1 stelt minimumverhoudingen vast waarbij tekst als leesbaar geldt: 4,5:1 voor normale tekst op AA-niveau, de grens die de meeste toegankelijkheidsaudits en wettelijke eisen hanteren.

De formule

De verhouding komt voort uit de relatieve luminantie van elke kleur, niet uit hoe een kleur op het scherm “oogt”. Vier stappen zetten een hexcode om naar een luminantiewaarde:

1. Splits de hexcode in R, G, B en deel elke waarde door 255, zodat elk kanaal tussen 0 en 1 ligt.
2. Lineariseer elk kanaal. Schermen vertalen kleurwaarden niet lineair naar helderheid, dus elk kanaal krijgt gammacorrectie: is de waarde ≤ 0,03928, deel dan door 12,92; anders pas je ((waarde + 0,055) / 1,055) ^ 2,4 toe.
3. Weeg en tel de kanalen op tot relatieve luminantie: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Groen krijgt het zwaarste gewicht omdat het oog daar het gevoeligst voor is; blauw het lichtste.
4. Deel de lichtste luminantie door de donkerste, beide plus 0,05: (L_licht + 0,05) / (L_donker + 0,05).

Die laatste + 0,05 heeft een functie: ze voorkomt dat de verhouding richting oneindig schiet zodra een van de kleuren bijna zwart is, en daarom komt zuiver zwart op zuiver wit precies uit op 21:1 in plaats van een veel groter getal.

Rekenvoorbeeld: #767676 op wit

Dit grijs-op-wit-paar duikt vaak op in WCAG-documentatie omdat het precies op een grens balanceert, wat het geschikt maakt om met de hand door te rekenen.

Stap 1. #767676 in RGB is 118, 118, 118. Gedeeld door 255 geeft dat 0,4627 per kanaal.

Stap 2. 0,4627 ligt boven 0,03928, dus lineariseer met de gammaformule: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. De drie kanalen zijn hier gelijk, dus deze waarde geldt voor R, G en B tegelijk.

Stap 3. Luminantie: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. De luminantie van wit is 1,0 (elk kanaal lineariseert naar precies 1).

Stap 4. Verhouding: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, afgerond op 4,54:1.

Dat komt net boven de grens van 4,5:1 voor AA bij normale tekst, en ook net boven de grens van 4,5:1 voor AAA bij grote tekst, maar ruim onder de 7:1 die AAA voor normale tekst eist. Eén hexwaarde, drie verschillende uitkomsten afhankelijk van tekstgrootte en het niveau dat je nastreeft.

Hoe veelgebruikte kleurparen het echt doen

Paar	Verhouding	AA normaal (4,5:1)	AAA normaal (7:1)	AA groot (3:1)	AAA groot (4,5:1)
#AAAAAA op #FFFFFF	2,32:1	Gezakt	Gezakt	Gezakt	Gezakt
#767676 op #FFFFFF	4,54:1	Geslaagd	Gezakt	Geslaagd	Geslaagd
#2563EB op #FFFFFF	5,17:1	Geslaagd	Gezakt	Geslaagd	Geslaagd
#333333 op #FFFFFF	12,63:1	Geslaagd	Geslaagd	Geslaagd	Geslaagd

Twee dingen vallen op in deze tabel. Ten eerste haalt een middelverzadigd blauw zoals #2563EB (een gangbare knop- en linkkleur) AA voor lopende tekst, maar zakt het volledig voor AAA, dus een site die AAA nastreeft voor links heeft een donkerdere tint nodig. Ten tweede zakt het populaire lichtgrijs rond #AAAAAA, vaak gebruikt voor placeholdertekst, voor elke grens, inclusief het minimum van 3:1 voor grote tekst, wat verklaart waarom “subtiele” grijze tekst op wit een van de vaakst gevonden problemen is bij toegankelijkheidsaudits.

Test je eigen kleuren

Vul hieronder twee hexwaarden in om de exacte verhouding te zien en welke WCAG-niveaus ze halen, live, zonder upload of serveraanroep.

Kleurcontrast Checker

Gratis, geen registratie, werkt op elk apparaat.

Open de volledige tool

Veelgemaakte fouten

Vergeten dat grote tekst een lagere grens heeft. WCAG definieert “grote tekst” als 18pt (24px) normaal gewicht of 14pt (18,66px) vet en groter. Een kop van 24px heeft maar 3:1 nodig, geen 4,5:1, dus een designsysteem dat dezelfde contrastregel op elke tekstgrootte toepast, wijst koppen af die al voldoen.

Tekstcontrast testen maar niet het contrast van UI-componenten. WCAG 1.4.11 stelt een apart minimum van 3:1 voor niet-tekstuele elementen zoals knopranden, randen van formuliervelden en iconen die zelfstandig betekenis overbrengen. Een knop met perfect 7:1-tekstcontrast kan alsnog een audit niet doorstaan als de rand opgaat in de achtergrond.

Contrast tegen de verkeerde achtergrond controleren. Tekst op een foto, een verloop of een semitransparante laag heeft niet één achtergrondkleur, maar meerdere. De verhouding geldt alleen voor het exacte gemeten punt; een verloop dat bovenaan licht en onderaan donker is, vraagt om het ongunstigste punt te controleren, niet het gemiddelde.

Aannemen dat merkkleuren vrijgesteld zijn. Een logo-wordmark is vrijgesteld van contrasteisen, maar lopende tekst en UI-tekst in een merkkleur niet. Veel merkblauwen en merkroden die prima werken als logoaccent, zakken voor 4,5:1 zodra ze als 16px-paragraaftekst op wit worden gebruikt.

Veelgestelde vragen

Wat is het verschil tussen AA en AAA? AA is de standaard waar de meeste wettelijke toegankelijkheidseisen naar verwijzen (ADA in de VS, EN 301 549 in de EU), en dat is wat de meeste audits controleren. AAA is strenger en vooral bedoeld voor content die specifiek gericht is op slechtziende gebruikers; WCAG zelf geeft aan dat AAA niet voor elk type content haalbaar is, dus de meeste organisaties mikken breed op AA in plaats van overal op AAA.

Houdt de contrastverhouding rekening met kleurenblindheid? Nee. Contrastverhouding meet luminantie (helderheid), niet tint, dus het helpt toevallig veel vormen van kleurenblindheid doordat het niet afhankelijk is van het onderscheiden van specifieke kleuren. Maar het vervangt geen kleurenblindheidscheck: twee kleuren kunnen uitstekend contrast hebben en toch moeilijk te onderscheiden zijn voor iemand met rood-groen kleurenblindheid als ze vooral in tint verschillen en niet in helderheid.

Waarom komt zuiver zwart op wit precies op 21:1 uit en niet op een ronder getal? De luminantie van zwart is 0 en van wit is 1. Vul je die in de formule in, dan krijg je (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Het komt exact op 21:1 uit door hoe de constante +0,05 is gekozen, niet door toeval of afronding.

Heeft een dark-modethema aparte contrastcontroles nodig? Ja. Een lichte achtergrond inwisselen voor een donkere behoudt de verhouding niet: witte tekst op je merkblauw en merkblauwe tekst op bijna-zwart zijn twee verschillende luminantieparen met twee verschillende verhoudingen, dus elk thema moet apart door de checker in plaats van aan te nemen dat het resultaat van de lichte modus nog geldt.