WCAG 1.4.11: Contrast voor niet-tekst

Wat Deze Regel Betekent

WCAG 1.4.11 Non-text Contrast is een criterium op niveau AA dat is geïntroduceerd in WCAG 2.1 en overgenomen in WCAG 2.2. Het schrijft een minimale contrastverhouding van 3:1 voor tussen de visuele presentatie van de volgende twee categorieën inhoud en hun aangrenzende kleur(en):

• User Interface (UI) Components: De visuele grenzen of indicatoren die interactieve bedieningselementen identificeren, zoals tekstvelden, selectievakjes, keuzerondjes, schakelaars, dropdownmenu’s en knoppen. Dit omvat zowel het component zelf als alle visuele statuswijzigingen (bijv. hover, focus, geselecteerd, fout).
• Graphical Objects: Onderdelen van pictogrammen, grafieken, diagrammen en andere betekenisvolle afbeeldingen die nodig zijn om de inhoud te begrijpen. Elk deel van de grafiek dat informatie overbrengt, moet voldoen aan de 3:1-drempel ten opzichte van de omringende kleur.

De contrastverhouding wordt gemeten tussen het voorgrond­element en de kleur die er direct aan grenst — meestal de achtergrondkleur, randkleur of een aangrenzend segment van een grafiek. De berekening gebruikt dezelfde formule voor relatieve luminantie als gedefinieerd in WCAG 1.4.3, maar de drempel is 3:1 in plaats van 4.5:1 omdat niet-tekstuele elementen met iets lager contrast nog steeds herkenbaar kunnen blijven.

Een pass betekent dat elke visuele indicator die een UI-component identificeert of informatie in een grafisch element communiceert, ten minste een verhouding van 3:1 behaalt. Een fail treedt op wanneer een rand, iconenlijn, grafieksegment of statusindicator onder deze verhouding valt en het component of grafische element niet kan worden geïdentificeerd of begrepen zonder die visuele informatie.

De WCAG-specificatie definieert een aantal belangrijke uitzonderingen:

• Inactieve componenten: UI-componenten die zijn uitgeschakeld en niet beschikbaar zijn voor interactie zijn uitgezonderd. Een uitgegrijsde knop die niet kan worden aangeklikt, hoeft niet aan de contrasteis te voldoen.
• Weergave beheerd door de user agent: Componenten waarvan de visuele presentatie volledig wordt bepaald door de standaardopmaak van de browser (niet overschreven door CSS van de auteur) zijn uitgezonderd, omdat de verantwoordelijkheid bij de browserleverancier ligt.
• Essentiële of decoratieve grafische elementen: Grafische objecten waarbij de specifieke presentatie essentieel is voor de over te brengen informatie (bijv. nationale vlaggen die landen vertegenwoordigen) of die puur decoratief zijn, zijn uitgezonderd. Logo’s zijn in het algemeen ook uitgezonderd onder deze bepaling.
• Tekst: Tekst en afbeeldingen van tekst vallen al onder 1.4.3 en 1.4.6 en vallen niet onder 1.4.11.

Focusindicatoren verdienen speciale aandacht in WCAG 2.2. Criterium 2.4.11 (Focus Appearance) voegt strengere eisen toe voor focuszichtbaarheid, maar 1.4.11 blijft van toepassing op het contrast van elke aangepaste focusring ten opzichte van de achtergrond. Een aangepaste outline of box-shadow die als focusindicator wordt gebruikt, moet 3:1 behalen ten opzichte van de aangrenzende kleur om dit criterium op zichzelf te vervullen.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd hebben een vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Een aanzienlijk deel van deze personen — waaronder de naar schatting 253 miljoen mensen met matig tot ernstig gezichtsverlies — is afhankelijk van voldoende contrast om digitale interfaces waar te nemen en ermee te communiceren, zonder noodzakelijkerwijs een schermlezer te gebruiken. Gebruikers met een beperkt gezichtsvermogen die browsen met vergrotingssoftware, hoogcontrastmodi of simpelweg in uitdagende lichtomstandigheden, behoren tot de groepen die het meest direct worden getroffen door 1.4.11-fouten.

