Kleurcontrast van uw website verbeteren

Een logo valt erbuiten, net als tekst die puur decoratief is of bij een uitgeschakelde knop. Al het andere telt mee. Een bekend voorbeeld: middengrijs #767676 op wit haalt net 4,5:1. Een tintje lichter, #777777, haalt het net niet. Op het oog ziet u dat verschil niet, de meter wel.

• Huisstijlkleuren als tekstkleur. Een frisse lichtgroene of oranje huisstijlkleur werkt prima als vlak, maar niet als kleur voor kleine tekst op wit.
• Witte tekst op knoppen in een middentint. Het ontwerp oogt rustig, de knoptekst is slecht leesbaar.
• Placeholders en hulpteksten in lichtgrijs, omdat ze "minder belangrijk" moeten lijken.
• Invoervelden met een randje dat nauwelijks afsteekt tegen de achtergrond, waardoor niet te zien is waar u moet klikken.
• Tekst op foto's in een header of slider. Op het ene deel van de foto is het leesbaar, op het lichte deel niet.
• Hover- en focusstaten. Een link die bij focus van donkerblauw naar iets lichter blauw gaat, valt niet op.
• Links in lopende tekst die alleen door hun kleur van de rest van de tekst verschillen. Dat verschil is voor mensen die kleuren slecht onderscheiden vaak niet te zien.
• Kleur als enig signaal. Een rood randje als enige aanwijzing voor een fout. Dat is een ander criterium, maar hangt er nauw mee samen; zie kleur mag niet het enige signaal zijn.

1. Een donkere variant voor tekst. De huisstijlkleur blijft voor vlakken, lijnen en illustraties. Voor tekst en links gebruikt u een donkerdere tint van dezelfde kleur. Het merk blijft herkenbaar.
2. Tekstkleur op knoppen omdraaien. Lukt wit op uw merkkleur niet, dan lukt donkere tekst vaak wel. Of u maakt de knop zelf iets donkerder.
3. Een rustige laag achter tekst op foto's. Een halfdoorzichtige donkere laag of een effen vlak achter de tekst. Controleer het contrast tegen het lichtste deel van de foto waar tekst overheen valt.
4. Grijs donkerder maken. Voor lopende tekst is bijna zwart, zoals een zeer donker grijs, rustig voor het oog en ruim voldoende.
5. Randen van velden versterken. Een iets donkerdere rand, of een rand van twee pixels, lost veel op zonder dat het formulier zwaar oogt.

Hoe u bij een nieuw ontwerp of een rebranding vanaf het begin goede kleuren kiest, leest u in kleuren kiezen voor uw website.

Biedt uw site ook een donkere weergave, controleer het contrast dan in beide modi. Waar u daarbij op let, staat in donkere modus en toegankelijkheid.

Voor links in een alinea is onderstrepen de eenvoudigste oplossing. Dan hoeft de linkkleur alleen voldoende af te steken tegen de achtergrond, niet ook nog tegen de tekst eromheen. Haalt u de onderstreping weg om het ontwerp rustiger te maken, dan heeft u een ander duidelijk signaal nodig.

De focusrand, die laat zien waar iemand met het toetsenbord is, valt onder de eis van 3:1 voor onderdelen. Een dunne lichtblauwe rand op een witte achtergrond haalt dat vaak niet. Een rand van twee pixels in een donkere kleur, eventueel met een witte rand eromheen voor donkere vlakken, werkt op vrijwel elke achtergrond.

1. Meten. Wij controleren alle tekstkleuren, knoppen, velden, focusstaten en iconen op de belangrijkste sjablonen. Automatische tools vinden een deel, tekst op afbeeldingen en hover- of focusstaten meten wij met de hand.
2. Kleurvoorstel. U krijgt een overzicht van de huidige kleuren, welke te licht zijn en een voorstel voor vervangende tinten, met de nieuwe contrastwaarde erbij. U beslist.
3. Centraal doorvoeren. Wij passen de kleuren aan in de globale instellingen van het thema of de page builder, en in CSS waar kleuren vast in de code staan. Zo past de wijziging zich overal aan.
4. Nalopen. Daarna controleren wij losse pagina's waar kleuren handmatig zijn ingesteld, want die volgen de centrale instelling niet.

Contrast is één onderdeel. Wilt u alles in één keer laten beoordelen, dan is een WCAG-audit de logische eerste stap.

• Een online contrastchecker, zoals die van WebAIM, laat u twee kleurcodes invoeren en geeft direct de verhouding.
• De ontwikkelaarstools van Chrome en Firefox tonen bij het inspecteren van tekst de contrastwaarde.
• Het gratis programma Colour Contrast Analyser heeft een pipet waarmee u kleuren op elk scherm oppikt, ook op foto's.

Meet in elk geval de lopende tekst, de linkkleur, de knoppen en de velden van uw contactformulier. Hoe contrast past in een bredere controle van een half uur, staat bij uw website zelf testen. Het totaalbeeld vindt u op uw website toegankelijk laten maken.