Kleurcontrast voor tekst, knoppen en iconen

Waarom contrast ertoe doet

Bleke tekst kost lezers. Mensen met een visuele beperking, oudere lezers en iedereen die in fel licht naar een telefoon kijkt, hebben een duidelijk verschil nodig tussen tekst en achtergrond. De Web Content Accessibility Guidelines (WCAG) van het W3C leggen daarom minimumwaarden vast voor tekst, voor bedieningselementen zoals knoppen en invoervelden, en voor iconen en afbeeldingen. Ze zijn meetbaar en vóór de lancering te controleren.

Hoe de contrastverhouding werkt

De contrastverhouding vergelijkt hoe licht twee kleuren zijn. WCAG kijkt niet naar de tint, maar naar de relatieve luminantie: een waarde tussen 0 voor het donkerste zwart en 1 voor het lichtste wit. De drie kanalen rood, groen en blauw worden omgerekend en gewogen: groen telt het zwaarst, rood minder en blauw het minst. De verhouding is (L1 + 0,05) / (L2 + 0,05), waarbij L1 de luminantie van de lichtere kleur is. Het resultaat ligt tussen 1:1 voor twee gelijke kleuren en 21:1 voor zwart op wit.

Twee regels van het W3C tellen in de praktijk. Ten eerste worden de waarden niet afgerond: een verhouding van 4,499:1 haalt de grens van 4,5:1 niet. Ten tweede wordt contrast gemeten tegen de achtergrond die voor de tekst is ingesteld. Stelt een pagina alleen een tekstkleur in en geen achtergrondkleur, dan telt het W3C dat als fout, omdat de standaardachtergrond van de bezoeker onbekend is. Stel altijd beide kleuren samen in.

De drie succescriteria

• 1.4.3 Contrast (minimum), niveau AA: tekst en afbeeldingen van tekst hebben minstens 4,5:1 nodig, grote tekst minstens 3:1.
• 1.4.6 Contrast (versterkt), niveau AAA: tekst heeft minstens 7:1 nodig, grote tekst minstens 4,5:1. Dit is het strengere niveau en helpt het meest bij lange teksten.
• 1.4.11 Contrast van niet-tekstuele content, niveau AA: minstens 3:1 tegen de aangrenzende kleuren, voor alles wat je moet zien om een bedieningselement en de toestand ervan te herkennen (bijvoorbeeld de rand van een invoerveld of een focusindicator) en voor de delen van afbeeldingen die je nodig hebt om de inhoud te begrijpen, zoals iconen of lijnen in een grafiek.

Wat telt als grote tekst

Grote tekst is minstens 18 punt, of minstens 14 punt vet. Het W3C rekent dit om naar ongeveer 24 pixels en ongeveer 18,5 pixels vet. Grote tekst mag minder contrast hebben, omdat de letters groter zijn en hun lijnen breder. Pas op met dunne lettertypen: volgens het W3C kan anti-aliasing dunne of ongewone lettertypen vager laten lijken dan hun ingestelde kleur. Het raadt dikkere lettertypen aan of een kleurenpaar dat duidelijk boven het minimum ligt.

Wat niet hoeft te slagen

• Inactieve componenten, zoals een uitgeschakelde knop.
• Pure decoratie en tekst die niemand kan zien.
• Tekst die deel uitmaakt van een logo of merknaam.
• Bijkomstige tekst in een afbeelding met veel andere inhoud, zoals een straatnaambord op een foto.

Veelgemaakte fouten

• Lichtgrijs op wit. Grijs voor datums, bijschriften of secundaire tekst is vaak te bleek: #999999 op wit haalt maar 2,84:1. Het lichtste pure grijs dat op wit AA haalt voor normale tekst, is #767676 met 4,54:1.
• Tekst op afbeeldingen. Het contrast verandert met elk deel van de foto. Het W3C noemt achtergrondafbeeldingen zonder voldoende contrast als fout (F83). Zet de tekst op een effen vlak, maak de afbeelding erachter donkerder of plaats de tekst naast de afbeelding. Controleer de lichtste plek achter de tekst.
• Placeholdertekst. De grijze hint in een leeg invoerveld is tekst, en 1.4.3 geldt ervoor. Een lichtgrijs zoals #9ca3af op wit haalt maar 2,53:1. Een placeholder is ook geen vervanging voor een zichtbaar label.
• Hover- en focustoestanden. Tekst die verschijnt of verandert bij hover met de muis of focus met het toetsenbord, moet dezelfde waarden halen. Een hover-effect mag het contrast van een bedieningselement niet verlagen of de focusindicator verzwakken. Een focusindicator die je zelf ontwerpt, heeft 3:1 nodig tegen de aangrenzende achtergrond.
• Witte tekst op felle huiskleuren. Oranje, gele, lichtgroene of turquoise knoppen met witte tekst slagen vaak niet: wit op #ff6600 haalt 2,93:1.
• Bleke randen en iconen. Is de rand het enige wat laat zien waar een invoerveld is, dan heeft die 3:1 nodig: #cccccc op wit heeft 1,60:1. Iconen die zonder tekst betekenis dragen, zoals een pijltje voor een keuzelijst of een sluiticoon, hebben ook 3:1 nodig.
• Maar één thema controleren. Heeft je site een donkere modus, controleer de kleurenparen daarvan dan apart. Een kleur die op wit werkt, kan op een donkere achtergrond falen.

Een huispalet verbeteren zonder je merk kwijt te raken

1. 1Schrijf elke kleur op met zijn rol: tekst, achtergrond, accent of knop, rand. Veel problemen beginnen wanneer één kleur alle taken doet.
2. 2Houd de huiskleur waar de regels makkelijker te halen zijn of niet gelden: in het logo, op grote vlakken, voor decoratie en voor grote koppen.
3. 3Gebruik voor tekst en kleine elementen een donkerdere of lichtere variant van dezelfde tint. Verandert alleen de lichtheid, dan blijft de kleur herkenbaar: witte tekst op #c74f00, een donkerder oranje, haalt 4,61:1.
4. 4Of verander juist de tekstkleur. Donkere tekst op een felle huiskleur werkt vaak beter dan wit: #1a1a1a op #ff6600 haalt 5,92:1.
5. 5Leg één grijs vast voor secundaire tekst dat slaagt, bijvoorbeeld #767676 op wit, en gebruik dat overal in plaats van verschillende bleke grijzen.
6. 6Controleer elke toestand: normaal, hover, focus, fout en donkere modus. Sla de definitieve kleuren op als variabelen in je stylesheet, zodat niemand weer met de hand een bleke kleur kiest.

Controleer je kleuren met Do4U

De Kleurcontrastcontrole berekent deze waarden voor je eigen kleuren. Je voert je kleuren in, één per regel, en geeft elke kleur een rol: tekst, achtergrond, accent (bijvoorbeeld een knop) of rand. De code toetst elk zinvol paar aan AA en AAA voor normale en grote tekst en aan 3:1 voor randen, iconen en knopvlakken, zonder naar boven af te ronden. Voor elk paar dat niet slaagt, krijg je de dichtstbijzijnde kleur die wel slaagt, één keer donkerder en één keer lichter, in dezelfde tint. Do4U maakt ook een aangepast palet, controleert dat als geheel opnieuw en exporteert het als CSS custom properties, SCSS of JSON. Alles draait in code, zonder AI, en de check is gratis.

De check kent alleen de kleurenparen die je invoert. Hij ziet geen lettergroottes, afbeeldingen achter tekst, transparantie of hover- en focustoestanden, dus test ook de afgewerkte pagina's. Do4U maakt het concept, jij controleert en beslist.