Contrast van tekst met achtergrondkleur op een toegankelijke site

Voor een toegankelijke website is een goed contrast tussen tekst en achtergrondkleur belangrijk. Onvoldoende contrast maakt de tekst moeilijk leesbaar voor slechtzienden. Dat wordt versterkt als een bezoeker ook nog last heeft van een afwijking in het waarnemen van kleuren, zoals kleurenblindheid. Maar ook voor gebruikers zonder deze beperkingen leest een tekst prettiger als het contrast voldoet. In de internationale toegankelijkheidsrichtlijnen WCAG 2.1 niveau AA zijn eisen gesteld aan de contrastverhouding tussen tekst en achtergrondkleur. In dit artikel lees je wat deze contrasteisen zijn, hoe je het in één keer goed doet, op welke aandachtspunten je moet letten en welke tools je kunt gebruiken.

In het kort

Voor als je even snel wilt weten wat de contrasteisen ook maar weer zijn:

4,5:1 voor gewone tekst
3:1 voor grote letters (vanaf 18 pt)
3:1 voor vette letters (vet en groter of gelijk aan 14 pt)

Uitleg en achtergronden vind je hieronder.

Goed contrast

De contrasteisen gaan over de kleur van tekst met de achtergrondkleur. Teksten met een goed contrast zijn makkelijker leesbaar voor iedereen, niet alleen voor slechtzienden en mensen die kleurenblind zijn. Het aantal kleurenblinden is overigens niet gering: 1 op 12 mannen en 1 op 250 vrouwen. De contrasteisen gelden specifiek voor tekst. Maar wil je een toegankelijke bruikbare site, zorg er dan ook voor dat kleurencombinaties in iconen, grafieken en diagrammen voldoende contrast hebben. Of dat deze informatie verduidelijkt wordt door het gebruik van patronen en/of tekst.

Contrastverhouding: de mate van contrast in cijfers

De mate van contrast, kun je in cijfers uitdrukken. Deze geven de contrastverhouding – of in het Engels de ‘contrast ratio‘ aan. Voor het berekenen van contrastverhoudingen is een algoritme ontwikkeld. De contrastverhouding kan berekend worden met verschillende tools door de voor- en achtergrondkleur aan te geven. Het maakt hierbij niet uit welke kleur de voorgrondkleur en welke de achtergrondkleur is.

Goed contrast begint bij een contrastverhouding van 3:1 voor grote of vette letters en 4,5:1 voor gewone tekst. Als er geen contrast is, is de verhouding 1,0:1. Bij maximaal contrast is de verhouding 21,0:1. Maximaal contrast is overigens niet het best leesbaar.

Contrasteisen bij grote of vette tekst

Grote of vette tekst is voor veel mensen makkelijker leesbaar. Daarom zijn de contrasteisen voor deze tekst minder zwaar. Deze minder zware eisen gelden, bij gangbare lettertypes, voor grote tekst vanaf 18 punten en voor vette tekst vanaf 14 punten. Bij niet-gangbare lettertypes kan het anders zijn. Deze letters kunnen kleiner of dunner zijn, waardoor het contrast bij de genoemde verhouding nog steeds niet voldoende is.

Voor scherm wordt het gebruik van ‘pt’ (point, vaste eenheid) niet aangeraden. Daarom moet je nog een vertaling maken naar eenheden die je gebruikt voor lettergrootte op het web, namelijk ‘em’ of percentages (beide relatieve eenheden). Voor gangbare lettertypes geldt dat 14 pt grofweg 1,2 em is, of 120% van de standaardgrootte van de tekst (als de bodyfont 100% is). En 18 pt is grofweg 1,5 em of 150% van de standaardgrootte van tekst (als de bodyfont 100% is).

Houd er rekening mee dat via style sheets verschillende fontgroottes kunnen worden aangegeven voor verschillende weergaves. Bijvoorbeeld: Voor een kopje van website A is met style sheets aangegeven dat deze een grootte heeft van 14 punten en vet is. Zo zie je het op een desktop of op een laptop. Bij een kleinere weergave wordt met het style sheet aangegeven dat dezelfde kop een grootte van 12 punten heeft en vet is. Dezelfde kop wordt dus anders getoond op verschillende devices. In dit voorbeeld geldt voor de grotere kop, zoals je die ziet op een desktop, de contrasteis van 3:1. De tekst valt onder de eisen voor grote of vette tekst. Bij de weergave op een mobiel geldt de contrasteis van 4,5:1 vanwege de kleinere letter.

