Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.
Een op de twaalf mannen is kleurenblind. Ze hebben vooral last met de kleuren rood en groen. Als kleur het enige middel is voor het overbrengen van informatie, het aangeven van antwoorden of het onderscheiden van visuele elementen of functies, zorg er dan voor dat de informatie ook zonder kleur beschikbaar is, bijvoorbeeld via context of markup (zie ook link naar artikel in rechter kolom).
Relevante Webrichtlijnen: R-pd.8.8, R-pd-10.1 R-pd.22.9.
*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0; zie hieronder voor meer informatie.
Hieronder zie je een voorbeeld van functioneel kleurgebruik, waarbij groen gebruikt wordt voor 'doorgaan' en rood voor 'stoppen'. Wanneer alleen kleur wordt gebruikt, zal de informatie niet toegankelijk zijn voor bepaalde groepen mensen. Let op dat een kleine groep mensen (achromaten) rood waarneemt als zwart. Gebruik daarom op rood liever een witte letter met goed contrast.
Uitgaande van het feit dat de meeste mensen rood boven verwachten en groen onder, is het gebruik zonder tekst extra verwarrend en zelfs niet zonder risico. Gemiddeld heeft één op de acht mannen problemen met de rood-groen waarneming tegen één op de driehonderd vrouwen. Zorg dus voor meer onderscheid dan alleen verschillend kleurgebruik.
De onderstaande afbeelding laat een voorbeeld zien van een webpagina met een simpel reserveringssysteem. Onderaan is ook de tekstversie van de pagina te zien in het programma Webformator dat door veel blinden wordt gebruikt. Door het gebruik van kleur voor zowel de tekst als de knoppen is de pagina voor veel mensen onbruikbaar. Daaronder mensen die kleurenblind zijn en mensen die hulpapparatuur of een tekstbrowser gebruiken.
Bij het invullen van een formulier wordt vaak met een kleur aangegeven welke velden nog niet goed zijn ingevuld. Dat mag niet alleen met kleur maar moet ook op een andere manier blijken. Een oplossing is het gebruik van een extra symbool zoals een asterisk (*) of een getal. Bijvoorbeeld: 'Opties aangegeven met * kunnen niet worden geselecteerd' of zijn verkeerd ingevuld.
Druk op de groene knop om verder te gaan... Zet op de groene knop dan ook het woord 'doorgaan'. De eenvoudigste oplossing namelijk meestal het toevoegen van tekst op de knop. Als de knop een afbeelding is, vergeet dan niet om ook een alt-attribuut toe te voegen volgens ijkpunt 1.1. Let op: alleen een alt-attribuut is niet genoeg voor bovenstaande voorbeeld.
In sommige gevallen wordt door webdesigners de streep onder hyperlinks verwijderd. De links zijn dan bijvoorbeeld zichtbaar door een andere kleur. Bij een menu is het niet gebruiken van onderstreping meestal niet een probleem, maar in de tekst kan het moeilijk zijn om links te vinden. De webrichtlijnen hanteren twee regels ten aanzien van links. De kern is vooral dat het consistent moet zijn:
Hoewel consistentie een vanzelfsprekendheid lijkt, is het voor de W3C richtlijnen prioriteit 2: 'Gebruik navigatiemechanismen op een consistente wijze' (WCAG 13.4). Voor de Webrichtlijnen is het wel verplicht. Kijk voor meer informatie over kleurcontrast naar ons artikel over Effectief omgaan met kleuren
Kleurcodering
Mogelijkheid 1: Een pagina bekijken in grijstinten kan als volgt: open de te bekijken webpagina in Internet Explorer (met JavaScript ondersteuning aan) en type dan het volgende in de adresbalk in:
javascript:document.
body.style.filter
='gray()';void(null)
Ga vervolgens na of er informatie verloren gaat doordat de kleuren niet duidelijk onderscheidbaar meer zijn. Deze bookmarklet werkt niet altijd.
Mogelijkheid 2: Gebruik de AIS toolbar of een tekenprogramma om de pagina op te slaan en om te zetten.
