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. Een praktische werkwijze:

  1. Kies de tekstkleur en achtergrondkleur (bij voorkeur als sRGB hex, bijvoorbeeld #1A1A1A op #FFFFFF).
  2. Noteer het fontgewicht en de grootte (bijvoorbeeld 16px regular, of 14px semibold).
  3. Bereken de APCA-score met een APCA-contrast tool die LC-scores toont.
  4. Beoordeel de LC-score tegen de richtwaarden die de tool hanteert voor leesbaarheid (bodytekst vraagt doorgaans strengere waarden dan grote headings).
  5. Test ook states: hover, focus, disabled, error, success. Vooral focus-indicators en button-teksten leveren vaak verrassingen op.

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.

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.