WCAG 1.4.3: Contrast (Minimum)

Wat Deze Regel Betekent

WCAG 1.4.3 — Contrast (Minimum) is een succescriterium op Niveau AA onder Richtlijn 1.4 (Onderscheidbaar) van de Web Content Accessibility Guidelines 2.2. Het schrijft voor dat de visuele weergave van tekst en afbeeldingen van tekst een voldoende luminantie-contrastverhouding behoudt ten opzichte van de achtergrond, zodat mensen met matig slechtziendheid de inhoud kunnen lezen zonder afhankelijk te zijn van contrastverhogende ondersteunende technologie.

De vereiste contrastverhoudingen zijn als volgt. Normale tekst — alle tekst kleiner dan 18 punt (ongeveer 24 CSS-pixels) of 14 punt vet (ongeveer 18,67 CSS-pixels) — moet een contrastverhouding van minimaal 4,5:1 behalen. Grote tekst, gedefinieerd als tekst van 18 punt of groter in normaal gewicht of 14 punt in vet gewicht, vereist een minimale contrastverhouding van 3:1. Dezelfde drempels gelden voor afbeeldingen van tekst: gerasterde of vectorafbeeldingen die leesbare tekens weergeven, moeten deze verhoudingen eveneens halen ten opzichte van elke aangrenzende achtergrondkleur.

De contrastverhouding wordt berekend met behulp van de formule voor relatieve luminantie die is gedefinieerd in de WCAG-specificatie. Relatieve luminantie (L) wordt berekend op basis van sRGB-kleurwaarden na gammacorrectie, en de verhouding wordt uitgedrukt als (L1 + 0,05) / (L2 + 0,05), waarbij L1 de lichtste van de twee luminantiewaarden is en L2 de donkerste. Een verhouding van 1:1 betekent helemaal geen contrast (identieke kleuren), terwijl 21:1 het maximum is, dat alleen wordt bereikt door puur zwart op puur wit.

Het criterium heeft betrekking op alle voorgrondtekst die door de browser wordt gerenderd, inclusief tekst in knoppen, links, labels, formuliervelden, tabelcellen, tooltips, placeholdertekst in invoervelden en tekst die over afbeeldingen of verlopen is geplaatst. Het omvat ook SVG-tekstelementen en tekst die wordt gerenderd via door CSS gegenereerde content (::before- en ::after-pseudo-elementen).

WCAG 1.4.3 definieert verschillende officiële uitzonderingen die expliciet van de eis zijn uitgesloten:

• Incidentele tekst: Tekst of afbeeldingen van tekst die puur decoratief zijn, niet zichtbaar zijn of deel uitmaken van een inactieve (uitgeschakelde) gebruikersinterfacecomponent, zijn vrijgesteld. Zo hoeft het gedimde label van een uitgeschakeld formulierveld niet aan de verhouding te voldoen.
• Logotypes: Tekst die deel uitmaakt van een logo of merknaam heeft geen minimale contrasteis, omdat merkidentiteit vaak afhankelijk is van specifieke kleurkeuzes en van gebruikers wordt verwacht dat zij logo’s visueel herkennen.
• Grote tekst: Zoals hierboven vermeld, heeft grote tekst een versoepelde verhouding van 3:1 in plaats van 4,5:1, in de erkenning dat grotere lettervormen bij lager contrast gemakkelijker te onderscheiden zijn.

Een pass treedt op wanneer de berekende contrastverhouding gelijk is aan of hoger is dan de toepasselijke drempel voor elk stuk zichtbare, niet-uitgezonderde tekst. Een fail treedt op wanneer enige zichtbare, niet-uitgezonderde tekst of afbeelding van tekst onder de drempel valt, zelfs met een fractie van een verhoudingspunt.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd leven met een vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Een aanzienlijk deel van deze personen — waaronder mensen met slechtziendheid door aandoeningen zoals cataract, glaucoom, maculadegeneratie en diabetische retinopathie — kan tekst op het scherm nog lezen wanneer het contrast voldoende is, maar heeft moeite of faalt volledig wanneer het contrast slecht is. Contrast (Minimum) speelt direct in op de behoeften van deze populatie door een meetbare, testbare ondergrens vast te stellen waaronder tekst ontoegankelijk wordt.

