1. Kies een echte pagina en een afgebakende controle
Begin met een belangrijke bezoekersroute, bijvoorbeeld van een dienstenpagina naar een aanvraag. Noteer welke pagina, ontwerpversie en schermbreedte je bekijkt. Kies vervolgens de gewone tekst, een grote kop, een belangrijke knop en een betekenisvol pictogram.
Maak per onderdeel één regel: locatie, functie, toestand, voorgrondkleur, achtergrondkleur, tekstgrootte en gewicht, meetuitkomst en vervolgstap. Zet bij een ontbrekende meting expliciet ‘nog controleren’. Zo blijft je werk overdraagbaar en verdwijnt een lastig onderdeel niet tussen de goedgekeurde kleurparen. Deze meetkaart is een voorgestelde eigen werkwijze.
2. Bepaal welke grens bij het onderdeel hoort
W3C noemt voor gewone tekst bij WCAG 2.2, criterium 1.4.3 op niveau AA, minimaal 4,5:1. Voor grote tekst geldt 3:1: vanaf 18 punt, of 14 punt bij vetgedrukte tekst. Beoordeel dus de werkelijke grootte en het gewicht, niet alleen de naam ‘heading’ in je ontwerpbestand. Rond een uitkomst onder de grens niet naar boven af.
Voor visuele informatie die nodig is om bediening of een toestand te herkennen, geldt onder criterium 1.4.11 minimaal 3:1 ten opzichte van aangrenzende kleuren. Dat geldt ook voor noodzakelijke delen van informatieve afbeeldingen. Niet iedere decoratieve rand hoeft afzonderlijk te voldoen. Noteer welke vorm of welk teken de bezoeker werkelijk nodig heeft.
3. Meet de kleuren van de gebouwde pagina
Gebruik de ingestelde kleuren uit de browser of de onderliggende stijlen. Een gemeten pixel aan de gladgestreken rand van een letter kan een ander resultaat geven. Controleer de combinatie zoals die werkelijk wordt weergegeven: een ontwerpkleur op wit zegt weinig wanneer dezelfde tekst op de website op een foto staat.
Chrome DevTools kan contrastproblemen met tekst helpen vinden. Open bijvoorbeeld CSS Overview, maak een overzicht en bekijk onder Colors de gevonden Contrast issues. Selecteer daarna het betreffende element. Bewaar bij je eigen meetkaart welke combinatie je hebt onderzocht. Krijg je voor een onderdeel geen bruikbare uitkomst, laat het dan openstaan voor handmatige beoordeling in plaats van een goedkeuring in te vullen.
4. Loop de verschillende toestanden langs
Open dezelfde knop of link in de toestanden die je ontwerp aanbiedt. Denk aan normaal, aanwijzen met de muis, toetsenbordfocus en geselecteerd. Leg elke relevante combinatie apart vast. Controleer ook een tweede achtergrond waarop het component wordt hergebruikt. Een knop onderaan een donkere sectie verdient een eigen regel naast dezelfde knop bovenaan.
Voor non-tekstcontrast vergelijk je de noodzakelijke indicator met zijn aangrenzende kleur. Je hoeft niet automatisch de oude knopkleur met de nieuwe hoverkleur te vergelijken. Let bijvoorbeeld op het vinkje binnen een geselecteerd vak en de zichtbare focusaanduiding. Een geslaagde contrastmeting beoordeelt niet alle overige eisen aan toetsenbordbediening of focus.
5. Werk één afwijking helemaal uit
Een fictief voorbeeld: op een dienstenpagina staat kleine lichtgekleurde tekst op een witte kaart. De gemeten verhouding is 3,8:1. De ontwerper noteert dat deze gewone tekst de grens van 4,5:1 niet haalt. Zij kiest een donkerdere tekstkleur, past het gedeelde tekststijlonderdeel aan en meet dezelfde kaart opnieuw.
Daarna bekijkt zij de andere kaarten die die stijl gebruiken. Op één kaart is de achtergrond anders. Die combinatie krijgt een eigen controle, ook al komt de tekst uit dezelfde stijl. Het team bewaart de oude en nieuwe meetuitkomst met de gekozen wijziging. Dit voorbeeld is bedacht; de genoemde verhouding is geen meting aan een MANE-pagina.
6. Controleer de verandering in het geheel
Bekijk na de aanpassing opnieuw de echte pagina, niet alleen het kleurvak in je ontwerptool. Is de tekst nog goed leesbaar in de gekozen letter? Past de wijziging op de andere plekken waar de stijl wordt gebruikt? Controleer ook de smalle weergave wanneer onderdelen daar op een andere achtergrond terechtkomen.
Wijs voor open punten een eigenaar aan en schrijf erbij wat nog ontbreekt. Bijvoorbeeld: ‘Tekst boven wisselende foto’s nog per beeld controleren.’ Een screenshot helpt om de plek terug te vinden, maar bewaar daarnaast de gebruikte kleurwaarden en meetuitkomst. Daarmee kan een collega dezelfde combinatie opnieuw beoordelen wanneer beeld of stijl later verandert.
7. Lever een controleerbare conclusie op
Rond af met drie korte lijsten: beoordeelde combinaties, aangepaste combinaties en open vragen. Vermeld de pagina’s en toestanden die buiten je controle vielen. Geef de opdrachtgever geen algemeen toegankelijkheidskeurmerk op basis van deze beperkte meting. Beschrijf precies welke contrastcontrole je hebt uitgevoerd en welke verbeteringen zijn bevestigd.
Voeg bij de overdracht de meetkaart en gebruikte bronnen toe. Maak vervolgens een nieuwe controle onderdeel van wijzigingen aan kleuren, componenten of achtergronden. Zo hoeft de volgende ontwerper niet te raden waarom een bepaalde kleur gekozen is. De vastgelegde combinatie en herhaalbare meting geven een concreet vertrekpunt.
