Contrastcontrole
Controleer of je tekst- en achtergrondkleuren voldoen aan WCAG-toegankelijkheidsnormen. Berekent de contrastverhouding voor AA- en AAA-niveaus.
Belangrijkste functies
- Realtime berekening van contrastverhouding
- Controle op WCAG 2.1 AA- en AAA-naleving
- Ondersteuning voor normen voor normale en grote tekst
- Kleuren wisselen en live voorvertoning
Guide
Toegankelijkheid van kleurcontrast bepaalt of tekst op je website leesbaar is voor iedereen, inclusief mensen met een visuele beperking. De Web Content Accessibility Guidelines (WCAG) definiëren specifieke contrastverhoudingen die tekst moet halen om als toegankelijk te worden beschouwd. Niet aan deze standaarden voldoen betekent dat sommige bezoekers je content niet kunnen lezen, en in veel rechtsgebieden betekent het dat je site niet voldoet aan wettelijke toegankelijkheidseisen. Deze gids legt uit hoe contrastverhoudingen werken, wat WCAG vereist en hoe je contrastproblemen oplost zonder je ontwerp te compromitteren. Een contrastverhouding vergelijkt de relatieve luminantie van twee kleuren op een schaal van 1:1 (geen contrast, beide kleuren identiek) tot 21:1 (maximaal contrast, zuiver zwart op zuiver wit). Relatieve luminantie is een maat voor hoe helder een kleur aan het menselijk oog verschijnt, berekend uit de RGB-waarden van de kleur met een formule die rekening houdt met hoe menselijk zicht verschillende golflengtes waarneemt. Rood, groen en blauw dragen verschillend bij aan waargenomen helderheid, waarbij groen het meest bijdraagt en blauw het minst. De formule is: L = 0,2126 * R + 0,7152 * G + 0,0722 * B, waarbij R, G en B worden gelineariseerd uit hun sRGB-waarden. De linearisatiestap converteert gamma-gecodeerde sRGB-waarden naar lineaire lichtwaarden door een overdrachtsfunctie toe te passen. De contrastverhouding zelf wordt berekend als (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 de relatieve luminantie van de donkere kleur. De 0,05-waarde houdt rekening met omgevingslicht. Deze formule produceert het bekende verhoudingsformaat. Zuiver wit heeft bijvoorbeeld een luminantie van 1,0 en zuiver zwart heeft een luminantie van 0,0, wat een contrastverhouding geeft van (1,0 + 0,05) / (0,0 + 0,05) = 21:1. WCAG definieert twee conformiteitsniveaus voor contrast. Niveau AA is de basisvereiste voor de meeste websites. Niveau AAA is een strengere standaard die betere leesbaarheid biedt. Voor normaal-grote tekst (onder 18pt of onder 14pt bold) vereist Niveau AA een contrastverhouding van ten minste 4,5:1 en Niveau AAA vereist 7:1. Voor grote tekst (18pt en groter, of 14pt bold en groter) vereist Niveau AA 3:1 en Niveau AAA vereist 4,5:1. Deze drempels zijn gebaseerd op onderzoek naar leesbaarheid voor mensen met matig laag zicht, ruwweg 20/40-scherpte, wat de typische zichtverlies-drempel is voor oudere volwassenen. De uitzondering voor grote tekst bestaat omdat grotere letters inherent makkelijker te lezen zijn. Op grotere groottes maken dikkere streken en bredere counters tekens meer onderscheidbaar, zelfs bij lager contrast. Daarom kunnen kopteksten, hero-tekst en andere grote display-tekst een 3:1-verhouding gebruiken onder AA-compliance terwijl lopende tekst 4,5:1 vereist. In CSS-termen is 18pt gelijk aan 24px bij standaardbrowserinstellingen, en 14pt bold is ongeveer 18,66px bold. Twijfel je of je tekst als groot kwalificeert, pas dan de strengere 4,5:1-verhouding toe om veilig te zijn. Niet-tekst-elementen hebben ook contrastvereisten onder WCAG 2.1 Succescriterium 1.4.11 (Niet-tekst-contrast). Gebruikersinterfacecomponenten (knoppen, formuliervelden, focus-indicatoren) en grafische objecten (pictogrammen, grafiek-elementen) die noodzakelijk zijn voor het begrijpen van content moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van aangrenzende kleuren. Een lichtgrijze knoprand op een witte achtergrond die onder 3:1 valt, maakt de knop moeilijk identificeerbaar als klikbaar element, in het bijzonder voor gebruikers met laag zicht. Focus-indicatoren zijn vooral belangrijk: toetsenbordgebruikers leunen op zichtbare focus-stijlen om te navigeren, en die focus-stijlen moeten de 3:1-verhouding halen ten opzichte van omringende content. Kleurenblindheid treft ongeveer 8% van de mannen en 0,5% van de vrouwen van Noord-Europese afkomst, met variërende prevalentie in andere populaties. De meest voorkomende vorm is rood-groen-kleurenblindheid (deuteranopie en protanopie), waarbij rood en groen vergelijkbaar lijken. Blauw-geel-kleurenblindheid (tritanopie) is minder algemeen. Volledige kleurenblindheid (achromatopsie) is zeldzaam. Contrastverhoudingsberekeningen op basis van luminantie werken onafhankelijk van kleurwaarneming omdat ze helderheidsverschil meten, niet tint-verschil. Echter, uitsluitend leunen op kleur om informatie over te brengen (rood voor fout, groen voor succes) creëert problemen voor kleurenblinde gebruikers ongeacht contrastverhouding. Bied altijd aanvullende visuele aanwijzingen zoals pictogrammen, tekstlabels of patronen naast kleurcodering. Donkere modus introduceert aanvullende contrastoverwegingen. Veel ontwerpers creëren donkere thema's door kleuren simpelweg te inverteren, maar dit produceert vaak slechte resultaten. Zuiver witte (#FFFFFF) tekst op zuiver zwart (#000000) achtergronden creëert maximaal contrast (21:1), maar dit contrastniveau kan visuele vermoeidheid en halatie (een gloeiend effect rond lichte tekst op donkere achtergronden) veroorzaken voor sommige gebruikers. Een iets gereduceerd contrast, zoals #E0E0E0 op #121212, is comfortabeler en overschrijdt nog steeds WCAG AAA-vereisten. De Material Design-dark-theme-richtlijnen van Google bevelen aan #121212 te gebruiken als oppervlaktekleur en tekstondoorzichtigheid te verminderen in plaats van zuiver wit te gebruiken. Primaire tekst gebruikt 87% ondoorzichtigheid, secundaire tekst gebruikt 60% en uitgeschakelde tekst gebruikt 38%. Semi-transparante kleuren compliceren contrastcontrole. Als je rgba()- of hsla()-kleuren gebruikt met alfawaarden minder dan 1, hangt de daadwerkelijk gerenderde kleur af van wat erachter staat. Witte tekst op 70% ondoorzichtigheid op een donkere achtergrond heeft een andere effectieve contrast dan dezelfde tekst op een lichte achtergrond. Bij het controleren van contrast voor semi-transparante tekst moet je de samengestelde kleur berekenen (de werkelijke kleur die de gebruiker ziet nadat de transparantie is toegepast op de achtergrond). De formule mengt voor- en achtergrond op basis van de alfawaarde: samengesteld = voorgrond * alpha + achtergrond * (1 - alpha), toegepast op elk kanaal. Controleer altijd het samengestelde resultaat, niet de transparante kleur in isolatie. Gradiënt-achtergronden creëren variabel contrast over het tekstgebied. Staat tekst op een gradiënt die overgaat van donkerblauw naar lichtblauw, dan verschilt de contrastverhouding aan de linker- en rechterrand van de tekst. WCAG vereist dat de contrastverhouding wordt gehaald op elk punt waar tekst verschijnt. Controleer het contrast op het zwakste punt, wat daar is waar de achtergrond het dichtst bij luminantie staat bij de tekstkleur. Variëert de gradiënt van #003366 tot #6699CC en je tekst is wit, controleer dan het contrast tegen #6699CC omdat dat daar is waar het het laagst zal zijn. Voor radiale gradiënten, controleer meerdere punten over het tekstgebied. Afbeeldingsachtergronden vormen de moeilijkste contrast-uitdaging. Tekst op foto's of gepatroeerde achtergronden zal op elke pixel verschillend contrast hebben. De oplossingen zijn: een solide of semi-transparante overlay plaatsen tussen afbeelding en tekst, een tekstschaduw of -omtrek gebruiken om leesbaarheid te verzekeren, of tekst beperken tot gebieden van de afbeelding met consistente kleur. Een veelvoorkomend patroon is een donkere gradiënt-overlay onderaan een hero-afbeelding waar tekst verschijnt. De gradiënt verdonkert de afbeelding voldoende om voldoende contrast te creëren met witte tekst. Voor overlays brengt rgba(0, 0, 0, 0,5) de meeste afbeeldingen meestal in WCAG AA-compliance met witte tekst, maar verifieer met je specifieke afbeeldingen. Kleurruimten en contrastberekeningen zijn complexer dan de meeste tools erkennen. De standaard WCAG-contrastformule gebruikt relatieve luminantie in de sRGB-kleurruimte. Deze formule heeft bekende beperkingen. Het kan het contrast van zeer donkere kleurparen overschatten en het contrast van lichte kleurparen onderschatten. Onderzoek heeft aangetoond dat een donkerblauwe tekst (#00007E) op een zwarte achtergrond technisch WCAG AA haalt maar in de praktijk extreem moeilijk te lezen is. De APCA (Advanced Perceptual Contrast Algorithm) is een nieuwere benadering ontwikkeld voor WCAG 3.0 die rekening houdt met menselijke visuele waarneming nauwkeuriger, inclusief het polariteitseffect (donkere tekst op lichte achtergronden wordt anders waargenomen dan lichte tekst op donkere achtergronden). Hoewel WCAG 2.x en zijn sRGB-gebaseerde formule de huidige juridische standaard blijven, biedt APCA een meer perceptueel nauwkeurige beoordeling. Het APCA-model wijst verschillende contrastvereisten toe op basis van lettertypegrootte en -gewicht, wat een matrix van minimumcontrastwaarden creëert in plaats van de binaire drempelbenadering van WCAG 2.x. 14px-normaal-gewicht-tekst heeft bijvoorbeeld een hogere APCA-contrastwaarde nodig dan 24px-bold-tekst. APCA handelt ook het polariteitsprobleem af: lichte tekst op donkere achtergronden vereist verschillende contrastwaarden dan donkere tekst op lichte achtergronden. Hoewel APCA nog niet de officiële standaard is, helpt het begrijpen ervan je betere contrastbeslissingen te nemen, in het bijzonder in randgevallen waarbij WCAG 2.x twijfelachtige resultaten produceert. Contrast-fouten herstellen omvat doorgaans een van drie benaderingen: de tekst verdonkeren, de achtergrond lichter maken of beide. Bij het aanpassen van kleuren, blijf binnen je merklepalet door de lichtheidwaarde in HSL-kleurruimte te wijzigen in plaats van de tint of verzadiging te veranderen. Is je merkblauw hsl(210, 80%, 55%) en faalt het contrast tegen wit, dan kan het verlagen van lichtheid naar hsl(210, 80%, 40%) slagen terwijl het herkenbaar je merkblauw blijft. Kleine lichtheidaanpassingen lossen vaak contrastproblemen op zonder een volledige herontwerp te vereisen. In de OKLCH-kleurruimte produceren deze aanpassingen nog meer perceptueel uniforme resultaten. CSS-custom-properties maken contrast-bewust thema's praktisch. Definieer je kleuren als HSL-waarden in custom-properties en creëer daarna lichte en donkere themavarianten die aan contrastvereisten voldoen. Bijvoorbeeld: --brand-primary: hsl(210, 80%, 40%) voor licht thema en --brand-primary: hsl(210, 80%, 70%) voor donker thema. Beide gebruiken dezelfde tint en verzadiging maar verschillende lichtheidwaarden geoptimaliseerd voor hun respectievelijke achtergronden. Deze benadering schaalt naar hele design-systemen met tientallen kleur-tokens. Je behoudt merkconsistentie terwijl je aan toegankelijkheidseisen voldoet in elk thema. Design-systeem-integratie is waar contrastcontrole het meest waardevol wordt. In plaats van afzonderlijke pagina-elementen te controleren, definieer je je kleur-tokens en verifieer je dat elke tekst-op-achtergrond-combinatie in je tokensysteem aan WCAG-vereisten voldoet. Documenteer de goedgekeurde combinaties in een contrastmatrix die laat zien welke tekstkleuren veilig zijn op welke achtergrondkleuren. Als ontwikkelaars daarna componenten bouwen, selecteren ze uit vooraf goedgekeurde kleurparen en contrastcompliance wordt gegarandeerd door het systeem in plaats van per instantie gecontroleerd. Dit is hoe grote organisaties zoals Google, Microsoft en Adobe contrast op schaal afhandelen. Een contrastmatrix bouwen houdt in dat je al je achtergrondkleuren over de bovenkant lijst en al je tekstkleuren langs de zijkant, en daarna de contrastverhouding berekent voor elke kruising. Markeer elke cel als AA-geslaagd, AAA-geslaagd of gefaald. Deze matrix wordt een referentiedocument voor je hele team. Als een ontwerper een kleurcombinatie specificeert, kunnen ze de matrix onmiddellijk controleren. Als een ontwikkelaar een component implementeert, vertelt de matrix hen welke kleur-tokens veilig samen zijn. Geautomatiseerde testing vangt contrastproblemen vroeg. Tools zoals axe-core, Lighthouse en Pa11y scannen gerenderde pagina's en vlaggen elementen die falen voor WCAG-contrastvereisten. Integreer deze in je CI/CD-pijplijn zodat contrastregressies worden gevangen vóór implementatie. De beperking van geautomatiseerde tools is dat ze tekst op afbeeldingen, gradiënten of dynamisch veranderende achtergronden niet kunnen evalueren. Handmatige controle met een contrastcontrole-tool blijft noodzakelijk voor deze gevallen. Een uitgebreide benadering gebruikt geautomatiseerde testing voor de meerderheid van de gevallen en handmatige controle voor de randgevallen die automatisering niet aan kan. Wettelijke naleving drijft veel van de urgentie rond contrasttoegankelijkheid. De Americans with Disabilities Act (ADA) in de Verenigde Staten, de European Accessibility Act in de EU, de Accessibility for Ontarians with Disabilities Act in Canada en vergelijkbare wetten in andere rechtsgebieden vereisen ofwel direct WCAG-naleving of zijn door rechtbanken interpreteert om het te vereisen. Rechtszaken over webtoegankelijkheid zijn jaar over jaar aanzienlijk toegenomen, waarbij contrast-fouten een van de meest geciteerde problemen zijn. WCAG AA halen is de algemeen aanvaarde juridische standaard. Organisaties in gereguleerde industrieën (overheid, gezondheidszorg, onderwijs, financiën) faced strengere vereisten en actievere handhaving. Voorbij wettelijke naleving is goed contrast goed ontwerp. Tekst die makkelijk te lezen is, converteert beter, behoudt bezoekers langer en vermindert bouncepercentages. Gebruikers die lezen op telefoons in helder zonlicht, oudere gebruikers met natuurlijk afnemend zicht, gebruikers op monitors van lage kwaliteit met slechte kleurreproductie en gebruikers die gewoon moe zijn, profiteren allemaal van sterk contrast. Ontwerpen voor de randen van menselijk vermogen (laag zicht, uitdagende omgevingen) produceert ontwerpen die ook beter werken voor iedereen in het midden. Studies hebben aangetoond dat hogere contrasttekst leestijd vermindert en begrip verbetert over alle gebruikers, niet alleen degenen met visuele beperkingen. Je contrastkeuzes testen in echte omstandigheden betekent controleren op meerdere apparaten, in verschillende lichtomstandigheden en met daadwerkelijke content in plaats van plaatsaanduidingstekst. Een kleurparen dat de wiskundige contrastcontrole haalt, kan nog steeds moeilijk leesbaar zijn als het lettertype dun is, de tekst klein is of de letter-spatiëring strak is. Contrastverhouding is een noodzakelijk minimum, geen garantie voor leesbaarheid. Paar voldoende contrast met geschikte lettertypegrootte (minimum 16px voor lopende tekst), gewicht (regular of medium, niet light of thin) en spatiëring (regelhoogte van 1,5 of meer) voor de beste resultaten. Veelvoorkomende contrastvalkuilen zijn onder meer plaatsaanduidingstekst in formuliervelden (vaak lichtgrijs op wit, falend voor contrastvereisten), uitgeschakelde knoptekst (moet nog steeds onderscheidbaar zijn, zelfs als niet aan volledige contrastvereisten wordt voldaan), linktekst die alleen leunt op kleur om hem te onderscheiden van omringende tekst (WCAG vereist een aanvullende visuele indicator zoals onderstreping tenzij het linkcontrast ten opzichte van omringende tekst ten minste 3:1 is) en tekst over decoratieve achtergronden waarbij contrast varieert per positie. Merkkleur-toegankelijkheid is een frequente uitdaging. Marketingteams kiezen merkkleuren voor emotionele impact en visuele aantrekkingskracht, niet voor WCAG-naleving. Een heldere oranje merkkleur (hsl(30, 100%, 50%)) heeft een contrastverhouding van slechts 2,14:1 tegen wit, ver onder de 4,5:1 AA-vereiste voor normale tekst. De oplossing is het creëren van toegankelijke varianten van merkkleuren. Behoud de tint, pas de lichtheid aan. hsl(30, 100%, 35%) is nog steeds herkenbaar oranje maar haalt AA tegen wit op 4,6:1. Creëer een merkkleurenpalet met primaire kleuren voor grote tekst en decoratieve elementen (lager contrast aanvaardbaar) en aangepaste varianten voor lopende tekst, links en UI-componenten (moet AA halen). Datavisualisatie en grafieken presenteren unieke contrast-uitdagingen. Elke dataseries in een grafiek moet onderscheidbaar zijn van aangrenzende series en van de achtergrond. Met vijf of meer dataseries is het moeilijk kleuren te vinden die allemaal voldoende contrasten met elkaar en met de achtergrond. Kleurenblind-veilige paletten (zoals die van ColorBrewer of het Okabe-Ito-palet) zijn specifiek voor dit doel ontworpen. Voorbij kleur, gebruik patronen, texturen of directe labels om dataseries te onderscheiden. Lijngrafieken kunnen verschillende streepjespatronen gebruiken. Staafgrafieken kunnen diagonale arcering gebruiken. Spreidingsplots kunnen verschillende vormen gebruiken. Contrast in verschillende lichtomgevingen varieert dramatisch. Een kleurparen dat comfortabel leesbaar is in een dim kantoor, wordt nauwelijks zichtbaar in direct zonlicht. Mobiele gebruikers komen regelmatig heldere buitenomstandigheden tegen. Hoge contrastverhoudingen bieden een buffer tegen omgevingsfactoren. Een paar op precies 4,5:1 (het AA-minimum) is leesbaar in gecontroleerde omstandigheden maar kan falen in helder zonlicht. Richten op 5:1 of 6:1 biedt marge die rekening houdt met real-world kijkomstandigheden. Voor kritieke UI-elementen (navigatie, calls-to-action, foutmeldingen) neig je naar de kant van hoger contrast. Kleurbeheer en apparaatverschillen beïnvloeden hoe gebruikers contrast waarnemen. Een sRGB-kleur op een breed-gamut-display (P3 of Adobe RGB) kan er iets anders uitzien dan bedoeld. Goedkope TN-paneel-monitors geven kleuren anders weer dan IPS- of OLED-schermen. Schermhelderheidsinstellingen veranderen waargenomen contrast. Blauwlicht-filters en nachtmodus tinten het display warm, wat het waargenomen contrast van koele kleuren vermindert. Geen van deze factoren verandert de berekende WCAG-verhouding, maar ze beïnvloeden de daadwerkelijke visuele ervaring. Testen op meerdere apparaten en in meerdere omstandigheden vangt problemen die wiskundige berekeningen missen. Contrastvereisten voor tekst ingesloten in afbeeldingen zijn dezelfde als voor live-tekst. Bevat je hero-afbeelding tekst die in het afbeeldingsbestand is ingebakken (geen HTML-tekst), dan moet die tekst nog steeds aan WCAG-contrastvereisten voldoen. Het verschil is dat je afbeeldingstekst niet met CSS kunt aanpassen, dus het contrast moet in het afbeeldingsbewerkingstool worden geverifieerd vóór export. Social-media-preview-afbeeldingen (og:image) bevatten vaak tekst die leesbaar moet zijn, hoewel deze niet formeel door WCAG worden gedekt omdat ze op platforms van derden verschijnen. Contrast in typografie gaat verder dan alleen voor- en achtergrondkleuren. Het waargenomen contrast van tekst hangt af van lettertype-gewicht, lettertypegrootte, letter-spatiëring en regelhoogte. Dunne lettertypes (300-gewicht en lager) hebben hogere contrastverhoudingen nodig dan dezelfde tekst in regular of bold-gewicht omdat de dunnere streken moeilijker te onderscheiden zijn van de achtergrond. De WCAG-specificatie houdt geen rekening met lettertype-gewicht in zijn drempels (alleen grootte), dus een technisch slagende verhouding kan nog steeds onleesbare tekst produceren als het lettertype te dun is. Voor lopende tekst, gebruik regular (400) of medium (500) gewicht op minimaal. Reserveer light en thin gewichten voor grote kopteksten waar de grootte compenseert voor de verminderde streek-zichtbaarheid. Systematische contrastauditing over een grote website vereist een combinatie van geautomatiseerde tools en handmatige review. Draai geautomatiseerde scans (axe-core, Lighthouse) om het laaghangende fruit te vangen: hardcoded kleuren die falen voor verhoudingen. Controleer daarna handmatig dynamische content, gebruikers-gegenereerde content-gebieden, interactieve statussen (hover, focus, actief, uitgeschakeld), fout- en succesmeldingen, tooltip-tekst en elk gebied waar kleur wordt bepaald op runtime. Creëer een terugkerend auditschema: driemaandelijks voor grote sites, maandelijks tijdens actieve ontwikkeling. Volg het aantal contrastproblemen in de loop van de tijd om voortgang te meten. De contrastcontrole-tool laat je elke twee kleuren invoeren en onmiddellijk de contrastverhouding zien, WCAG AA- en AAA-slaag/falen-status voor zowel normale als grote tekst, en een visuele preview van de combinatie. Gebruik het tijdens de ontwerpfase om kleurkeuzes te valideren voordat ze ontwikkeling bereiken, tijdens codereview om te verifiëren dat geïmplementeerde kleuren overeenkomen met het ontwerp, en tijdens toegankelijkheidsaudits om bestaande problemen te identificeren en op te lossen. De tool accepteert hex-, RGB- en HSL-kleurwaarden en toont de berekende luminantie voor elke kleur naast de verhouding.
Veelgestelde vragen
Welke contrastverhouding is nodig voor WCAG AA?
WCAG AA vereist een minimale contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst (18px+ of 14px+ vet).
Wat is het verschil tussen AA en AAA?
AAA is strenger: 7:1 voor normale tekst en 4,5:1 voor grote tekst. AA is de aanbevolen minimumstandaard.