Naast gediagnosticeerde slechtziendheid ervaart naar schatting 8% van de mannen en 0,5% van de vrouwen van Noord-Europese afkomst een vorm van kleurzienstoornis (kleurenblindheid). Hoewel kleurenblindheid verschilt van laag contrast, verminderen veel vormen van kleurenblindheid het waargenomen luminantieverschil tussen bepaalde tinten, waardoor onvoldoende contrast nog problematischer wordt. Een rood label op een groene achtergrond kan voor iemand met deuteranopie bijna als uniform grijs lijken, waardoor de tekst onzichtbaar wordt als het onderliggende luminantiecontrast onvoldoende is.

Oudere volwassenen worden onevenredig zwaar getroffen. Het verouderende oog verliest contrastgevoeligheid en de pupilgrootte neemt af, waardoor de hoeveelheid licht die het netvlies bereikt, vermindert. Iemand in de zeventig kan een aanzienlijk hoger luminantiecontrast nodig hebben om dezelfde leesbaarheid te bereiken als iemand in de dertig, zelfs zonder klinische diagnose van slechtziendheid.

Neem een concreet scenario uit de echte wereld: een Turkse e-commercesite gebruikt lichtgrijze tekst (#999999) op een witte achtergrond (#FFFFFF) voor productbeschrijvingen en prijsinformatie — een veelvoorkomende ontwerptrend die geliefd is om zijn minimalistische esthetiek. De contrastverhouding van deze combinatie is ongeveer 2,85:1, ruim onder de drempel van 4,5:1. Een gebruiker met beginnende maculadegeneratie kan mogelijk de prijs van een product helemaal niet lezen en wordt zo gedwongen de aankoop af te breken. Dit sluit niet alleen een gebruiker uit van een fundamentele commerciële transactie, maar vertegenwoordigt ook een direct omzetverlies voor de verkoper en een juridisch risico in rechtsgebieden waar naleving van toegankelijkheid verplicht is.

Vanuit gebruiksvriendelijkheid en SEO-perspectief komt tekst met hoog contrast alle gebruikers ten goede in uitdagende omgevingen: fel zonlicht op een mobiel scherm, beeldschermen van lage kwaliteit of simpelweg een gebruiker die zijn monitor niet heeft gekalibreerd. Toegankelijke kleurkeuzes verminderen oogvermoeidheid bij ziende gebruikers tijdens langdurige leessessies, en verbeteringen in leesbaarheid correleren met lagere bouncepercentages en langere tijd op de pagina — signalen die zoekmachines gebruiken als kwaliteitsindicatoren.

Gerelateerde Axe-core-regels

• color-contrast: Dit is de primaire geautomatiseerde regel die WCAG 1.4.3 op Niveau AA afdwingt. De axe-core-engine berekent de voorgrond- en achtergrondkleuren van elk tekstknooppunt in de DOM, waarbij rekening wordt gehouden met de CSS-cascade, opaciteit, z-index-stapeling en alfa-transparantie. De engine markeert elk tekstelement waarvan de contrastverhouding onder 4,5:1 voor normale tekst of 3:1 voor grote tekst valt. De regel rapporteert de daadwerkelijke gevonden verhouding, de vereiste verhouding en het specifieke element dat is gefaald, waardoor herstel eenvoudig is. Axe-core kan echter alleen kleuren analyseren die het kan afleiden uit berekende stijlen; tekst die binnen <canvas> wordt gerenderd, over complexe CSS-verlopen of bovenop achtergrondafbeeldingen, is mogelijk niet volledig te bepalen zonder extra context, en axe zal die gevallen markeren als “needs review” in plaats van een definitieve pass of fail. Placeholdertekst in formulierinvoervelden wordt ook door deze regel gecontroleerd.
• color-contrast-enhanced: Deze regel dwingt de strengere WCAG 1.4.6 — Contrast (Enhanced) drempels af van 7:1 voor normale tekst en 4,5:1 voor grote tekst (Niveau AAA). Hoewel 1.4.6 niet vereist is voor AA-conformiteit, is het uitvoeren van deze regel tijdens de ontwikkeling waardevol voor teams die streven naar verbeterde toegankelijkheid of zich voorbereiden op regelgevende omgevingen die mogelijk AAA-eisen overnemen. Axe-core rapporteert overtredingen van deze regel afzonderlijk, zodat teams AA-fouten (color-contrast) kunnen onderscheiden van ambitieuze AAA-verbeteringen (color-contrast-enhanced).

Handmatige tests zijn vereist in verschillende scenario’s die geautomatiseerde tools niet volledig kunnen oplossen. Wanneer tekst over een achtergrondafbeelding of CSS-verloop is geplaatst, varieert de effectieve achtergrondkleur binnen het tekstkader. Geautomatiseerde tools moeten ofwel de dominante kleur bemonsteren, uitgaan van het slechtst denkbare gebied, of het overlaten aan een handmatige beoordelaar. Evenzo wordt tekst binnen <canvas>-elementen gerenderd als pixels zonder semantische kleurinformatie in de toegankelijkheidsboom, zodat handmatige inspectie met een pipettool de enige betrouwbare aanpak is. Tekst die alleen verschijnt bij :hover- of :focus-toestanden kan ook handmatige interactie vereisen om te worden geactiveerd voordat geautomatiseerde tools deze kunnen evalueren.

Hoe te Testen

1. Geautomatiseerde scan met axe DevTools: Installeer de browserextensie axe DevTools (beschikbaar voor Chrome, Firefox en Edge). Navigeer naar de te testen pagina, open het extensiepaneel en voer een volledige pagina-analyse uit. Filter in het resultatenpaneel op de regel-ID’s color-contrast en color-contrast-enhanced. Voor elke overtreding markeert de tool het falende element, rapporteert de daadwerkelijke contrastverhouding (bijv. “2,85:1”), de vereiste verhouding (bijv. “4,5:1”) en de berekende voorgrond- en achtergrondkleuren in hex. Exporteer de resultaten als CSV of JSON voor opvolging. Herhaal dit op alle breakpoints, omdat responsieve lay-outs lettergroottes kunnen wijzigen (wat de drempel voor grote tekst beïnvloedt) of kleurenschema’s kunnen wisselen.
2. Lighthouse-audit: Open Chrome DevTools, ga naar het Lighthouse-tabblad, selecteer “Accessibility” en voer de audit uit. Lighthouse toont contrastovertredingen in de sectie Accessibility met verwijzingen naar elementen. Merk op dat Lighthouse in sommige omgevingen een oudere versie van axe-core gebruikt; axe DevTools direct kan meer problemen detecteren.
3. Handmatige contrastmeting: Gebruik de ingebouwde kleurkiezer van de browser DevTools of een speciale tool zoals de WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) of de TPGi Colour Contrast Analyser desktopapplicatie. Selecteer de voorgrond- en achtergrondkleuren met de pipet en controleer of de gerapporteerde verhouding aan de drempel voldoet. Voor tekst op verlopen of afbeeldingen, bemonster meerdere punten binnen het tekstgebied en gebruik de meting met het laagste contrast als definitieve waarde.
4. Testen van interactieve toestanden: Activeer handmatig :hover-, :focus-, :active- en :visited-toestanden op links en interactieve elementen en meet vervolgens het contrast voor elke toestand afzonderlijk. Sommige ontwerpen gebruiken hoverkleuren met lager contrast die onbedoeld falen. Gebruik de functie “Force element state” in de browser DevTools om een toestand vast te houden tijdens het meten.
5. Screenreader- en toetsenbordcontrole (contextueel): Hoewel contrast een visueel criterium is en niet direct door screenreaders wordt gedetecteerd, bevestigt testen met NVDA + Firefox, VoiceOver + Safari of JAWS + Chrome dat tekst aanwezig is in de toegankelijkheidsboom en niet is verborgen via CSS-technieken (zoals color: transparent) die deze visueel ontoegankelijk zouden maken. Als een screenreader tekst aankondigt die op het scherm onzichtbaar lijkt, onderzoek dan of de visuele weergave voldoet aan de contrasteisen voor ziende gebruikers.
6. Zoom en lettertypeschaal: Verhoog de standaardlettergrootte van de browser (Instellingen → Vormgeving → Lettergrootte) en zoom tot 200%. Controleer of tekst die bij deze groottes van “normaal” naar “groot” overgaat nog steeds aan de juiste drempel voldoet. Een lettertype dat bij standaardzoom 14px is, kan bij 200% zoom 28px worden, waardoor een andere drempel van toepassing wordt.

