WCAG 1.4.6: Contrast (Verhoogd)

Wat Deze Regel Betekent

WCAG 1.4.6 Contrast (Enhanced) is een succescriterium op niveau AAA onder Richtlijn 1.4 (Onderscheidbaar). Het vereist dat de visuele presentatie van tekst en afbeeldingen van tekst een contrastverhouding heeft van minimaal 7:1 ten opzichte van de achtergrond. Voor grote tekst — gedefinieerd als minimaal 18pt (ongeveer 24px) bij normaal lettergewicht, of minimaal 14pt (ongeveer 18,67px) bij vet lettergewicht — is de vereiste contrastverhouding minimaal 4,5:1. Dit is een aanzienlijke stap hoger dan criterium 1.4.3 op niveau AA, dat slechts 4,5:1 vereist voor normale tekst en 3:1 voor grote tekst.

De contrastverhouding wordt berekend met behulp van de relatieve luminantie van de twee betrokken kleuren, zoals gedefinieerd in de WCAG-specificatie. De formule houdt rekening met de gelineariseerde RGB-waarden van de voorgrond- en achtergrondkleuren om een verhouding te produceren die varieert van 1:1 (geen contrast, identieke kleuren) tot 21:1 (maximaal contrast, zwart op wit of wit op zwart).

Dit criterium is van toepassing op alle gerenderde tekst in de interface, inclusief tekst binnen afbeeldingen, pictogrammen die tekst bevatten en tekst die wordt gerenderd in canvas-elementen waarbij de gerenderde output toegankelijk is. Het heeft invloed op koppen, lopende tekst, labels, placeholdertekst in formuliervelden wanneer deze betekenisvolle informatie overbrengt, knoplabels, linktekst, navigatie-items en alle andere tekstuele inhoud die zichtbaar is op het scherm.

WCAG 1.4.6 deelt dezelfde officiële uitzonderingen als criterium 1.4.3. De volgende zaken zijn expliciet uitgesloten van de vereiste:

• Incidentele tekst: Tekst of afbeeldingen van tekst die puur decoratief zijn, die voor niemand zichtbaar zijn, of die deel uitmaken van een afbeelding die aanzienlijk andere visuele inhoud bevat. Een voorbeeld is tekst die zichtbaar is op de achtergrond van een foto die als decoratie wordt gebruikt.
• Logotypes: Tekst die deel uitmaakt van een logo of merknaam heeft geen contrastvereiste. Dit geldt alleen voor het woordmerk-gedeelte van het logo van een bedrijf, niet voor aangrenzende lopende tekst of UI-labels.
• Inactieve gebruikersinterfacecomponenten: Tekst binnen uitgeschakelde formulierelementen, uitgeschakelde knoppen of andere interface-elementen die momenteel niet bedienbaar zijn, is vrijgesteld. Deze vrijstelling moet echter spaarzaam worden toegepast — inactieve UI moet nog steeds voldoende waarneembaar zijn om het bestaan ervan te communiceren.

Een voldoende resultaat onder dit criterium betekent dat elke instantie van tekstinhoud die niet expliciet is uitgezonderd, voldoet aan of hoger is dan de verhouding 7:1 (of 4,5:1 voor grote tekst). Een onvoldoende resultaat treedt op wanneer enige niet-uitgezonderde tekst onder deze drempels valt, zelfs met een kleine marge. Het contrast moet standhouden in alle ondersteunde toestanden — hover, focus, actief, bezocht — aangezien het criterium van toepassing is op de gerenderde presentatie in elk van deze toestanden.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd leven met een vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Van hen ervaren honderden miljoenen aandoeningen die direct het vermogen verminderen om kleuren te onderscheiden of tekst met laag contrast waar te nemen, waaronder cataract, glaucoom, maculadegeneratie en verschillende vormen van kleurenzienstoornis. Voor deze populatie kunnen interfaces die slechts voldoen aan de AA-contrastdrempel van 4,5:1 nog steeds aanzienlijke barrières vormen voor lezen en begrip.

De verhouding 7:1 die door dit criterium wordt geëist, is specifiek gekalibreerd om rekening te houden met het verlies aan contrastgevoeligheid dat gepaard gaat met verouderende ogen en veelvoorkomende slechtziendheidscondities. Onderzoek in de visuele wetenschap toont aan dat iemand met matig verminderde contrastgevoeligheid — ruwweg gelijk aan een persoon met 20/80 zicht met correctie — een effectieve contrastreductie van ongeveer drie op één kan ervaren. Een ontwerpverhouding van 7:1 levert, na deze perceptuele reductie, nog steeds ongeveer 2,3:1 waargenomen contrast op, wat in de buurt ligt van de minimale drempel waarop tekst leesbaar wordt. Zonder deze marge kunnen dergelijke gebruikers de inhoud mogelijk helemaal niet lezen.

