Een verzameling aantrekkelijke kleuren is nog geen interfacepalet. Elke combinatie heeft een rol nodig, en tekst of bedieningselementen hebben voldoende contrast nodig om in reële omstandigheden begrijpelijk te blijven.
Begrijp wat de ratio meet
Een contrastverhouding vergelijkt de relatieve helderheid van een voorgrond en achtergrond. Onder WCAG 2.2 Niveau AA heeft normale tekst doorgaans minimaal 4,5:1 nodig, terwijl grote tekst 3:1 kan gebruiken. Logo's en puur decoratieve elementen worden verschillend behandeld, maar de functionele interface-inhoud moet nog steeds doelbewust worden gecontroleerd.
De ratio is geen volledige toegankelijkheidstest. Lettertypegewicht, -grootte, anti-aliasing, schittering en gebruikersvisie hebben allemaal invloed op de echte ervaring, dus gebruik het aantal als minimumpoort en inspecteer het ontwerp nog steeds in de context.
Toegankelijkheid verwijdert geen teken uit een palet. Het geeft elke kleur een taak die hij betrouwbaar kan uitvoeren.
Verander stalen in functionele kleurrollen
Definieer kleuren voor oppervlak, primaire tekst, secundaire tekst, rand, actie, focus, succes, waarschuwing en fout. Een merkblauw kan prachtig werken als een grote achtergrond, maar faalt voor kleine tekst op grijs. Dezelfde tint kan nog steeds in het systeem thuishoren met een andere rol of toon.
Documenteer goedgekeurde paren in plaats van geïsoleerde hexadecimale waarden te publiceren. Ontwerpers en ontwikkelaars moeten weten welke voorgrond veilig is op elk oppervlak.
- Controleer de hoofdtekst, labels, links en knoptekst afzonderlijk.
- Geef focusindicatoren voldoende contrast ten opzichte van aangrenzende kleuren.
- Communiceer fouten of succes niet alleen met kleur.
- Test uitgeschakelde statussen zonder de vereiste informatie onleesbaar te maken.
Repareer mislukte combinaties zonder het merk te verliezen
Pas eerst de lichtheid aan in plaats van de tint te vervangen. Een donkerdere actietoon of een lichter oppervlak behoudt vaak de merkherkenning terwijl de leesbaarheid wordt verbeterd. Als de kleur opzettelijk helder is, gebruik deze dan als een veld of accent met donkere tekst in plaats van er witte tekst bovenop te forceren.
Gebruik voor fotografie en video een stabiele overlay of plaats tekst in een gecontroleerd, effen gebied. Het controleren van één frame is niet voldoende als de achtergrond in de loop van de tijd verandert.
Controleer het systeem in componenten en statussen
Test echte knoppen, formulieren, navigatie, kaarten, grafieken en waarschuwingen op ware grootte. Voeg hover-, focus-, geselecteerde, fout- en uitgeschakelde statussen toe, omdat het contrast vaak afneemt wanneer een component van status verandert.
Bewaar de goedgekeurde combinaties in ontwerptokens en componentdocumentatie. Dat maakt van een eenmalige audit een duurzame regel voor toekomstige pagina’s.
Veelgestelde vragen
Welke contrastverhouding moet de hoofdtekst hebben?
WCAG 2.2 Niveau AA vereist doorgaans minimaal 4,5:1 voor normale tekst. Grotere tekst heeft een lagere drempelwaarde van 3:1 als deze voldoet aan de standaarddefinitie van grote tekst.
Moet een logo aan tekstcontrastregels voldoen?
Logotypen zijn vrijgesteld van het criterium voor minimaal tekstcontrast, maar het logo moet nog steeds herkenbaar blijven in de beoogde context.
Kan een merk een heldere accentkleur behouden die niet past bij witte tekst?
Ja. Gebruik donkere tekst, reserveer de kleur voor grotere niet-tekstgebieden of creëer een toegankelijke, donkerdere begeleidende toon voor interactieve componenten.
Kleuren en contrast
Bouw een kleurenpalet en controleer of tekst volgens WCAG goed leesbaar blijft.
Werkt het palet buiten het moodboard?
We kunnen merkkleuren omzetten in een toegankelijk ontwerpsysteem voor web, apps en productie.