Hoe te Herstellen

Hoofdtekst met onvoldoende contrast — Onjuist

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Hoofdtekst met onvoldoende contrast — Juist

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Call-to-actionknop met laag contrast — Onjuist

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Call-to-actionknop met laag contrast — Juist

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Placeholdertekst in formulierinvoer — Onjuist

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Placeholdertekst in formulierinvoer — Juist

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Tekst op een achtergrondafbeelding of -verloop — Onjuist

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Tekst op een achtergrondafbeelding of -verloop — Juist

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Veelvoorkomende Fouten

• Aannemen dat een kleur er goed uitziet op je gekalibreerde monitor: High-end beeldschermen met brede kleurengamuts en hoge helderheid kunnen combinaties met laag contrast leesbaar doen lijken voor ontwerpers met normaal zicht in een gecontroleerde omgeving, terwijl dezelfde tekst onleesbaar is op een budgetlaptop of onder tl-verlichting op kantoor. Controleer altijd met een contrastverhoudingstool, niet alleen op basis van visuele beoordeling.
• Vergeten interactieve toestanden afzonderlijk te testen: Een link kan in de standaardtoestand slagen met 4,5:1, maar terugvallen naar 2,8:1 bij :hover wanneer de kleur lichter wordt. Elke interactieve toestand moet onafhankelijk aan de drempel voldoen.
• Uitgeschakelde formuliervelden als universeel vrijgesteld beschouwen: De vrijstelling geldt alleen voor inactieve UI-componenten. Als een veld visueel als uitgeschakeld is gestileerd maar programmatisch nog steeds is ingeschakeld (zonder het attribuut disabled), is het niet vrijgesteld en moet het aan de contrasteisen voldoen.
• Opaciteit gebruiken om tekst te dimmen zonder rekening te houden met de effectieve kleur: Het instellen van opacity: 0.5 op donkere tekst mengt deze feitelijk met de achtergrond, waardoor een lichtere samengestelde kleur ontstaat. De contrastverhouding moet worden berekend ten opzichte van de resulterende samengestelde kleur, niet de oorspronkelijke CSS-waarde. Zo wordt #000000 bij 50% opaciteit op wit ongeveer weergegeven als #808080, met een contrastverhouding van ongeveer 3,9:1 — onder de drempel van 4,5:1 voor normale tekst.
• Tekst in SVG-elementen over het hoofd zien: SVG-<text>-elementen die zijn gestileerd met fill in plaats van CSS-color vallen nog steeds onder 1.4.3. Geautomatiseerde tools kunnen deze missen, afhankelijk van hoe de SVG is ingesloten (inline vs. <img> vs. <object>). Inline SVG is de meest betrouwbaar testbare aanpak.
• Tekstgrootte verkeerd inschatten voor de vrijstelling voor grote tekst: De drempels van 18pt / 14pt vet verwijzen naar de gerenderde grootte in de browser van de gebruiker, niet naar de CSS-pixelwaarde in de bron. CSS font-size: 24px is exact gelijk aan 18pt (aangezien 1pt = 1,333px), maar als de gebruiker een grotere standaardlettergrootte heeft ingesteld, kan een element van 16px groter dan 18pt worden gerenderd. Test bij standaardlettergroottes van de browser en controleer je grootteberekeningen zorgvuldig.
• Uitsluitend op kleur vertrouwen om gelinkte tekst van hoofdtekst te onderscheiden: Als een link zonder onderstreping is gestileerd en alleen kleur gebruikt om zich te onderscheiden van omliggende tekst, moet de linkkleur een verhouding van 3:1 behalen ten opzichte van de kleur van de hoofdtekst naast 4,5:1 ten opzichte van de paginabackground. Veel ontwerpen falen in een of beide van deze vereisten. Het toevoegen van onderstrepingen (of een andere visuele indicator die niet op kleur is gebaseerd) is de veiligere aanpak.
• Tekst in widgets van derden en chatplug-ins negeren: Ingesloten widgets — livechatvensters, cookietoestemmingsbanners, reviewcarrousels, socialmediafeeds — maken deel uit van de pagina en vallen binnen de reikwijdte van WCAG 1.4.3. Tekst met laag contrast in een widget van een derde is een fout, zelfs als je eigen codebasis volledig conform is.
• Niet opnieuw testen nadat de donkere modus of hoogcontrastmodus is geactiveerd: Een kleurenschema dat in de lichte modus slaagt, kan in de donkere modus falen als CSS-custom properties niet zorgvuldig worden beheerd. Evenzo overschrijft de hoogcontrastmodus van Windows veel CSS-kleurdeclaraties; controleer of tekst leesbaar blijft en of aangepaste CSS niet per ongeluk paren met laag contrast opnieuw introduceert in omgevingen met geforceerde kleuren.
• CSS background-clip: text of verloopteksttechnieken gebruiken zonder fallback: Met verloop gevulde tekst die is gemaakt via -webkit-background-clip: text; color: transparent vormt een complexe contrastuitdaging omdat de tekstkleur binnen de glyph varieert. Geautomatiseerde tools kunnen dit doorgaans niet oplossen, en de werkelijke luminantie van elk deel van de lettervorm moet handmatig worden gecontroleerd ten opzichte van de paginabackground.

