WCAG 2.0 - Succescriterium 1.4.6 Contrast (versterkt)

Principe 1: Waarneembaar - informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze

Richtlijn 1.4 Onderscheidbaar: Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond

Bedoeling van Richtlijn 1.4

Terwijl sommige richtlijnen erop zijn gericht om informatie beschikbaar te maken in een vorm die in alternatieve formats kan worden gepresenteerd, gaat het er in deze richtlijn om dat mensen met functiebeperkingen op een zo gemakkelijk mogelijke manier de standaardpresentatie waar kunnen nemen. Hierbij gaat het er hoofdzamelijk om dat het gebruikers gemakkelijker wordt gemaakt om voorgrondinformatie van de achtergrond te scheiden. Voor visuele presentaties betekent dit dat ervoor moet worden gezorgd dat informatie die boven op een achtergrond wordt gepresenteerd voldoende met de achtergrond contrasteert. Voor audiopresentaties betekent dit dat ervoor moet worden gezorgd dat voorgrondgeluiden voldoende luider zijn dan de achtergrond. Individuen met visuele en auditieve functiebeperkingen hebben veel meer moeite om voorgrond- en achtergrondinformatie te scheiden.

Succescriterium 1.4.6 Contrast (versterkt)

1.4.6 Contrast (versterkt): De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 7:1, behalve in de volgende gevallen: (Niveau AAA)

  • Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 4,5:1;

  • Incidenteel: Tekst of afbeeldingen van tekst die onderdeel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis.

  • Logotypes: Tekst die onderdeel is van een logo of merknaam heeft geen minimum contrasteis.

Niveau van conformiteit

AAA

Bedoeling van dit Succescriterium

De bedoeling van dit Succescriterium is om voldoende contrast te bieden tussen de tekst en de achtergrond, zodat de tekst kan worden gelezen door mensen met beperkt zicht (die geen gebruikmaken van contrastverhogende hulptechnologie). Voor mensen die geen kleurenzwakte hebben, hebben kleurschakeringen en -verzadiging weinig tot geen effect op leesbaarheid, zoals is aangetoond op basis van leesprestaties (Knoblauch et al., 1991). Kleurenzwakte kan wel enige invloed hebben op luminantiecontrast. Daarom wordt in de aanbeveling het contrast zodanig berekend dat kleur geen doorslaggevende factor is, zodat er voor mensen met kleurenzwakte ook voldoende contrast is tussen de tekst en de achtergrond.

Voor tekst die decoratief is en geen informatie overbrengt geldt geen contrasteis. Als er bijvoorbeeld willekeurige woorden worden gebruikt om een achtergrond te creëren en als die woorden kunnen worden herschikt of vervangen zonder dat de betekenis verandert, gaat het om decoratieve tekst die niet hoeft te voldoen aan dit criterium.

Tekst die groter is en dikkere tekenstrepen heeft, is bij een lager contrast gemakkelijker te lezen. De contrasteis voor grotere tekst is daarom lager. Dit biedt auteurs de mogelijkheid om voor grote tekst te kiezen uit een grotere kleurvariatie, wat nuttig is voor pagina-ontwerpen, vooral voor titels. 18 punt tekst of 14 punt vetgedrukte tekst geldt als groot genoeg om te kunnen volstaan met een lagere contrastverhouding. (Zie ook de richtlijnen voor grote letters van het American Printing House for the Blind en de Library of Congress onder bronnen). "18 punts" en "vet" kunnen beide andere betekenissen hebben in verschillende lettertypen, maar behalve bij zeer dunne of ongebruikelijke fonts, zouden ze voldoende moeten zijn. Omdat er zoveel verschillende lettertypen zijn, worden de algemene maatstaven gehanteerd en wordt een opmerking toegevoegd met betrekking tot bijzondere of dunne lettertypes.