Stel een scenario uit de echte wereld voor: een 68-jarige bankklant die op een heldere middag zijn financiën online beheert, terwijl zonlicht op het laptopscherm weerkaatst. Zelfs met volledig functioneel zicht in klinische termen kunnen schittering en de natuurlijke vermindering van contrastgevoeligheid die gepaard gaat met veroudering middelgrijze tekst op een witte achtergrond volledig onleesbaar maken. Een ontwerp dat onder normale omstandigheden 7:1 contrast bereikt, zal in deze context nog steeds bruikbaar zijn; een ontwerp dat net boven 4,5:1 uitkomt, zal dat niet zijn.

Los van de impact specifiek voor beperkingen, komt tekst met hoog contrast vrijwel alle gebruikers ten goede in suboptimale leesomgevingen: fel zonlicht buiten, versleten schermen met verminderde achtergrondverlichting, monochrome e-ink-displays en projectoren van lage kwaliteit in vergaderruimtes. De verhoogde contrastvereiste vertegenwoordigt daarom niet alleen een verbetering van de toegankelijkheid, maar ook een brede verbetering van de bruikbaarheid.

Vanuit het perspectief van zoekmachineoptimalisatie hangt tekst met hoog contrast vaak samen met schonere, beter gestructureerde typografische hiërarchieën. Hoewel zoekmachines contrast niet direct meten, zorgt de ontwerpdiscipline die nodig is om aan AAA-contrastnormen te voldoen er doorgaans voor dat pagina’s een sterkere visuele hiërarchie en betere leesbaarheidscores hebben, wat bijdraagt aan lagere bouncepercentages en langere bezoektijden — signalen die de SEO-prestaties indirect ten goede komen.

Gerelateerde Axe-core-regels

• color-contrast-enhanced: Dit is de primaire axe-core-regel die is gekoppeld aan WCAG 1.4.6. De regel evalueert de berekende voorgrond- en achtergrondkleuren van alle tekstnodes in de DOM en berekent hun contrastverhouding met behulp van de WCAG-luminantieformule. De regel markeert elk tekstelement waarbij de contrastverhouding onder 7:1 valt voor tekst van normale grootte of onder 4,5:1 voor grote tekst (zoals gedefinieerd door de berekende font-size en font-weight). De regel rapporteert de daadwerkelijke gevonden verhouding, de vereiste verhouding en het verantwoordelijke element, waardoor herstel eenvoudig is. De regel maakt onderscheid tussen normale en grote tekst met dezelfde grootte-drempels als WCAG definieert: 18pt (24px) voor normaal gewicht en 14pt (18,67px) voor vet.
• Beperkingen die handmatige tests vereisen: Geautomatiseerde regels zoals color-contrast-enhanced kunnen contrastfouten in een aantal belangrijke scenario’s niet detecteren. Tekst die wordt gerenderd binnen <canvas>-elementen is onzichtbaar voor de DOM-gebaseerde scanner en vereist handmatige visuele inspectie. Tekst die over verloop- of fotografische achtergronden wordt geplaatst, vormt een bijzonder moeilijke uitdaging: de contrastverhouding varieert over de tekst, afhankelijk van welk deel van het verloop of de afbeelding achter elke letter valt. Geautomatiseerde tools nemen in deze gevallen doorgaans één achtergrondkleur als steekproef of rapporteren niet-conclusieve resultaten. Tekst die van kleur verandert bij hover of focus moet ook in elke interactieve toestand handmatig worden getest, aangezien geautomatiseerde scans meestal alleen de standaard gerenderde toestand vastleggen. Daarnaast kan tekst waarvan het contrast afhangt van CSS-custom properties die tijdens runtime via JavaScript worden opgelost, mogelijk niet worden geëvalueerd tijdens een statische scan.

Hoe te Testen