Relatie met de Turkse Toegankelijkheidsregelgeving

De Turkse Presidential Circular No. 2025/10, gepubliceerd in het Staatsblad (Resmî Gazete) nr. 32933 op 21 juni 2025, stelt een bindend nationaal kader vast voor digitale toegankelijkheid. De circulaire schrijft conformiteit voor met internationaal erkende webtoegankelijkheidsstandaarden — waarmee de Turkse regelgeving in feite wordt afgestemd op WCAG 2.2 — en introduceert het Erişilebilirlik Logosu (Toegankelijkheidslogo), uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı), als het officiële certificeringsmerk voor conforme digitale producten en diensten.

WCAG 1.4.3 — Contrast (Minimum) is een succescriterium op Niveau AA, en conformiteit op Niveau AA is de basisvoorwaarde om in aanmerking te komen voor het Toegankelijkheidslogo. Dit betekent dat elke partij die het logo nastreeft, ervoor moet zorgen dat alle zichtbare, niet-uitgezonderde tekst en afbeeldingen van tekst op hun websites en applicaties voldoen aan de contrastdrempels van 4,5:1 (normale tekst) en 3:1 (grote tekst) die door dit criterium zijn gedefinieerd. Het niet voldoen aan 1.4.3 is een van de meest frequent gedetecteerde geautomatiseerde overtredingen en vormt een directe belemmering voor certificering.