Opmerking: Als anti-aliasing wordt aangezet ten behoeve van font smoothing, kunnen lettertypes aan donkerte of lichtheid verliezen. Dat kan ten koste gaan van het contrast. Dikkere letterstokken kunnen dit effect enigszins voorkomen (bij dunne lettertypes zou de hele stok lichter moeten worden gemaakt, niet alleen de uiteinden). Aanbevolen wordt om grotere lettertypes te gebruiken en ze in user agents op leesbaarheid te testen terwijl font smoothing aan staat.

De eerder genoemde contrasteisen voor tekst zijn ook van toepassing op afbeeldingen van tekst (tekst die is weergegeven in pixels en daarna is opgeslagen als afbeelding) zoals vermeld in Succescriterium 1.4.5

Deze eis heeft betrekking op situatie waarin afbeeldingen van tekst waren bedoeld om als tekst te worden opgevat. Incidentele tekst, zoals op foto's waar toevallig een straatnaambordje op staat, valt hier niet onder. Evenmin als tekst die om de een of andere reden onzichtbaar moet blijven voor alle gebruikers. Gestyleerde tekst, zoals in bedrijfslogo's moet worden afgemeten aan de functie ervanop de pagina, wat al of niet rechtvaardigt dat de content in het tekstalternatief wordt opgenomen. Visuele richtlijnen van bedrijven buiten het logo en logotype vallen niet onder de uitzondering.

In deze voorwaarde bestaat er een uitzondering die luidt "die onderdeel zijn van een afbeelding die significant andere visuele content bevat". Deze uitzondering is bedoeld om foto's die tekst bevatten te scheiden van afbeeldingen van tekst die gemaakt zijn om tekst te vervangen om de pagina een bepaald uiterlijk te geven.

Hoewel dit Succescriterium alleen van toepassing is op tekst, doen zich vergelijkbare issues voor bij data die worden gepresenteerd in tabellen of grafieken. Voor data die in deze vormen worden gepresenteerd zou er eveneens een goed kleurcontrast moeten worden geboden.

Motivatie voor de gekozen verhoudingen

Een contrastverhouding van 3:1 is het minimumniveau dat wordt aanbevolen door [ISO-9241-3] en [ANSI-HFES-100-1988] voor standaardtekst en zicht. In deze bepaling wordt de verhouding 4.5:1 gehanteerd om rekening te houden met het contrastverlies als gevolg van beperkt gezichtsvermogen, aangeboren of later verkregen kleurenzwakte, of het verlies van contrastgevoeligheid dat op hogere leeftijd optreedt.

De motivatie is gebaseerd op a) aanname van de contrastverhouding van 3:1 voor minimaal acceptabel contrast voor normale waarnemers, in de ANSI standaard, en b) de empirische bevinding dat onder de bevolking een gezichtsvermogen van 20/40 gepaard gaat met een verlies van contrastgevoeligheid van ongeveer 1.5 [ARDITI-FAYE]. Een gebruiker met 20/40 zou daarom een contrastverhouding van 3 * 1.5 = 4.5 op 1 nodig hebben. Uitgaande van analoge empirische bevindingen en dezelfde logica, zou de gebruiker met 20/80 gezichtsvermogen een contrast nodig hebben van ongeveer 7:1.

Kleurschakeringen worden door gebruikers met kleurenzwakte (zowel aangeboren als later verkregen) anders waargenomen, wat resulteert in andere kleuren en relatieve luminantie-contrasten dan voor gebruikers met een normaal gezichtsvermogen. Daardoor zijn effectief contrast en leesbaarheid voor deze groep anders. Er zijn echter zoveel soorten kleurenzwakte dat het niet mogelijk is om op basis van kwantitatieve data (contrastrijke) kleurparen voor te schrijven voor effectief algemeen gebruik. De eis van goed luminantiecontrast komt hieraan tegemoet door een contrast te eisen dat niet afhankelijk is van kleurperceptie. Jammer genoeg overlappen de receptoren van de middengolf en lange golf, die de grootste bijdrage aan luminantie leveren, grotendeels in hun spectrale reacties. Dat heeft tot gevolg dat het effectieve luminantiecontrast in het algemeen kan worden berekend zonder rekening te houden met een specifieke kleurenzwakte, behalve bij het gebruik van overwegend lange golfkleuren tegen een donkere achtergrond (die er zwart uitziet) voor mensen met protanopia, zeldzame rood/groen kleurenblindheid. (Om die reden adviseren we om rood op zwart te vermijden.) Voor meer informatie zie [ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI].