1. Geautomatiseerde scan met axe DevTools: Installeer de browserextensie axe DevTools (Chrome of Firefox). Open de doelpagina, activeer de extensie en voer een volledige paginascan uit. Filter in het resultatenpaneel op de regel-ID color-contrast-enhanced of zoek naar "enhanced" in de lijst met issues. Voor elk gemarkeerd element toont het paneel het element, de daadwerkelijke contrastverhouding en de vereiste verhouding. Noteer alle elementen die worden gerapporteerd als “needs review” in plaats van een definitieve voldoende of onvoldoende — deze hebben doorgaans betrekking op berekende achtergronden die niet konden worden bepaald en vereisen handmatige verificatie.
2. Geautomatiseerde scan met Lighthouse: Open Chrome DevTools, ga naar het Lighthouse-tabblad en voer een toegankelijkheidsaudit uit. Lighthouse gebruikt intern axe-core, dus het zal dezelfde color-contrast-enhanced-overtredingen tonen. Het rapport groepeert ze onder Accessibility en linkt naar elk falend element. Houd er rekening mee dat Lighthouse de pagina in de standaardtoestand test en geen interactieve toestanden zoals hover of focus test.
3. Handmatige kleursteekproeven: Gebruik de colorpicker van de ontwikkelaarstools van de browser of een speciale tool zoals de Colour Contrast Analyser (TPGi) om handmatig de voorgrond- en achtergrondkleuren van tekstelementen te bemonsteren. Dit is vooral belangrijk voor tekst over afbeeldingen, verlopen of semi-transparante achtergronden. Neem meerdere steekproeven langs de tekst waar de achtergrond varieert en controleer of de minimale contrastverhouding over alle bemonsterde punten 7:1 haalt voor normale tekst of 4,5:1 voor grote tekst.
4. Testen van interactieve toestanden: Forceer met behulp van browser DevTools elementen in hun hover-, focus-, actieve en bezochte toestanden (via het :hov-paneel in Chrome DevTools of equivalent). Voer de contrastcontrole in elke toestand opnieuw uit om te verzekeren dat kleurveranderingen die via CSS-pseudoklassen worden toegepast geen contrastfouten introduceren. Besteed bijzondere aandacht aan bezochte linktoestanden, hovertoestanden van knoppen en focusindicatoren van formuliervelden.
5. Screenreader-verificatie (NVDA + Firefox): Hoewel screenreaders contrast niet direct testen, bevestigt het verifiëren dat tekst toegankelijk is voor NVDA dat het echte tekst in de DOM is (en geen afbeelding van tekst zonder alternatief). Start Firefox, open NVDA en blader door de pagina met de leescursor. Alle tekst die NVDA niet kan lezen, moet worden onderzocht om te bepalen of het een afbeelding van tekst is die contrasttesten op afbeeldeniveau vereist.
6. Screenreader-verificatie (VoiceOver + Safari op macOS): Activeer VoiceOver met Command+F5 en navigeer door de pagina met VO+Pijl rechts. Net als bij NVDA kan tekst die VoiceOver overslaat of onjuist leest, wijzen op niet-standaard textrendering die handmatige contrastinspectie vereist.
7. Grijswaardesimulatie: Schakel de grijswaardemodus in via de toegankelijkheidsinstellingen van het besturingssysteem (beschikbaar op Windows, macOS, iOS en Android). Dit verwijdert alle kleurinformatie en maakt contrastverschillen direct zichtbaar. Tekst die moeilijk leesbaar wordt in grijswaardemodus, voldoet vrijwel zeker niet aan de vereiste voor verhoogd contrast.

Hoe te Herstellen

Lopende tekst op lichte achtergrond — Onjuist

<!-- Fails 1.4.6: #767676 on #ffffff yields approximately 4.54:1,
     which passes AA (1.4.3) but falls far short of the 7:1 AAA requirement -->
<p style='color: #767676; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Lopende tekst op lichte achtergrond — Juist

<!-- Passes 1.4.6: #595959 on #ffffff yields approximately 7.0:1,
     meeting the enhanced contrast requirement for normal-weight body text -->
<p style='color: #595959; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Gekleurde kop op merkachtergrond — Onjuist

<!-- Fails 1.4.6: brand blue #4A90D9 on white #ffffff yields approximately 3.0:1.
     Even though this is a heading and may appear large, bold headings at
     common web sizes (e.g. 20px bold) may not qualify as WCAG "large text"
     depending on rendering, and 3.0:1 fails even the large-text 4.5:1 threshold -->
<h2 style='color: #4A90D9; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Gekleurde kop op merkachtergrond — Juist

<!-- Passes 1.4.6: dark navy #1A3A5C on white #ffffff yields approximately 12.6:1.
     Exceeds the 7:1 requirement for normal text and comfortably surpasses
     the 4.5:1 large-text requirement. Brand identity is preserved through
     the use of a darker shade within the same hue family. -->