Neem een praktische situatie: een gebruiker met glaucoom vult een schadeformulier in op de website van een ziekenhuis. De formuliervelden gebruiken een lichtgrijze rand (#cccccc) op een witte achtergrond (#ffffff), wat een contrastverhouding van slechts 1,6:1 oplevert — ver onder de vereiste 3:1. De gebruiker kan niet zien waar de invoervelden beginnen en eindigen, waardoor hij of zij er niet betrouwbaar in kan klikken of de structuur van het formulier kan begrijpen. De gebruiker breekt het formulier volledig af, wat zowel een persoonlijke kost als een juridische aansprakelijkheid voor de instelling met zich meebrengt.

Naast visuele beperkingen kunnen cognitieve beperkingen er ook voor zorgen dat UI-componenten met laag contrast moeilijker te interpreteren zijn. Gebruikers met aandachtsstoornissen of verwerkingsproblemen zijn afhankelijk van een sterke visuele differentiatie tussen interactieve en niet-interactieve elementen om de paginastructuur snel te begrijpen. Evenzo moeten gebruikers met tremoren of motorische beperkingen die grote aanwijzerdoelen gebruiken, de grenzen van bedieningselementen duidelijk kunnen zien om nauwkeurig te kunnen mikken.

Vanuit zakelijk perspectief verbetert het voldoen aan 1.4.11 de bruikbaarheid voor alle gebruikers in suboptimale omstandigheden — fel zonlicht op een mobiel scherm, monitoren van lage kwaliteit of oudere displays met slechte kleurnauwkeurigheid. Het verlaagt de ondersteuningskosten, vergroot het bereik van het publiek en versterkt indirect de SEO door lagere bouncepercentages die samenhangen met slechte bruikbaarheid. Voor organisaties die onder wettelijke toegankelijkheidsverplichtingen vallen, vormt het niet voldoen aan dit criterium op niveau AA een direct compliance­risico.

Gerelateerde Axe-core-regels

• color-contrast (gedeeltelijke dekking): De axe-core-regel color-contrast richt zich primair op tekstcontrast onder WCAG 1.4.3, maar voert ook gedeeltelijke controles uit voor niet-tekstuele elementen in bepaalde contexten. Axe markeert UI-componenten zoals knoppen en formulierelementen wanneer het programmatisch kan bepalen dat de visuele grens of achtergrond van het component niet voldoet aan de 3:1-verhouding. De dekking van de regel is echter expliciet als partial gemarkeerd voor 1.4.11, omdat veel contrastfouten voor niet-tekstuele elementen onzichtbaar zijn voor geautomatiseerde analyse. Zo kan het contrast van de lijn van een SVG-pictogram ten opzichte van de achtergrond, of de rand van een aangepast gestileerd selectievakje dat is geïmplementeerd met CSS-pseudo-elementen, niet betrouwbaar uit de DOM worden gehaald zonder rendercontext. De berekende stijl van een CSS-rand kan aanwezig zijn in de toegankelijkheidsboom, maar de aangrenzende achtergrond — vooral wanneer dit een verloop, afbeelding of overlappend element is — is niet altijd programmatisch te berekenen. Daarom rapporteert axe 1.4.11-overtredingen onder de color-contrast-regel met de aanduiding needs review in veel gevallen, wat betekent dat de tool een potentieel probleem heeft gedetecteerd, maar dat een mens dit moet bevestigen door het element visueel te inspecteren en een kleurcontrast­analysetool te gebruiken om de daadwerkelijk gerenderde pixels te bemonsteren.

Omdat geautomatiseerde tools slechts een fractie van de contrastfouten bij niet-tekst kunnen detecteren, is handmatig testen essentieel. Tools zoals de Colour Contrast Analyser (TPGi), kleurkiezers in browser DevTools of de Accessible Colors-tool moeten worden gebruikt om voorgrond- en achtergrondkleuren rechtstreeks uit de gerenderde interface te bemonsteren. Geautomatiseerde scans moeten worden gezien als een eerste stap, niet als een volledige audit.

Hoe te Testen

1. Voer een geautomatiseerde scan uit met axe DevTools of Lighthouse: Installeer de browserextensie axe DevTools en voer een scan van de volledige pagina uit. Filter in het resultatenpaneel op problemen die zijn getagd met WCAG 1.4.11 of bekijk eventuele color-contrast-overtredingen. Noteer alle items die zijn gemarkeerd als Needs Review in de categorie non-text contrast — deze vereisen handmatige opvolging. Voer in Lighthouse (Chrome DevTools > tab Lighthouse) een Accessibility-audit uit en bekijk de contrastgerelateerde bevindingen, met in gedachten dat de dekking van Lighthouse voor niet-tekstuele elementen ook gedeeltelijk is.
2. Handmatige inspectie met een kleurcontrast­analyzer: Download en open de desktopapplicatie TPGi Colour Contrast Analyser. Gebruik de pipettool om de voorgrondkleur van elke UI-componentgrens te bemonsteren (bijv. de rand van een tekstveld, de lijn van een pictogram, de vulling van een grafiekbalk) en bemonster vervolgens de aangrenzende achtergrondkleur. De tool toont de berekende contrastverhouding. Elke verhouding onder 3:1 is een fout. Werk systematisch alle interactieve formulierelementen, knoppen met alleen pictogrammen, focusindicatoren en datavisualisaties door.
3. Toetsenbordnavigatie- en focusindicatortest: Doorloop de volledige pagina met alleen het toetsenbord via Tab. Controleer voor elk interactief element dat focus ontvangt of de focusindicator (ring, outline of achtergrondwijziging) zichtbaar is. Gebruik de contrastanalyzer om te bevestigen dat de kleur van de focusindicator 3:1 behaalt ten opzichte van de achtergrond van het element. Test in NVDA + Firefox en JAWS + Chrome om te bevestigen dat het element focus ontvangt in de verwachte volgorde en dat de visuele indicator niet wordt onderdrukt door CSS outline: none zonder een gelijkwaardige vervanging.
4. Test in hoogcontrast- en forced-color-modi: Activeer in Windows de Hoogcontrastmodus (Instellingen > Toegankelijkheid > Hoog contrast) en laad de pagina opnieuw. Open in op Chromium gebaseerde browsers DevTools, ga naar Rendering en schakel de optie Emulate CSS media feature forced-colors: active in. Controleer of de grenzen van UI-componenten zichtbaar blijven. Hoewel naleving van forced-color-modus niet strikt vereist is door 1.4.11, onthult testen in deze modus elementen die uitsluitend vertrouwen op kleur­aanwijzingen met laag contrast.
5. Controleer grafische objecten in context: Identificeer voor elke grafiek, elk pictogram, diagram of informatieve afbeelding elk segment of pad dat betekenis overbrengt. Gebruik de pipettool om aangrenzende kleuren binnen de grafiek zelf te bemonsteren (bijv. twee aangrenzende taartdiagramsegmenten) en ten opzichte van de omringende paginabackground. Elk afzonderlijk deel dat informatie communiceert, moet individueel 3:1 behalen.
6. Controleer alle componentstaten: Interactieve elementen hebben meerdere staten — standaard, hover, focus, actief, geselecteerd, aangevinkt, fout en succes. Test elke staat afzonderlijk. Een knoprand die in de standaardstaat slaagt, kan in de hoverstaat falen als de kleur verandert in een variant met laag contrast.

Hoe te Herstellen

Formulierveldrand — Onjuist

<!-- Fails: light grey border (#cccccc) on white (#ffffff) = 1.6:1 ratio -->
<style>
  .form-input {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 8px 12px;
  }
</style>
<label for='email'>Email Address</label>
<input type='email' id='email' class='form-input' />

Formulierveldrand — Correct

<!-- Passes: darker border (#767676) on white (#ffffff) = 4.54:1 ratio, exceeds 3:1 -->
<style>
  .form-input {
    border: 1px solid #767676; /* Darkened to achieve sufficient contrast */
    background-color: #ffffff;
    padding: 8px 12px;
  }
  .form-input:focus {
    outline: 3px solid #005fcc; /* Focus ring at 5.9:1 against white */
    outline-offset: 2px;
  }
</style>
<label for='email'>Email Address</label>
<input type='email' id='email' class='form-input' />

Knop met alleen pictogram — Onjuist

<!-- Fails: light grey icon (#aaaaaa) on white (#ffffff) = 2.32:1 ratio -->
<style>
  .icon-btn { background: none; border: none; color: #aaaaaa; }
</style>
<button class='icon-btn' aria-label='Delete item'>
  <svg aria-hidden='true' focusable='false' width='24' height='24'>
    <path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6' stroke='currentColor' stroke-width='2' fill='none'/>
  </svg>
</button>

Knop met alleen pictogram — Correct

<!-- Passes: dark icon (#595959) on white (#ffffff) = 7:1 ratio, well above 3:1 -->
<style>
  .icon-btn { background: none; border: none; color: #595959; cursor: pointer; }
  .icon-btn:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
  }
</style>
<button class='icon-btn' aria-label='Delete item'>
  <svg aria-hidden='true' focusable='false' width='24' height='24'>
    <!-- Darker stroke ensures the icon shape is perceivable -->
    <path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6' stroke='currentColor' stroke-width='2' fill='none'/>
  </svg>
</button>

Aangepast selectievakje — Onjuist

<!-- Fails: custom checkbox uses a light border (#d0d0d0) on white background -->
<style>
  .custom-checkbox-box {
    width: 18px; height: 18px;
    border: 2px solid #d0d0d0; /* 1.3:1 ratio against white — fails */
    border-radius: 3px;
    display: inline-block;
  }
</style>
<label>
  <input type='checkbox' style='position:absolute;opacity:0;width:0;height:0' />
  <span class='custom-checkbox-box'></span>
  I agree to the terms
</label>

Aangepast selectievakje — Correct

<!-- Passes: border (#5a5a5a) on white = 7.2:1. Checked state tick also uses sufficient contrast -->
<style>
  .custom-checkbox-input {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .custom-checkbox-box {
    width: 18px; height: 18px;
    border: 2px solid #5a5a5a; /* Sufficient contrast against white background */
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
  }
  .custom-checkbox-input:checked + .custom-checkbox-box {
    background-color: #005fcc; /* Blue fill on checked */
    border-color: #005fcc;
  }
  .custom-checkbox-input:checked + .custom-checkbox-box::after {
    content: '';
    display: block;
    width: 10px; height: 6px;
    border-left: 2px solid #ffffff; /* White tick on blue = 5.9:1 */
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translateY(-2px);
  }
  .custom-checkbox-input:focus-visible + .custom-checkbox-box {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>
<label class='custom-label'>
  <input type='checkbox' class='custom-checkbox-input' />
  <span class='custom-checkbox-box' aria-hidden='true'></span>
  I agree to the terms
</label>

Datagrafiek — Onjuist

<!-- Fails: two adjacent pie chart segments use similar light hues with <3:1 contrast -->
<svg viewBox='0 0 200 200' aria-label='Market share chart' role='img'>
  <!-- Segment A: #f5c6cb (light pink) adjacent to Segment B: #ffeeba (light yellow) -->
  <!-- Contrast ratio between these two colors is approximately 1.1:1 — fails -->
  <path d='M100,100 L100,10 A90,90 0 0,1 190,100 Z' fill='#f5c6cb' />
  <path d='M100,100 L190,100 A90,90 0 0,1 100,190 Z' fill='#ffeeba' />
</svg>

Datagrafiek — Correct

<!-- Passes: use high-contrast segment fills OR add a visible border between segments -->
<svg viewBox='0 0 200 200' aria-label='Market share chart: Segment A 50%, Segment B 25%' role='img'>
  <!-- Option 1: Use a dark stroke between segments to separate them at 3:1 against both fills -->
  <path d='M100,100 L100,10 A90,90 0 0,1 190,100 Z' fill='#d63384' stroke='#ffffff' stroke-width='2' />
  <path d='M100,100 L190,100 A90,90 0 0,1 100,190 Z' fill='#0d6efd' stroke='#ffffff' stroke-width='2' />
  <!-- The white (#ffffff) stroke separates the two segments; each fill also has 3:1 against white bg -->
</svg>

Veelvoorkomende Fouten

• Een rand van één pixel gebruiken die 3:1 haalt maar onzichtbaar wordt bij lage DPI: Zelfs een kleur die voldoet, kan onwaarneembaar worden als de rand slechts 1px breed is op een scherm met lage resolutie. Gebruik border: 2px solid of een zichtbare box-shadow naast een kleur die voldoet om ervoor te zorgen dat de grens fysiek waarneembaar is.
• Aannemen dat de achtergrond altijd wit is: Wanneer een formulierveld of pictogram in een kaart of zijbalk met een lichtgrijze achtergrond (#f5f5f5) verschijnt, moet het contrast worden gemeten ten opzichte van dat grijs, niet ten opzichte van wit. Een rand die op wit slaagt, kan falen op een getinte achtergrond.
• De standaard focus-outline verwijderen met outline: none zonder een equivalent te bieden: Dit is een van de meest voorkomende 1.4.11-fouten. Globaal :focus { outline: none; } instellen vernietigt de focuszichtbaarheid voor toetsenbordgebruikers. Vervang dit altijd door een aangepaste focusstijl die ten minste 3:1 contrast behaalt ten opzichte van de achtergrond.
• De uitgeschakelde staat gebruiken als excuus om alle contrastcontroles over te slaan: Uitgeschakelde componenten zijn uitgezonderd, maar ontwikkelaars markeren soms elementen visueel als uitgeschakeld via styling met laag contrast zonder daadwerkelijk het attribuut disabled of aria-disabled='true' toe te voegen. Een element dat eruitziet als uitgeschakeld maar nog steeds interactief is, moet nog steeds voldoen aan 1.4.11.
• Uitsluitend vertrouwen op kleur om grafieksegmenten te onderscheiden zonder scheidende lijn: Twee aangrenzende grafieksegmenten waarbij het enige onderscheid de kleurtoon is (bijv. lichtblauw versus lichtgroen) kunnen falen als hun contrastverhouding onder 3:1 ligt. Het toevoegen van een witte of donkere scheidingslijn van 2px tussen segmenten is een betrouwbare oplossing.
• Contrastfixes alleen toepassen op de standaardstaat en hover-, focus-, fout- en successtaten vergeten: Elke interactieve staat heeft een eigen visuele presentatie. Een knoprand die in de standaardstaat slaagt, kan bij hover verschuiven naar een kleur met laag contrast. Alle staten moeten afzonderlijk worden getest.
• Pictogrammen insluiten als achtergrondafbeeldingen en vertrouwen op CSS-kleur voor contrast: SVG-pictogrammen die inline in HTML staan, reageren op color en currentColor, maar pictogrammen die als CSS-background-image worden gebruikt, kunnen niet via CSS van kleur worden veranderd. Als het pictogrambestand zelf onvoldoende contrast heeft, kan geen enkele CSS-fix het probleem oplossen zonder het bestand te vervangen.
• Vergeten dat placeholdertekst in invoervelden niet onder 1.4.11 valt maar wel gereguleerd is: Placeholdertekst valt onder 1.4.3 (tekstcontrast van 4.5:1), niet onder 1.4.11. Ontwikkelaars passen soms per vergissing de 3:1-drempel toe op placeholdertekst, waardoor een afzonderlijke, onopgemerkte 1.4.3-fout ontstaat.
• CSS-transities gebruiken die animeren via een niet-conforme tussentijdse kleur: Een element kan animeren van een kleur die voldoet via een tussentijdse kleur die faalt naar een andere kleur die voldoet. Zelfs als de begin- en eindstaat slagen, is het visuele component technisch niet conform tijdens de overgang. Gebruik prefers-reduced-motion-mediaqueries zorgvuldig en vermijd transities via staten met laag contrast.
• Voortgangsbalken, range-inputs en schakelaars negeren: Deze aangepaste UI-componenten worden vaak gestileerd zonder rekening te houden met 1.4.11. Het gevulde deel van een voortgangsbalk moet 3:1 contrast hebben ten opzichte van de track; de knop van een schakelaar moet contrasteren met de achtergrond van de schakelaar; de duim van een range-input moet contrasteren met de track.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular No. 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte toegankelijkheidseisen voor web en mobiel vast voor een brede reeks publieke en private entiteiten die in Turkije actief zijn. De circulaire neemt WCAG 2.2 over als normatieve technische standaard, en conformiteit op niveau AA is de vereiste drempel voor naleving.

WCAG 1.4.11 Non-text Contrast, als criterium op niveau AA, is daarom rechtstreeks afdwingbaar onder de circulaire. Organisaties die onder de regeling vallen, moeten ervoor zorgen dat alle grenzen van UI-componenten, interactieve controlestaten en betekenisvolle grafische objecten op hun digitale eigendommen voldoen aan de 3:1-eis voor non-text contrast.

De entiteiten die onder Presidential Circular 2025/10 vallen, omvatten overheidsinstellingen en -agentschappen op alle bestuursniveaus, e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en particuliere zorgaanbieders, telecomoperators met 200.000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministry of National Education (MoNE). Voor deze organisaties is het niet implementeren van 1.4.11 niet slechts een tekortkoming in best practices, maar een reglementaire non-conformiteit.

Het Accessibility Logo (Erişilebilirlik Logosu), uitgegeven door het Ministry of Family and Social Services, fungeert als een publiek zichtbaar certificeringsmerk voor conforme digitale diensten. Om dit logo te verkrijgen en te mogen tonen, moet een organisatie volledige conformiteit op niveau AA aantonen voor alle toepasselijke WCAG 2.2-criteria, inclusief 1.4.11. Omdat veel Turkse e-governmentportalen, bankinterfaces en zorgformulieren intensief gebruikmaken van aangepast gestileerde formulierelementen en datavisualisaties, is non-text contrast een criterium dat auditors tijdens het certificeringsproces bijzonder waarschijnlijk zullen beoordelen.

Organisaties die de Accsible-overlaywidget gebruiken, moeten zich ervan bewust zijn dat overlaytechnologie kan helpen bij het herstellen van bepaalde contrastaanpassingen tijdens runtime — zoals gebruikers de mogelijkheid geven een hoogcontrastthema te activeren — maar dat blijvende structurele fouten, zoals een formulierveld dat wordt gerenderd met een randcontrast van 1,6:1, op codeniveau moeten worden gecorrigeerd om daadwerkelijke conformiteit te bereiken en in aanmerking te komen voor de Erişilebilirlik Logosu. Het combineren van fixes op codeniveau met de gebruikersgerichte verbeteringsfuncties van een toegankelijkheidswidget vertegenwoordigt de meest verdedigbare compliance­houding onder de Turkse wet.