De contrastverhouding van 4.5:1 is gekozen voor niveau AA omdat het compenseert voor het verlies van contrastgevoeligheid die doorgaans wordt ervaren door gebruikers wier gezichtsvermogen is afgenomen tot een equivalent van ongeveer 20/40. (20/40 komt neer op ongeveer 4.5:1.) 20/40 wordt beschouwd als het gemiddelde gezichtsvermogen van mensen rond de leeftijd van 80 jaar. [GITTINGS-FOZARD]

De contrastverhouding van 7:1 is gekozen voor niveau AAA omdat het compenseert voor het verlies van contrastgevoeligheid die doorgaans wordt ervaren door gebruikers wier gezichtsvermogen is afgenomen tot een equivalent van ongeveer 20/80. Mensen bij wie het gezichtsvermogen sterker is afgenomen, maken meestal gebruik van hulptechnologie om toegang te krijgen tot de content (en in de meeste hulptechnologieën is het vermogen tot contrastversterking en vergroting ingebouwd). Het niveau 7:1 compenseert daarom meestal voor het verlies van contrastgevoeligheid die wordt ervaren door gebruikers met beperkt gezichtsvermogen die geen hulptechnologie gebruiken en biedt ook contrastverscherping voor mensen met kleurenzwakte.

Opmerking: Berekeningen in [ISO-9241-3] en[ANSI-HFES-100-1988] hebben betrekking op korpstekst. Er wordt een verminderde contrastverhouding geboden voor tekst die veel groter is.

Opmerkingen over formule

Conversie van niet-lineaire naar lineaire RGB-waarden is gebaseerd op IEC/4WD 61966-2-1 [IEC-4WD] en op "A Standard Default Color Space for the Internet - sRGB" [sRGB].

De formule (L1/L2) voor contrast is gebaseerd op [ISO-9241-3] en [ANSI-HFES-100-1988] standaarden.

De ANSI/HFS 100-1988 standaard verlangt dat de bijdrage van omgevingslicht wordt meegenomen in de berekening van L1 en L2. De gebruikte .05 waarde is gebaseerd op Typical Viewing Flare uit [IEC-4WD] en het artikel [sRGB] door M. Stokes e.a.

Dit Succescriterium en de bijbehorende definities hanteren de termen "contrastverhouding" en "relatieve luminantie" in plaats van "luminantie" om aan te geven dat webcontent zelf geen licht uitstraalt. De contrastverhouding geeft een hoeveelheid relatieve luminantie aan die bij het tonen zou optreden. (Omdat het een verhouding is, heeft het geen dimensies.)

Opmerking 1: Verwijs naar gerelateerde bronnen voor een lijst met instrumenten die gebruikmaken van de contrastverhouding om het contrast van webcontent te analyseren.

Opmerking 2: Zie ook Begrijpen Succescriterium 2.4.7 Focus zichtbaar voor technieken om de toetsenbordfocus aan te geven.

Specifieke voordelen van Succescriterium 1.4.6
  • Mensen met beperkt zicht hebben vaak moeite met het lezen van tekst die niet contrasteert met zijn achtergrond. Dit kan worden verergerd als de persoon in kwestie te maken heeft met kleurenzwakte die het contrast verder verlaagt. Door een minimale luminantiecontrastverhouding tussen de tekst en de achtergrond aan te bieden wordt de leesbaarheid van de tekst vergroot, zelfs al ziet die persoon niet het volledige kleurenspectrum. Het werkt ook in het voordeel van de zeldzame individuen die geen kleur kunnen zien.

Definities
tekst

sequentie van karakters die door software bepaald kan worden, waar de sequentie iets in menselijke taal uitdrukt

