WCAG-contrastchecker
Controleer de contrastverhouding van een tekst-/achtergrondkleurenpaar tegen WCAG AA en AAA — met live voorbeeld bij normale en grote tekstgrootte.
1.128 weergaven
Pa's wijze lynx bezag vroom het fikse aquaduct
Voorbeeld grote tekst 24px
Hoe De Verhouding Wordt Berekend
De WCAG-formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve helderheid van de lichtere kleur is en L2 die van de donkerdere — het resultaat valt dus altijd tussen 1:1 (identieke kleuren) en 21:1 (puur zwart op puur wit). Relatieve helderheid is geen eenvoudig gemiddelde van de RGB-kanalen; het is een perceptueel gewogen som, L = 0,2126R + 0,7152G + 0,0722B, toegepast nadat elk kanaal is gelineariseerd door de sRGB-gammacurve om te keren (waarden onder 0,03928 worden gedeeld door 12,92, de rest doorloopt ((c+0,055)/1,055)^2,4). Groen draagt ongeveer tien keer zoveel bij aan de waargenomen helderheid als blauw, dus het verwisselen van de groen- en blauwkanalen van een kleur kan het zichtbare gewicht drastisch verschuiven terwijl de ruwe helderheid gelijk blijft.
Een concreet voorbeeld: puur middengrijs #767676 op een witte achtergrond komt exact uit op 4,54:1 — net boven de WCAG AA-drempel van 4,5:1 voor normale tekst. Maak het één stap donkerder tot #757575 en het zakt naar 4,48:1, waarmee het zakt voor AA. Dit is waarom zoveel grijs-op-wit-ontwerpen stilletjes zakken voor een audit: het visuele verschil tussen een geslaagd en een gezakt grijs is één enkele RGB-stap, onzichtbaar voor de meeste ogen maar zeer zichtbaar voor een geautomatiseerde scanner of voor een slechtziende gebruiker in fel daglicht.
Wat U Moet Weten
WCAG 2.1 stelt twee AA-drempels afhankelijk van de tekstgrootte: 4,5:1 voor normale tekst, en een versoepelde 3:1 voor grote tekst — gedefinieerd als 18pt (24px) normaal gewicht of 14pt (18,7px) vet en groter, omdat grotere lijnen leesbaar blijven bij lager contrast. Het strengere AAA-niveau vraagt 7:1 bij normale tekst en 4,5:1 bij grote tekst. Niet-tekstuele UI-elementen zoals iconen, invoerranden en focusindicatoren hebben hun eigen 3:1-vereiste onder WCAG 2.1 SC 1.4.11, gemeten ten opzichte van de aangrenzende achtergrondkleur.
Deze getallen zijn niet willekeurig — ze komen voort uit onderzoek naar leesbaarheid voor gebruikers met slecht zicht, kleurenblindheid en leeftijdsgebonden verlies van contrastgevoeligheid, en ze dienen tevens als juridisch referentiepunt in toegankelijkheidsregelgeving zoals de ADA en EN 301 549, de EU-norm achter de European Accessibility Act. Een contrastfout is een van de meest genoemde problemen in geautomatiseerde audits voor webtoegankelijkheid, wat verklaart waarom veel designsystemen een ondergrens van 4,5:1 rechtstreeks inbakken in hun kleurtokens in plaats van de controle over te laten aan individuele ontwerpers.
Veelgestelde vragen
Verandert het verwisselen van tekst en achtergrond de verhouding?
Nee — de formule zet altijd de lichtere kleur bovenaan, dus de verhouding is symmetrisch. De leesbaarheid kan nog steeds subjectief verschillen (halo-effect bij licht-op-donker), maar de WCAG-score is identiek.
Wat geldt als grote tekst?
24 px (18 pt) normaal of ongeveer 18,7 px (14 pt) vet en groter. Grote tekst heeft bij AA maar 3:1 nodig omdat grotere letters ook bij lager contrast leesbaar blijven.
Mijn merkkleur zakt — wat nu?
Gebruik hem voor decoratie en maak het tekstgebruik donkerder of lichter totdat het slaagt; een tint-/schaduwschaal helpt daarbij. Placeholdertekst en uitgeschakelde staten zijn vrijgesteld van de eis, maar houd ze redelijk.
Waarom gamma-gecorrigeerde helderheid gebruiken in plaats van een eenvoudig RGB-gemiddelde?
Omdat waargenomen helderheid niet lineair is en niet gelijk is per kanaal — het middelen van ruwe RGB-waarden zou fel geel (#ffff00) en middenblauw (#0000ff) ongeveer even helder behandelen, terwijl geel voor het oog veel helderder overkomt. De gamma-decoderingsstap corrigeert voor het feit dat sRGB waarden gecomprimeerd opslaat in plaats van lineair licht, en de gewichten 0,2126/0,7152/0,0722 weerspiegelen de grotere gevoeligheid van het oog voor groen, dan rood, dan blauw. Sla een van beide stappen over en de getallen komen niet meer overeen met hoe contrast er in werkelijkheid uitziet.
Garandeert een geslaagde verhouding dat de kleuren werken voor kleurenblinde gebruikers?
Niet volledig — de verhouding meet alleen het verschil in helderheid, niet het verschil in tint, dus twee kleuren kunnen slagen voor 4,5:1 en toch moeilijk te onderscheiden zijn voor iemand met deuteranopie als hun voornaamste verschil in tint zit in plaats van in helderheid, zoals bij sommige rood/groen-paren met vergelijkbare helderheid. Een hoge contrastverhouding is noodzakelijk maar niet voldoende voor toegankelijkheid voor kleurenblinden; het combineren ervan met een helderheidsverschil of een niet-kleur-signaal zoals een icoon of onderstreping dekt beide gevallen.
Vergelijkbare tools
Probleem melden
WCAG-contrastchecker
Reacties
Nog geen reacties — schrijf de eerste!