De Web Content Accessibility Guidelines (WCAG) wordt constant geüpdatet en aangepast. Momenteel is de WCAG versie 2.1 van kracht. Het team achter de richtlijnen, de W3C, werkt momenteel hard aan de WCAG 2.2. Verwacht wordt dat zij de WCAG 2.2 in juni 2022 zullen publiceren.
De WCAG 3.0 wordt ontworpen met het oog op duidelijke en makkelijkere richtlijnen. Designers en developers zouden met de nieuwe richtlijnen dus makkelijker toegankelijke websites en apps kunnen maken.
Een goed voorbeeld van deze innovatie is terug te vinden in een voorstel voor een nieuwe methode om kleurcontrast vast te stellen: de APCA. In dit artikel leggen we het verschil uit tussen de toekomstige APCA en de huidige contrastverhouding.
De huidige methode: contrastverhouding
Gebruikers profiteren op een website van een goed contrast tussen tekst en de achtergrondkleur. Voor gebruikers met een visuele handicap is een sterk contrast soms essentieel om de tekst te kunnen lezen.
Maar, wat is een ‘goede contrastverhouding’? Dat staat uiteraard in de WCAG. Daarin wordt onderscheid gemaakt tussen verplichte webrichtlijnen (AA) en extra webrichtlijnen (AAA). De minimale contrastverhouding tussen tekst en achtergrond verschilt daarom ook per versie van de webrichtlijnen.
Voor websites die aan de standaard toegankelijkheidscriteria willen voldoen is een contrastverhouding van 4,5:1 voldoende (WCAG 1.4.3 AA). Websites die gebruikers nog meer willen helpen, kunnen met een minimale contrastverhouding van 7:1 voldoen aan de WCAG 1.4.6 AAA.
In de onderstaande afbeelding is een voorbeeld te zien van de huidige methode om kleurcontrast te bepalen. In de DevTools van Google Chrome wordt het duidelijk dat de verhouding van het kleurcontrast van de witte tekst ten opzichte van de paarse achtergrond 7.72:1 is en dat er hiermee aan de AA en AAA richtlijnen wordt voldaan.
Het probleem met kleurcontrast van WCAG 2.2
Contrastverhouding hangt af van vele factoren en zal voor verschillende personen anders zijn. In verschillende situaties (grootte van tekst, dikte van tekst, omdraaien achtergrondkleur en tekstkleur) kan een contrast verschillend worden ervaren, terwijl er voor de contrastverhouding 4,5:1 geen verschil is.
De huidige methode kent dus slechts twee opties: of het contrast van de tekst is van de juiste verhouding (>4,5:1) of het contrast is niet van de juiste verhouding (<4,5:1). Voor mensen is het in de praktijk niet zo eenvoudig. Tijd voor een nieuwe manier van contrastbepaling dus!
De nieuwe methode: Advanced Perceptual Contrast Algorithm
Het is nog niet bevestigd, maar Advanced Perceptual Contrast Algorithm zou een mogelijke vervanging van de contrastverhouding in WCAG 3 kunnen zijn. Advanced Perceptual Contrast Algorithm (APCA) baseert de score voor contrast meer op de context van de tekst, zoals de grootte en dikte van tekst en andere objecten in de omgeving van de tekst. Dit is anders dan slechts gebaseerd op de kleur van de tekst en de kleur van de achtergrond, zoals nu nog het geval is.
De score die bij APCA wordt gegeven, ziet er anders uit dan bij WCAG 2.2. Mogelijke scores liggen grofweg tussen 0 en 100 in. Bijvoorbeeld:
- Een contrastverhouding van 1,25:1 vertaalt zich naar 15. Dit is het minimum contrast voor non-tekstuele elementen zoals illustraties, zoals vormen.
- Een contrastverhouding van 3:1 vertaalt zich naar 45. Dit is het minimum contrast voor grote tekstuele content, zoals paginatitels.
- Een contrastverhouding van 4,5:1 vertaalt zich naar 60. Dit is het minimum contrast voor tekstuele content, zoals de tekst van een pagina (AA).
- Een contrastverhouding van 7:1 vertaalt zich naar 75. Dit is het aanbevolen contrast voor tekstuele content, zoals de tekst van een pagina (AAA).
- Een contrastverhouding van 10:1 vertaalt zich naar 90. Dit is het minimum contrast voor hele dunne tekstuele content.
APCA testen in Chrome’s DevTools
Zoals in de afbeelding hierboven zichtbaar is, gebruikt DevTools momenteel nog de contrastverhouding om contrast te bepalen. Nieuwsgierig hoe jouw site het zou als APCA wordt toegepast? Met de onderstaande instellingen gebruik je APCA in Chrome’s DevTools om contrast te bepalen:
- Open Chrome DevTools
- Klik op instellingen via het tandwiel rechtsboven
- Klik op Experiments in het lijstje Settings
- Zoek in het Filter naar APCA en vink het vierkantje voor ‘Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines.
- Vanaf nu wordt APCA gebruikt in DevTools
Conclusie
De opname van APCA in WCAG 3.0 is nog niet bevestigd. Wel zou APCA een betere methode kunnen zijn om kleurcontrast te bepalen, met pluspunten voor zowel de eindgebruiker als de designer of developer. Met de bovenstaande instellingen kan je direct beginnen met het toepassen van APCA als contrastbepaling om gemakkelijker toegankelijke websites te maken.