afbeelding van tekst

tekst die in niet-tekstuele vorm (bijvoorbeeld een afbeelding) is weergegeven om een bijzonder visueel effect te realiseren

Opmerking: tekst die onderdeel is van een afbeelding die significant andere visuele content bevat, valt hier niet onder.

Voorbeeld: iemands naam op een naamkaartje in een foto.

contrastverhouding

(L1 + 0,05) / (L2 + 0,05), waar

Opmerking 1: contrastverhoudingen kunnen variëren van 1 tot 21 (gewoonlijk geschreven als 1:1 tot 21:1).

Opmerking 2: omdat auteurs geen zeggenschap hebben over gebruikersinstellingen met betrekking tot de weergave van tekst (bijvoorbeeld font smoothing en anti-aliasing), kan de contrastverhouding voor tekst worden geëvalueerd terwijl anti-aliasing uitstaat.

Opmerking 3: ten behoeve van succescriteria 1.4.3 en 1.4.6, wordt het contrast gemeten met betrekking tot de gespecificeerde achtergrond waarop de tekst bij normaal gebruik wordt weergegeven. Indien geen achtergrondkleur is gespecificeerd, wordt verondersteld dat dit wit is.

Opmerking 4: achtergrondkleur is de gespecificeerde kleur van de content waarop de tekst bij normaal gebruik wordt weergegeven. Het is een fout als wel de kleur van de tekst is gespecificeerd, maar niet de achtergrondkleur, omdat de standaard door de gebruiker gebruikte achtergrondkleur niet bekend is en dus niet kan worden gebruikt om te meten of het contrast volstaat. Om dezelfde reden is het een fout als wel de achtergrondkleur maar niet de tekstkleur is gespecificeerd.

Opmerking 5: als er een rand om de letter is, kan de rand contrast toevoegen en de rand zou gebruikt worden in de berekening van het contrast tussen de letter en zijn achtergrond. Een smalle rand om de letter zou gebruikt worden als letter. Een brede rand om de letter die de inwendige details van de letters invult doet dienst als een halo en zou beschouwd worden als achtergrond.

Opmerking 6: WCAG-conformiteit moet worden geëvalueerd voor in de content gespecificeerde kleurparen waarvan een auteur zou verwachten dat ze in een karakteristieke presentatie naast elkaar verschijnen. Auteurs hoeven geen ongebruikelijke vormen van presentatie in acht te nemen, zoals door de user agent gemaakte kleurveranderingen, behalve als ze veroorzaakt worden door code van de auteur.

grote (tekst)

(tekst) met een lettergrootte van ten minste 18 punt of 14 punt vetgedrukt of een lettergrootte die voor Chinese, Japanse en Koreaanse (CJK) lettertypen een equivalente grootte oplevert

Opmerking 1: lettertypen met buitengewoon dunne strepen of ongewone kenmerken en eigenschappen die de herkenbaarheid van hun lettervormen verminderen zijn moeilijker te lezen, in het bijzonder bij lagere contrastniveaus.

Opmerking 2: lettergrootte is de grootte wanneer de content wordt aangeboden. Het omvat niet het herschalen dat door de gebruiker kan worden gedaan.

Opmerking 3: de feitelijke grootte van het karakter dat de gebruiker ziet is afhankelijk van zowel de door de auteur gedefinieerde grootte als van het beeldscherm van de gebruiker of de instelling van de user agent. Voor veel gangbare lettertypen is 14- en 18-punts ruwweg equivalent met 1,2 en 1,5 em, of met 120% of 150% van de standaardgrootte voor korpstekst (aannemend dat het hoofdlettertype 100% is), maar auteurs zouden dit moeten controleren voor de specifieke lettertypen die ze gebruiken. Als lettertypen gedefinieerd worden in relatieve eenheden, wordt de feitelijke lettergrootte voor vertoning door de user agent berekend. De lettergrootte moet worden verkregen van de user agent, of berekend op basis van lettertypemetriek zoals de user agent doet bij de evaluatie van dit succescriterium. Gebruikers die beperkt zicht hebben zouden verantwoordelijk zijn voor het kiezen van de geschikte instellingen.