<h2 style='color: #1A3A5C; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Tekst over een verloopachtergrond — Onjuist

<!-- Fails 1.4.6: The gradient transitions from a dark color that provides
     adequate contrast on the left to a light color that provides insufficient
     contrast on the right. Text spanning the full width will fail at some point. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff;'>Create your account today and get started.</p>
</div>

Tekst over een verloopachtergrond — Juist

<!-- Passes 1.4.6: A semi-transparent dark overlay behind the text ensures
     that foreground text maintains at least 7:1 contrast regardless of
     the underlying gradient value at any point beneath the text block. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff; background-color: rgba(0,0,0,0.75); padding: 8px 12px; display: inline-block;'>
    Create your account today and get started.
  </p>
</div>

Placeholdertekst in formulierinvoer — Onjuist

<!-- Fails 1.4.6: default browser placeholder styling is typically around
     #aaaaaa on white, yielding approximately 2.32:1. If placeholder text
     conveys meaningful information (e.g. format hints), it must meet contrast requirements. -->
<input type='text' placeholder='DD/MM/YYYY' style='background: #ffffff;'>

Placeholdertekst in formulierinvoer — Juist

<!-- Passes 1.4.6: Override the default placeholder color to achieve 7:1 contrast.
     Also adds a visible label as best practice, since placeholders disappear on input. -->
<label for='dob'>Date of Birth</label>
<input type='text' id='dob' placeholder='DD/MM/YYYY'
  style='background: #ffffff; color: #000000;'>
<style>
  input::placeholder {
    color: #595959; /* approximately 7.0:1 on white — meets AAA */
  }
</style>

Veelvoorkomende Fouten

• Uitsluitend vertrouwen op AA-goedgekeurde kleurcombinaties zonder AAA-drempels te controleren: Veel ontwerpers gebruiken de veelvoorkomende middelgrijze kleur #767676 op wit, die voldoet aan 1.4.3 met ongeveer 4,54:1 maar 1.4.6 met een aanzienlijke marge niet haalt. Controleer altijd tegen de 7:1-doelstelling, niet alleen 4,5:1.
• Aannemen dat uitzonderingen voor grote tekst te ruim van toepassing zijn: De uitzondering voor grote tekst (4,5:1 in plaats van 7:1) geldt alleen voor tekst die minimaal 18pt (24px) is bij normaal gewicht of minimaal 14pt (18,67px) bij vet gewicht. Tekst op 20px bij normaal gewicht komt niet in aanmerking en moet nog steeds 7:1 halen.
• Contrast in interactieve toestanden negeren: Een lichtere kleur toepassen bij hover om een visuele affordance te creëren zonder te controleren of de hovertoestand nog steeds 7:1 haalt. Bijvoorbeeld: het donkerder maken van een knopachtergrond bij hover terwijl de witte tekst behouden blijft, kan nog steeds slagen, maar het lichter maken van tekst bij hover veroorzaakt vaak fouten.
• CSS-custom property-ketens over het hoofd zien: Een tekstkleur definiëren als var(--color-primary) waarbij --color-primary globaal is ingesteld maar lokaal in de component-scope wordt overschreven zonder het contrast opnieuw te verifiëren. De effectief gerenderde kleur kan afwijken van de globale tokenwaarde en in specifieke componentcontexten een falende verhouding opleveren.
• De vrijstelling voor uitgeschakelde toestanden als ontwerplicentie behandelen: De vrijstelling voor inactieve UI gebruiken als rechtvaardiging om uitgeschakelde elementen te stijlen met 1:1 contrast (onzichtbare tekst), waardoor gebruikers niet kunnen weten dat een veld überhaupt bestaat. Uitgeschakelde elementen moeten nog steeds visueel waarneembaar zijn, zelfs als ze zijn vrijgesteld van de 7:1-vereiste.
• Tekst over afbeeldingen of video niet testen: Tekst direct over een hero-afbeelding of videobackground plaatsen en het contrast alleen controleren tegen de gemiddelde kleur in plaats van het lichtste deel van de afbeelding waar de tekst overheen loopt. Het minimale contrast moet standhouden over elke pixel onder de tekst, niet gemiddeld.
• Contrastfixes alleen toepassen op desktop-breakpoints: Responsieve ontwerpen die andere achtergrondkleuren gebruiken op mobiele breakpoints — bijvoorbeeld overschakelen van een witte desktopachtergrond naar een licht beige kaartachtergrond — kunnen nieuwe contrastfouten introduceren op kleinere schermformaten die tijdens desktoptesten niet aanwezig waren.
• Contrast van focusindicator-tekst vergeten: Wanneer een aangepaste focusring of focustoestand zowel de achtergrond als de tekstkleur van een gefocust element verandert, moet de nieuwe combinatie van tekst en achtergrond in de focustoestand onafhankelijk voldoen aan de verhouding 7:1, ongeacht wat de standaardtoestand bereikt.
• Aannemen dat de logo-vrijstelling zich uitstrekt tot aangrenzende beschrijvende tekst: Een tagline of productbeschrijving in hetzelfde typografische blok plaatsen als een merklogo en de logo-vrijstelling claimen voor het hele blok. De vrijstelling geldt strikt voor tekst die een integraal onderdeel is van het logo zelf, niet voor nabijgelegen tekst.
• Contrast niet valideren na CSS-framework-overrides: Een externe componentbibliotheek of CSS-framework importeren dat tekstkleuren reset of overschrijft met waarden onder 7:1, en deze defaults vervolgens uitrollen zonder audit. Framework-defaults zijn bijna nooit gekalibreerd op AAA-contrastnormen.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte digitale toegankelijkheidseisen vast voor een breed scala aan instellingen en organisaties die in Turkije actief zijn. De circulaire schrijft conformiteit met WCAG 2.2 op niveau AA voor als basisstandaard. De gedekte entiteitstypen omvatten overheidsinstellingen en -agentschappen, e-commerceplatforms, banken en aanbieders van financiële diensten, ziekenhuizen en zorgorganisaties, telecommunicatiebedrijven met 200.000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE).