Contrasteisen voor tekst

Voor de verschillende conformiteitsniveaus worden verschillende contrasteisen gehanteerd.

Niveau A

Op niveau A zijn geen contrasteisen voor tekst benoemd.

Niveau	Contrast	Contrastverhouding	Kleurvoorbeeld
Niet benoemd (zou theoretisch gezien mogelijk zijn bij voldoen aan niveau A)	Geen contrast (bijvoorbeeld wit op wit of zwart op wit)	1,0:1	Witte tekst (#ffffff) op een witte achtergrond (#ffffff), contrastratio 1:1
Niet benoemd (zou theoretisch gezien mogelijk zijn bij voldoen aan niveau A)	Laag contrast	1,1:1 tot 2,9:1	Lichtblauwe tekst (#73c1c5) op een witte achtergrond (#ffffff) met een contrastverhouding van 2,1:1

Niveau AA

Op niveau AA worden eisen gesteld aan het contrast van tekstkleur met de achtergrondkleur.

Niveau	Contrast	Contrastverhouding	Kleurvoorbeeld
AA	Minimaal contrast	4,5:1 (of hoger)	Blauwe tekst (#217FA5) op een witte achtergrond (#ffffff). Contrastverhouding 4,5:1
AA	Minimaal contrast voor grote tekst (18 punten) of vette tekst (14 punten)	3,0:1 (of hoger)	Blauwe tekst (#2B9ECD ) op een witte achtergrond (#ffffff). Contrastverhouding 3:1

Niveau AAA

Op niveau AAA worden sterkere eisen aan het contrast van tekst met de achtergrondkleur gesteld:

Niveau	Contrast	Contrastverhouding	Kleurvoorbeeld
AAA	Versterkt contrast	7,0:1 (of hoger)	Blauwe tekst (#16607E) op een witte achtergrond (#ffffff) met een contrastverhouding van 7:1
AAA	Versterkt contrast voor grote of vette tekst	4,5:1 (of hoger)	Blauwe tekst (#217FA5) op een witte achtergrond (#ffffff). Contrastverhouding 4,5:1
AAA	Maximaal contrast. Noot: Het grootste contrast lijkt misschien het beste, maar vaak wordt gesteld dat zwart op wit niet het meest prettig zou lezen. Je zou zwarte tekst bijvoorbeeld beter op een zandkleurige achtergrond kunnen plaatsen.	21,0:1 (niet benoemd als eis)	Zwarte tekst (#000000) op een witte (#ffffff) achtergrond.

Contrasteisen voor links in lopende tekst

Voor links in een menu geldt dat – door ontwerp of context – het voor de gebruiker duidelijk is dat het links zijn. Deze hoef je doorgaans niet te onderstrepen om dat te verduidelijken. Maar er staan vaak ook links in de content zelf. Dit noemen we hier ‘links in lopende tekst’.

Voor de meeste bezoekers, waaronder de scannende lezer, is het gemakkelijk als links in lopende tekst onderstreept zijn. En daardoor goed herkenbaar zijn. Op sommige websites zijn links niet onderstreept, maar hebben ze op het eerste gezicht alleen een afwijkende kleur. Mag dit volgens de internationale toegankelijkheidsrichtlijnen WCAG 2.1? Hierin staat immers dat kleur niet het enige visuele middel mag zijn ‘om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden’.

In de (informatieve) techniek (techniek G183) wordt gesteld dat je links ook mag onderscheiden met een contrast van 3:1 met omringende tekst als er extra aanwijzingen zijn bij focus. Zoals een onderstreping, een andere achtergrondkleur of een andere tekstweergave. Deze aanwijzingen moeten er zowel voor muisgebruikers als voor toetsenbordgebruikers zijn. Natuurlijk moeten zowel de link als de tekst ook nog voldoende contrast hebben met de achtergrond.

In de (informatieve) gangbare fout F73 wordt gesteld dat links in dezelfde kleurtint (hue) kunnen afwijken in ‘lightness‘. Dit betekent dat ze onderscheidbaar kunnen zijn in helderheid of lichtsterkte en dan een goede contrastverhouding hebben. Hiermee zou de link dus niet alleen herkenbaar zijn in kleur. En dus voldoen.

Een voorbeeld: Voor een rode link in een roze tekst (!) betekent dat het volgende: Rood en roze zijn dezelfde kleur (‘hue‘), maar ze verschillen in helderheid (‘lightness‘). Omdat ze verschillen in helderheid (‘lightness‘), en dat is niet kleur, zouden ze bij een contrastverhouding van 3:1 met de omliggende tekst voldoen aan Succescriterium 1.4.1 waarin staat dat je informatie niet alleen met kleur mag overbrengen. Als een link in een andere kleur en bijvoorbeeld vet is, zou dat ook voldoen. De aanvullende aanwijzing naast kleur mag niet pas te voorschijn komen na een actie van de gebruiker. Zoals pas bij mouse-over.

In het normatieve deel van WCAG 2.1 is overigens niet uitgewerkt dat kleur naast tint, ook de component ‘contrast’ heeft. En dat dit zou betekenen dat een link die alleen in kleur van omliggende tekst verschilt, bij een aantal kleurcombinaties genoeg contrast heeft en daarom toch zou voldoen.

Kortom: als een link alleen een andere kleur heeft dan de omringende tekst, moeten er aanvullende aanwijzingen zijn, zoals onderstreping, vet, cursief of voldoende verschil in lichtsterkte (‘lightness‘). En daarmee zou kleur niet het enige middel zijn om de link te onderscheiden.

Maar: In de technieken staat ook dat dit niet de voorkeur heeft, omdat het kleurverschil mogelijk niet altijd duidelijk is voor mensen met zwart-witkleurenblindheid. Onderlijning wordt daarom, ook in deze techniek, aanbevolen voor links in lopende tekst. En als een goed bruikbare website het doel is, waarom zou je dan afwijken van de conventie dat links in tekst onderstreept zijn? Waarom zou je er een zoekplaatje van maken? Onderstreep vanwege bruikbaarheid en gebruiksvriendelijkheid altijd links in lopende tekst.

Uitzonderingen: contrasteisen niet van toepassing

In een aantal gevallen hoef je geen rekening te houden met de contrasteisen:

‘Logotypes’: tekst die onderdeel is van een logo of merknaam. Je hoeft het logo niet te laten aanpassen vanwege de toegankelijkheidsrichtlijnen. De eisen gelden wel voor kopjes, teksten, slogans et cetera, maar niet voor het logo zelf.
Als de website weinig of niet voldoende contrast heeft, maar er daarnaast een alternatieve versie met voldoende contrast is. (Lees verderop waarom ik dit afraad).
Een ‘inactieve component van de gebruikersinterface’ hoeft ook niet aan de strenge eisen te voldoen. Een voorbeeld hiervan is een uitgeschakeld formulierelement. Dit zou een formulierveld kunnen zijn dat niet van toepassing is. Zoals een vinkje voor zwangerschapsverlof in een formulier waarbij de bezoeker al heeft aangegeven dat hij een man is.
Tekst die puur decoratief is. Bijvoorbeeld willekeurige woorden die als illustratie dienen. Deze hoeven niet zo’n hoog contrast te hebben dat ze leesbaar zijn.
‘Incidentele tekst’. Bijvoorbeeld een foto waarop toevallig een straatnaambordje staat. Maar: een afbeelding die ‘significant andere visuele content‘ bevat, valt wel onder de contrasteisen. Denk aan foto’s van tekst bedoeld voor een speciaal opmaakeffect, waarbij de tekst de belangrijkste inhoud van de afbeelding is. Bijvoorbeeld een foto van speelgoedblokken met letters die een woord vormen, waarbij het woord een kopje boven een alinea vormt.
Tekst die voor niemand zichtbaar is, hoeft vanzelfsprekend niet aan de eisen te voldoen.

Doe het in 1 keer goed

Zorg standaard voor goed contrast

Het aanbieden van een site met laag contrast, met daarnaast de mogelijkheid de site in een ‘hoog contrastversie’ te zien, kan voldoen aan de eisen zoals gesteld in de richtlijnen. Toch raad ik dit af. Mijn advies: zorg voor 1 goed leesbare en toegankelijke versie. Het aanbieden van een slecht bruikbare site als default gaat altijd ten koste van de gebruiksvriendelijkheid.

Voor iedere bezoeker is een goed contrast tussen tekst -en achtergrond prettig. Niet alleen voor kleurenblinden (1 op de 12 mannen) of mensen die een visuele beperking hebben, maar ook voor weergave op een beamer, smartphone, bij lichtinval et cetera.

Gebruiksvriendelijkheid

Niet iedere gebruiker zal de hoogcontrastknop kunnen vinden of gebruiken.

Snapt en vindt je moeder, opa of buurvrouw knoppen die de hoog contrastversie aangeven (hier een leeg rondje en een rondje half-wit, half-zwart)?

Of een afbeelding van een rondje half-wit, half-zwart, al dan niet vergezeld van tekst?

Vinden ze een knop of link in een hoekje bovenaan de website op het moment dat ze een taak willen uitvoeren en ze op zoek zijn naar het antwoord op die vraag? En kun je een ’toptakenwebsite’ rijmen met een website die standaard onvoldoende contrast heeft? Het kunnen uitvoeren van een taak vraagt hier immers eerst andere acties van de bezoeker op de site, namelijk dat de gebruiker zelf voor goed contrast zorgt.

Extra ontwerp- en beheerkosten

Een hoog contrastversie – naast een weergave met onvoldoende contrast – levert altijd extra werk op bij ontwerp en beheer. Het vraagt extra ontwikkelkosten, extra controle, extra beheer. En vaak zie je in de hoog contrastversie dan toch nog onderdelen met te weinig contrast. Omdat de defaultontwerpmodus niet ‘ontwerpen voor toegankelijkheid’ is. Ook voor pdf’s en andere formaten die niet met voldoende contrast worden aangeboden zal een alternatief moeten komen. Dit kost altijd extra geld, inspanning, tijd en complexiteit.

Eigenlijk maak ik ook bezwaar tegen het begrip ‘hoog contrast versie’. Wat we nu de hoog contrastversie noemen is eigenlijk de versie met normaal contrast, goed contrast. Dat hoeft niet zwart-wit of zwart-geel te zijn. Zorg ervoor dat de defaultversie voldoet aan de eisen op niveau AA. Wil je daarnaast nog een hoger contrastversie aanbieden? Dan is dat er 1 op niveau AAA.

Designersversie

Nog niet overtuigd? Draai het eens om. Stel je nu eens voor dat je als default de voor iedereen bruikbare versie aanbiedt. En daarnaast, via een linkje in het servicemenu, een ‘designersversie’, oftewel een laagcontrastversie. Deze versie is niet voor iedereen goed te lezen, maar wordt toegevoegd omdat hij er mooi uitziet. Zou je dit voorstel doen binnen je organisatie of aan je opdrachtgever, dan durf ik te wedden dat je nul op rekest krijgt. Voor je voorstel komt geen budget en het wordt niet uitgevoerd. Waarom dan wel andersom? Waarom wel een designersversie als default met een verstopte link naar een voor iedereen bruikbare versie?

De huisstijl bevat toegankelijke kleurcombinaties

Kleurenblinde ontwerpers met beperkte computervaardigheden. Ik ken ze niet. Maar op je site komen wel bezoekers die minder goed kunnen zien, kleurenblind zijn of beperkte computervaardigheden hebben. Jouw doelgroep is niet je ontwerper, maar je bezoeker. Het belangrijkste is dat die bezoeker je site kan gebruiken, je producten koopt, je diensten afneemt of je informatie kan lezen. Content met te slecht contrast is geen bruikbare content. Als je een gebruiksvriendelijke goede site wilt, dan zorg je dat alles wat belangrijk is voor je gebruiker (en waarom staat het anders op de site?) goed contrast heeft. Design moet niet boven content gaan, maar de bruikbaarheid van content juist vergroten.

Een huisstijl zonder voldoende contrast gaat dus voorbij aan de gebruiker. Grijp de richtlijnen aan om de huisstijl op te knappen en bruikbaar te maken. Een bruikbare huisstijl levert je ook voordeel op bij PowerPoint-presentaties (goed contrast zorgt voor een duidelijkere weergave met een beamer), Excel-bestanden en vooral pdf’s die online geplaatst worden.

Links in lopende tekst: onderstreept

Om links in lopende tekst duidelijk aan te geven, volg je het best de conventies. Dat houdt in: onderstreep ze. Ook hier geldt: help je bezoeker. De slechtziende gebruiker, de scannende gebruiker, de scrollende gebruiker. Als links in lopende tekst niet onderstreept zijn, moeten gebruikers zoeken naar links. Wil je je gebruikers frustreren door ze met de muis of tabtoets een speurtocht te laten uitvoeren? En daarmee het risico lopen dat de content minder bruikbaar is, en dus je organisatie of site minder succesvol? Nee, natuurlijk niet. Daarom: onderstreep links in lopende tekst altijd.

Gebruik lastige kleurcombinaties slim

Is de achtergrondkleur wit, dan is er een aantal kleuren waarvoor niet (of niet goed) een goede contrastverhouding te vinden is. Dit zijn geel, oranje, lichtblauw en lichtgroen. Gebruik deze kleuren daarom niet voor teksten en om informatie over te brengen, maar alleen decoratief. Bijvoorbeeld voor blokken waar geen tekst in staat, voor lijnen die geen betekenis aangeven, kaders et cetera. Dit geldt natuurlijk ook andersom, als de achtergrond geel, oranje, lichtblauw of lichtgroen is en de tekst wit.

Meet tenslotte altijd de kleurcombinaties op contrastverhouding. Je kunt het niet op het oog goed inschatten.

Aandachtspunten

Afbeeldingen van tekst

Afbeeldingen van tekst zijn vanwege de beperkte toegankelijkheid niet toegestaan bij conformance op niveau AA. Dit omdat de bezoeker tekst moet kunnen aanpassen om voor hem of haar bruikbaar te maken. Bijvoorbeeld door het gebruik van een eigen style sheet met hoog contrast, een andere lettergrootte of de toegankelijkheidsopties van het besturingssysteem.

Maar afbeeldingen van tekst veranderen niet mee. Deze tekst kan niet geselecteerd worden en afbeeldingen schalen niet altijd goed. Het is doorgaans niet mogelijk het contrast tussen voor-en achtergrond aan te passen. Iets wat voor een aantal gebruikers noodzakelijk is. Als tekst niet uit een afbeelding bestaat, maar uit opgemaakte tekst, dan is deze makkelijker aanpasbaar, bruikbaarder en beter toegankelijk.

Kortom: gebruik waar mogelijk (en voor conformance op niveau AA zelfs verplicht) tekst en geen afbeelding van tekst.

Tekst op een achtergrondafbeelding

Plaats je tekst op een afbeelding? Let op dan op het contrast van de tekst met de verschillende kleuren in deze afbeelding. Zorg eventueel voor een donker of lichter blok achter de letters.

Rode tekst op een groene achtergrondkleur in foto (gras). Onvoldoende contrast

In de afbeelding hierboven zie je een rode tekst geplaatst op een foto. Achter de rode tekst zie je groen gras. Het contrast is te laag. Vind je dit een extreem voorbeeld? Ik kom zulke voorbeelden wekelijks tegen.

Dezelfde foto als in vorig voorbeeld. Rode tekst heeft nu wel voldoende contrast met achtergrond doordat er een wit blok achter de tekst staat.

Als er een gekleurd blok achter de tekst staat, in dit geval een wit, enigszins transparant blok, dan is het contrast wél goed. Let op dat het blok groot genoeg is voor alle tekst, ook als een redacteur langere tekst invoert.

Foutmeldingen

Wat ik regelmatig tegenkom zijn contrastproblemen bij de foutmeldingen. Helaas wordt dit vaak niet goed meegenomen bij ontwerp en bij testen. De tekst wordt meestal in een kleur rood weergegeven die onvoldoende contrast heeft met een witte achtergrondkleur.

In bovenstaand voorbeeld is het contrast 4,0:1. (Het rood is #ff0000 op een witte achtergrond #ffffff). Dit is onvoldoende; voor conformance op niveau AA zou de contrastverhouding 4,5:1 moeten zijn.

Placeholdertekst

Placeholdertekst kun je in HTML5 via het placeholder attribute in een formulierveld plaatsen. Placheholdertekst is tekst die in een formulierveld staat tot de gebruiker iets gaat intypen of het veld focus heeft.

De standaardkleur van het HTML5-placeholder attribute heeft onvoldoende contrast. Zorg met behulp van styles dat dit contrast minimaal 4,5:1 is.

Video

Ook teksten in een video moeten voldoende contrast hebben met de achtergrond. Denk aan ondertiteling en andere teksten die in beeld komen. Zoals de naam van de spreker, kernwoorden en de aftiteling.

Als je een goede videospeler kiest, dan kun je ervoor zorgen dat de ondertiteling een goed contrast heeft met de achtergrond. Zoals bijvoorbeeld de ‘overheidsspeler’ op Rijksoverheid.nl, waar witte tekst op een lichte achtergrond een rand krijgt waardoor deze goed leesbaar is. Een voorbeeld uit de Video: Investeren in energiebesparing, innovatie en scholing:

contrast-ondertiteling

Zorg ook dat andere teksten in video’s goed contrasteren met de achtergrond.

Contrast binnen online pdf’s

Zoals eerder besproken stellen de toegankelijkheidsrichtlijnen dezelfde eisen aan een pdf als aan een HTML-pagina. Ook de contrastverhouding van tekst en achtergrondkleur moet in een pdf voldoende zijn. Als een pdf niet toegankelijk is, zou een toegankelijk alternatief aangeboden moeten worden. Denk hierbij aan een toegankelijke andere pdf of een toegankelijke HTML-pagina.

Juist bij online pdf’s kom ik de grootste toegankelijkheidsproblemen door slecht contrast tegen. En zo zijn we weer terug bij de eerder genoemde huisstijl. Houd er bij huisstijl, sjablonen en externe opdrachten rekening mee dat als een pdf online komt het contrast goed moet zijn.

Contrasteisen voor niet-tekstuele content

In WCAG 2.1 zijn er ook contrasteisen voor niet-tekstuele content. Het gaat om user interface-componenten en grafische objecten. Daarover kun je meer lezen bij succescriterium 1.4.11 Non-text Contrast (AA) .

Tools om contrast te meten

Er zijn verschillende bruikbare tools. Ik noem er een aantal:

Colour Contrast Analyzer
Hiermee kun je met een pipetje een voorgrondkleur en een achtergrondkleur selecteren en bekijken of de contrastverhouding goed is. Ook kun je zelf kleurnummers invoeren en de contrastverhouding zien. Ook zie je of het een geschikte verhouding is voor gewone of grote letters op niveau AA of AAA en hoe de contrastverhouding is voor tekst en voor niet-tekstuele content (Succescriterium 1.4.11).
Firebug voor Firefox: Berekend
Als je Firebug geïnstalleerd hebt in Firefox, klik je op de kleur tekst die je wilt onderzoeken met je rechtermuisknop – of een equivalente methode – op ‘Inspecteer met Firebug’. Ga dan naar het tabje ‘Berekend’ en kijk bij ‘Color’ voor het kleurnummer. Ook kun je hier de berekende tekstgrootte zien, zodat je weet onder welke contrasteisen de tekst valt.
Contrast checker

Een online tool die bijvoorbeeld heel duidelijk toont hoe kleuren er uit zien als je ze in grijstinten weergeeft.

Deskundig onderzoek huisstijl, website en pdf’s

Niet de kennis en ervaring in huis of wil je huisstijl, pdf’s of site door een onafhankelijke expert laten testen? Of op zoek naar expertadvies met betrekking tot specifieke ontwerpen? Dan kun je contact met me opnemen door me te bellen (06 2500 3400) of me te mailen (info@iacobien.nl). Je kunt ook eerst meer lezen over wat ik doe op de pagina Huur me in.

Trainingen

Ik geef verschillende trainingen over digitale toegankelijkheid en bouwkwaliteit, ook voor ontwerpers en incompany.

Vragen en opmerkingen

Heb je vragen of opmerkingen over dit artikel? Ik hoor het graag via info@iacobien.nl.

Meer informatie