Opmerking 4: als tekst wordt gebruikt zonder specificatie van de lettergrootte, zou de kleinste lettergrootte die op de meest gangbare browsers voor ongespecificeerde tekst gebruikt wordt een redelijke maat zijn om voor het lettertype aan te nemen. Als een kop van niveau 1 wordt weergegeven in 14- of meerpunts vet op de meest gangbare browsers, mag redelijkerwijs worden aangenomen dat het grote tekst is. Relatieve schaling kan op een soortgelijke manier worden berekend uit de standaardmaten.

Opmerking 5: de 18- en 14-punts-lettergroottes voor romeinse teksten worden afgeleid uit de minimumgrootte voor grote letters (14-punts) en de grootste standaardlettergrootte (18-punts). De "equivalente" groottes voor andere lettertypen, zoals de CJK-talen, zouden de minimale grootte voor grote tekst en de daaropvolgende grotere standaardgrootte voor die talen zijn.

component van de gebruikersinterface

een deel van de content die door gebruikers wordt waargenomen als een enkel bedieningselement voor een duidelijke functie

Opmerking 1: meerdere componenten van de gebruikersinterface kunnen geïmplementeerd worden als een enkel programmeerbaar element. Componenten zoals hier bedoeld zijn niet gebonden aan programmeertechnieken, maar aan wat de gebruiker waarneemt als aparte bedieningselementen.

Opmerking 2: componenten van de gebruikersinterface omvatten formulierelementen en links, evenals door scripts gegenereerde componenten.

Voorbeeld: een applet heeft een "bedieningselement" die gebruikt kan worden om per regel of pagina of op willekeurige wijze door content te bewegen. Aangezien elk van die drie een naam zou moeten hebben en onafhankelijk instelbaar zou moeten zijn, zouden ze elk een "component van de gebruikersinterface" zijn

puur decoratief

dient alleen een esthetisch doel, geeft geen informatie en heeft geen functionaliteit

Opmerking: tekst is alleen puur decoratief als de woorden gerangschikt of vervangen kunnen worden zonder dat hun doel verandert.

Voorbeeld: de omslagpagina van een woordenboek heeft willekeurig uitgezochte woorden in zeer lichte tekst op de achtergrond.

Voldoen aan succescriterium 1.4.6 Contrast (versterkt) (niveau AAA)

Afdoende technieken: technieken of combinaties van technieken die volstaan

Elk genummerd item in deze sectie staat voor een techniek of combinatie van technieken die afdoende wordt beschouwd om aan dit succescriterium te voldoen. Met de genoemde technieken wordt pas aan het succescriterium voldaan indien ze in overeenstemming zijn met de conformiteitseisen.

Bron: How to meet WCAG 2.0, success criterion 1.4.6 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

Instructie: Kies hieronder de situatie die van toepassing is op de te beoordelen content. Elke situatie bevat genummerde technieken (of combinaties van technieken) die voor de desbetreffende situatie als afdoende wordt beschouwd.

Situatie A: tekst is minder dan 18 punt indien niet vetgedrukt en minder dan 14 punt indien vetgedrukt
  1. G17: Garanderen dat er een contrastverhouding bestaat van ten minste 7:1 tussen tekst (alsook afbeeldingen van tekst) en de achtergrond van de tekst

  2. G148: Geen specificatie van achtergrondkleur, geen specificatie van tekstkleur en geen gebruik van technologiekenmerken die die standaarden wijzigen

  3. G174: Een bedieningselement met een voldoende grote contrastverhouding aanbieden die gebruikers de gelegenheid biedt om naar een presentatie te schakelen die voldoende contrast gebruikt

  4. SL13: Een style switcher aanbieden om over te schakelen naar hoog contrast (Silverlight)