WCAG 1.4.6 Contrast (Enhanced) is een criterium op niveau AAA en is daarom geen verplichte vereiste onder de Presidentiële Circulaire. Organisaties die alleen naleving op niveau AA bereiken — de wettelijk verplichte basislijn — zullen de circulaire niet schenden door de vereiste voor verhoogd contrast van 7:1 weg te laten, mits zij voldoen aan de AA-drempel van 4,5:1 voor normale tekst zoals gedefinieerd in criterium 1.4.3.

Het bereiken van AAA-conformiteit op contrast vertegenwoordigt echter een betekenisvolle inzet voor inclusief ontwerp die ruim verder gaat dan minimale wettelijke naleving. Voor overheidsinstellingen, die de breedste verplichting hebben om alle burgers te bedienen ongeacht hun handicapstatus, geeft het vrijwillig aannemen van de norm voor verhoogd contrast blijk van een oprechte toewijding aan universele toegang. Zorgorganisaties en ziekenhuizen — sectoren waar patiënten mogelijk al onder fysieke of cognitieve stress staan, of digitale systemen gebruiken in uitdagende omstandigheden zoals fel klinisch licht — hebben een bijzonder sterke praktische reden om de minimale contrastdrempel te overschrijden. Evenzo zijn banken en aanbieders van financiële diensten, wier klantenbestand in toenemende mate oudere gebruikers omvat, goed gepositioneerd om te profiteren van de geloofwaardigheid en het gebruikersvertrouwen dat AAA-contrastconformiteit uitstraalt.

Organisaties die ISO 30071-1-certificering nastreven, zich willen richten op de Europese EN 301 549 of deelnemen aan internationale aanbestedingsprocessen waarin de volwassenheid van toegankelijkheid wordt geëvalueerd, zullen merken dat conformiteit met contrast op niveau AAA hun positie versterkt. Naarmate de handhaving van digitale toegankelijkheid wereldwijd en specifiek in Turkije volwassener wordt, zijn criteria die momenteel op niveau AAA staan in het verleden vaak verschoven naar verplichte status in opeenvolgende regelgevingsupdates. Het nu aannemen van verhoogd contrast plaatst organisaties voor op waarschijnlijk toekomstige vereisten en vermindert de kosten van latere herstelmaatregelen.

Voor organisaties die de Accsible overlay SDK gebruiken, kunnen de contrastaanpassingstools van het platform gebruikers helpen om op widgetniveau hoogcontrastmodi toe te passen, wat een compenserende laag biedt die helpt de kloof te overbruggen tussen de contrastniveaus van het gepubliceerde ontwerp en de behoeften van een individuele gebruiker. Dit vervangt niet het voldoen aan het criterium op broncodeniveau, maar biedt wel betekenisvolle runtime-ondersteuning voor gebruikers die verhoogd contrast nodig hebben en sites bezoeken die nog geen volledige AAA-conformiteit hebben bereikt.