Kleurcontrastchecker

Luminantie is het kanaal dat altijd overblijft

Kleur heeft twee componenten waarop een ontwerper kan steunen: kleurtoon en lichtheid. Slechts één daarvan is betrouwbaar voor het hele publiek.

Kleurtoononderscheid varieert enorm. Ongeveer één op de twaalf mannen heeft een rood-groenstoornis, en voor hem draagt een kleurtoonverschil dat u vanzelfsprekend lijkt mogelijk geen enkele informatie. Lichtheidsonderscheid is veel uniformer. Iemand met een kleurzienstoornis, iemand met verminderde scherpte, iemand die in fel zonlicht naar een verbleekt telefoonscherm kijkt, en iemand met volstrekt gewoon zicht nemen allemaal een groot lichtheidsverschil waar als een groot verschil.

Daarom is de contrastverhouding de dragende toegankelijkheidsmaat. Ze meet de lichtheidsrelatie tussen twee kleuren en negeert kleurtoon volledig, en dat is precies wat u wilt, want ze vertelt wat overblijft wanneer het kleurtoonkanaal onbetrouwbaar is.

De verhouding loopt van 1:1, waar twee kleuren dezelfde relatieve luminantie hebben en de grens ertussen voor iedereen onzichtbaar is, tot 21:1 voor zuiver zwart op zuiver wit. De berekening is in WCAG precies vastgelegd: zet elk sRGB-kanaal om naar lineair licht, weeg de kanalen naar hun bijdrage aan de waargenomen luminantie, en vergelijk vervolgens de lichtere uitkomst met de donkerdere.

De drempels en waarop ze berusten

4,5:1 — gewone tekst (WCAG AA). De basis voor lopende tekst. Het getal komt voort uit het verlies aan contrastgevoeligheid dat hoort bij een scherpte van ongeveer 20/40, gangbaar bij ouderen, corrigeerbaar maar vaak niet gecorrigeerd.

3:1 — grote tekst (WCAG AA). Geldt vanaf 18 pt regulier of 14 pt vet. Grotere letters hebben dikkere stokken en blijven bij lager contrast leesbaar.

3:1 — contrast van niet-tekstuele elementen (WCAG AA). Betreft interfaceonderdelen en betekenisvolle graphics: veldranden, schakelaarstatussen, focusindicatoren, pictogrammen die informatie overbrengen en de essentiële delen van een grafiek. Dit criterium wordt het vaakst over het hoofd gezien, en meestal is dit het punt waarop een visueel verzorgde, contrastarme interface een audit niet doorstaat.

7:1 en 4,5:1 — gewone en grote tekst (WCAG AAA). Een strenger niveau, gericht op een scherpte van ongeveer 20/80. De moeite waard voor lang lezen, ook als het niet verplicht is.

Contrast is noodzakelijk, niet voldoende

De meest gemaakte fout bij toegankelijke paletten is een gehaalde contrastverhouding beschouwen als het einde van het werk. Er zijn twee onafhankelijke vragen te beantwoorden:

1. Is elke kleur leesbaar op haar achtergrond? Dat is contrast, en deze controle beantwoordt het.
2. Zijn kleuren die iets verschillends betekenen onderling te onderscheiden? Dat is kleurtoonscheiding, en daarover zegt de contrastverhouding niets.

Een grafiek met een rode en een groene reeks kan het contrast ruim halen, beide zijn donker op een witte achtergrond, en toch volstrekt onleesbaar zijn voor een deuteranoop, omdat de twee reeksen onderling niet te onderscheiden zijn. Haal zulke paletten ook door de kleurziensimulator.

En wanneer kleur betekenis draagt, voeg dan altijd een tweede aanwijzing toe. Het WCAG-criterium over gebruik van kleur vereist dat, en techniek G111 beschrijft de gangbare aanpak: kleur koppelen aan een patroon, vorm, positie of uitdrukkelijk label. In de praktijk betekent dat grafiekreeksen rechtstreeks labelen in plaats van een kleurlegenda, een pictogram naast een rode foutmelding zetten, links in lopende tekst onderstrepen, en geslaagd- en foutstatussen ook in vorm laten verschillen.

Werken met de controle

Voer een voorgrond- en achtergrondkleur in, en het hulpmiddel meldt de verhouding en de gehaalde drempels. Enkele gewoonten maken het nuttiger:

• Test het werkelijke paar. Halfdoorzichtige lagen, verlopen en achtergrondafbeeldingen zorgen ervoor dat de feitelijke achtergrond niet de kleur uit uw stijlblad is. Neem een monster van wat daadwerkelijk wordt getekend.
• Test beide thema’s. Luminantie keert niet netjes om; een donker palet vraagt een eigen ronde.
• Test in een verloop het ongunstigste punt, niet het gemiddelde.
• Neem uitgeschakelde en plaatsaanduidingsstatussen mee. Ze worden toch gelezen.
• Controleer focusindicatoren op elk oppervlak waarop ze verschijnen. Een focusring die op wit 3:1 haalt, kan op een kaart verdwijnen.

Voor het bredere beeld behandelt ontwerpen voor kleurenblindheid de opbouw van paletten, en gaat grafieken toegankelijk maken specifiek over datavisualisatie.