APCA kleurcontrast checker

Kleurcontrast is een van de meest voorkomende oorzaken van WCAG-fouten. En dat is logisch: contrast gaat niet alleen over “donker op licht”, maar ook over lettergrootte, letterdikte, anti-aliasing en de manier waarop we contrast ervaren op een beeldscherm.

In WCAG 2.2 toetsen we contrast met de bekende contrastverhouding (bijvoorbeeld 4.5:1). In WCAG 3.0 wordt een nieuwe methode voorgesteld: APCA, de Accessible Perceptual Contrast Algorithm.

In dit artikel lees je het verschil en hoe je APCA in de praktijk gebruikt om contrast te beoordelen.

Auteur

Vincent van Brakel

Als onderzoeker digitale toegankelijkheid voert Vincent ruim 8 jaar audits uit voor websites en apps. De focus ligt hierbij niet alleen op de criteria, maar vooral op de drempels voor de doelgroep en hoe we deze samen kunnen oplossen.

Wat is de huidige methode in WCAG 2.2?

WCAG 2.2 gebruikt een contrastverhouding op basis van relatieve luminantie van tekst en achtergrond. De uitkomst is een ratio zoals 4.5:1 of 7,0:1. Deze ratio wordt berekend aan de hand van een algoritme.

Deze methode is gekoppeld aan vaste drempels in succescriteria, zoals:

  • 1.4.3 Contrast: minimaal 4.5:1 voor normale tekst, en minimaal 3,0:1 voor grote tekst.
  • 1.4.11 Niet-tekstuele contrast: minimaal 3,0:1 voor interactieve onderdelen zoals knoppen, iconen en grafische objecten die informatie overbrengen.

Gebruik de kleurcontrast checker om de contrastverhoudingen te bepalen.

De voordelen zijn duidelijk: de ratio is simpel, bekend, en wordt door vrijwel alle tools ondersteund. Het nadeel is dat de ratio niet altijd goed aansluit op hoe contrast door mensen wordt ervaren, vooral bij heel lichte kleuren, heel donkere kleuren, dunne fonts of kleine tekst.

Wat is APCA en wat is het verschil met WCAG 2.2?

APCA staat voor Accessible Perceptual Contrast Algorithm. In plaats van een klassieke ratio probeert APCA de waargenomen leesbaarheid van tekstcontrast te voorspellen op zelfverlichte schermen. De uitkomst is geen ratio, maar een LC-waarde (Lightness Contrast), inclusief een richting (donkere tekst op lichte achtergrond of andersom).

Belangrijkste verschillen

  • Uitkomst: WCAG 2.2 geeft een contrastverhouding (bijvoorbeeld 4.5:1), APCA geeft een LC-score (bijvoorbeeld Lc 60).
  • Perceptie: WCAG 2.2 is gebaseerd op relatieve luminantie als vaste rekensom, APCA is ontworpen om beter aan te sluiten op menselijke perceptie
    van contrast en leesbaarheid op schermen.
  • Context: WCAG 2.2 werkt met vaste drempels per type tekst (normaal of groot). APCA kijkt sterker naar leesbaarheid en gebruikt drempels die
    doorgaans afhankelijk zijn van het gebruik, zoals bodytekst versus UI-tekst.
  • Polarity: APCA maakt expliciet onderscheid tussen lichte tekst op donkere achtergrond en donkere tekst op lichte achtergrond.
    Dat kan leiden tot andere resultaten dan de ratio-methode.
  • Status in standaarden: WCAG 2.2 is de huidige norm voor compliance. WCAG 3.0 is een working draft met een andere opzet (onder andere een
    scoringmodel) en is nog niet definitief.

Praktisch betekent dit: een kleurcombinatie kan in WCAG 2.2 “slagen” met 4.5:1, maar in APCA alsnog een te lage LC-score krijgen voor kleine, dunne tekst. En andersom kunnen sommige combinaties die net niet halen in de ratio-methode, in APCA juist beter scoren omdat ze perceptueel goed leesbaar zijn.

Hoe check je contrast met APCA?

APCA checken doe je idealiter in de context waarin de tekst echt gebruikt wordt: lettergrootte, gewicht en achtergrond. Gebruik de Audit House kleurcontrast checker om snel duidelijk te hebben of je tekst voldoet of niet. Via deze tool kies je eenvoudig of je een contrastverhouding op de WCAG 2.2 methode wilt testen, of op de APCA methode.

APCA in je workflow

  • Designfase: gebruik APCA om combinaties te kiezen die ook bij dunne tekst en kleinere sizes leesbaar blijven.
  • Buildfase: check componentvarianten (primary, secondary, ghost) en statuskleuren (error, warning, success).
  • Auditfase: rapporteer nog steeds op WCAG 2.2 als dat je compliance-doel is, en gebruik APCA als extra onderbouwing of verbetering richting de toekomst.

Hoe verhoudt dit zich tot WCAG 3.0?

WCAG 3.0 (W3C Accessibility Guidelines 3.0) is in ontwikkeling en heeft een andere structuur dan WCAG 2.x. Waar WCAG 2.2 werkt met succescriteria die je
“pass or fail” toetst, werkt WCAG 3.0 met een breder model waarin methodes en uitkomsten anders kunnen worden gescoord.

Voor contrast is APCA een voorgestelde richting binnen WCAG 3.x. Het is belangrijk om dit goed te positioneren: WCAG 2.2 is vandaag de norm voor het aantonen van toegankelijkheid in audits en verklaringen. APCA is vooral waardevol om
je ontwerpkeuzes perceptueel beter te onderbouwen en om vooruit te lopen op een mogelijke toekomstige benadering.

Kleurcontrast controleren

Wil je weten of je kleurenpalet niet alleen “door de tool komt”, maar ook echt prettig leesbaar is voor gebruikers? Audit House kan je helpen met een contrastreview op WCAG 2.2 (compliance) en een APCA-check (kwaliteit en toekomstbestendigheid). Neem contact op voor een quickscan of een volledig onderzoek.