De circulaire is van toepassing op een breed scala aan private en publieke organisaties. De betrokken partijen omvatten overheidsinstellingen en -agentschappen op centraal en lokaal niveau; banken en financiële instellingen die worden gereguleerd door de Banking Regulation and Supervision Agency (BDDK); ziekenhuizen en zorgaanbieders, zowel publiek als privaat; telecomoperators met 200.000 of meer abonnees; e-commerceplatforms die voldoen aan toepasselijke drempels voor omzet of transactievolume; reisagentschappen; private vervoersbedrijven; en particuliere scholen en onderwijsinstellingen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MEB).

Voor deze partijen is het aanpakken van contrastconformiteit niet slechts een aanbeveling voor best practices — het heeft een regulatoire lading. Niet-conforme organisaties lopen het risico op administratief toezicht en reputatieschade, terwijl conforme organisaties het Erişilebilirlik Logosu kunnen tonen als vertrouwenssignaal voor de ongeveer 8,5 miljoen mensen met een beperking in Turkije, evenals voor oudere gebruikers, mobiele gebruikers en het brede publiek dat profiteert van leesbaar, hoog-contrastontwerp.

Organisaties die in Turkije actief zijn en nog geen audit op WCAG 1.4.3 hebben uitgevoerd, zouden prioriteit moeten geven aan geautomatiseerde scans van alle publiek toegankelijke digitale contactpunten — web, mobiel web en waar van toepassing native applicaties — gevolgd door handmatige beoordeling van verloopachtergronden, afbeeldingsoverlay’s en ingesloten componenten van derden. Het opzetten van een design tokensysteem met vooraf goedgekeurde, op contrast geteste kleurparen is de meest schaalbare langetermijnoplossing, zodat nieuwe UI-componenten standaard toegankelijke kleurcombinaties overnemen en toekomstige redesigns niet per ongeluk contrastfouten introduceren.