Situatie B: tekst is ten minste 18 punt indien niet vetgedrukt en ten minste 14 punt indien vetgedrukt
  1. G18: Garanderen dat er een contrastverhouding bestaat van ten minste 4.5:1 tussen tekst (alsook afbeeldingen van tekst) en de achtergrond van de tekst

  2. G148: Geen specificatie van achtergrondkleur, geen specificatie van tekstkleur en geen gebruik van technologiekenmerken die die standaarden wijzigen

  3. G174: Een bedieningselement met een voldoende grote contrastverhouding aanbieden die gebruikers de gelegenheid biedt om naar een presentatie te schakelen die voldoende contrast gebruikt

  4. SL13: Een style switcher aanbieden om over te schakelen naar hoog contrast (Silverlight)

Aanbevolen technieken: technieken die verder gaan dan is vereist

De items in deze sectie gaan verder dan wat is vereist om aan het succescriterium te voldoen. Ze kunnen worden gebruikt om content optimaal toegankelijk te maken.
Gebruik van aanbevolen technieken heeft geen invloed op het niveau van conformiteit dat kan worden geclaimd.

Bron: How to meet WCAG 2.0, success criterion 1.4.6 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • G156: Gebruik van een technologie die in overeenstemming is met de functionaliteit van algemeen beschikbare user agents om de voorgrond en achtergrond van blokken tekst te veranderen

  • Een hogere contrastwaarde gebruiken voor tekst die is geplaatst op een achtergrond met een patroon (toekomstige link)

  • Unicode tekst en stylesheets gebruiken in plaats van afbeeldingen van tekst (toekomstige link)

  • Hogere contrastwaarden gebruiken voor lijnen in schema's en diagrammen (toekomstige link)

  • Een hoger contrastniveau gebruiken voor combinaties van rode en zwarte tekst en achtergrond

  • Kleuren gebruiken die voornamelijk zijn samengesteld uit componenten uit het midden van het spectrum voor het licht en spectrale extremen (blauwe en rode golflengtes) voor het donker

  • Een achtergrond in een lichte pastelkleur gebruiken in plaats van zwarte tekst op een witte achtergrond teneinde een voldoende, maar niet te extreem contrast te creëren (toekomstige link)

  • Iconen maken door middel van eenvoudige lijntekeningen die voldoen aan de contrasteisen voor tekst (toekomstige link)

  • Voldoende kleurcontrast aanbieden in grafieken en diagrammen (toekomstige link)

  • Een 3:1 contrastratio gebruiken als de standaard presentatie (toekomstige link)

  • Voldoende kleurcontrast aanbieden voor lege tekstvelden (toekomstige link)

Aanbevolen technieken voor richtlijn 1.4

Bron: How to meet WCAG 2.0, guideline 1.4 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • Leesbare fonts gebruiken (toekomstige link)

  • Er voor zorgen dat tekst in afbeeldingen van tekst ten minste 14 punts is en een goed contrast heeft (toekomstige link)

  • Een mechanisme aanbieden van zeer goed zichtbare markering voor links of bedieningselementen, zodra ze de toetsenbordfocus krijgen (toekomstige link)

Gangbare fouten: praktijksituaties die veroorzaken dat webcontent niet voldoet

Als een 'gangbare fout' uit deze sectie van toepassing is, dan wordt niet aan het succescriterium voldaan.

Bron: How to meet WCAG 2.0, success criterion 1.4.6 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • F24: Voldoet niet aan Succescriteria 1.4.3, 1.4.6 en 1.4.8 doordat voorgrondkleuren worden gespecificeerd zonder dat ook achtergrondkleuren worden gespecificeerd of vice versa

  • F83: Voldoet niet aan Succescriteria 1.4.3 en 1.4.6 doordat er achtergrondafbeeldingen worden gebruikt die niet voldoende contrast bieden met voorgrondtekst (of afbeeldingen van tekst)

Normatieve content op deze pagina

De volgende content op deze pagina heeft de status 'normatief' en is ongewijzigd overgenomen uit het normdocument Webrichtlijnen versie 2: