Voorbeelden van slecht kleurcontrast, gemeten en opgelost
Voorbeelden van slecht kleurcontrast
Voorbeelden van slecht kleurcontrast en hoe u ze oplost | We.Inc
Acht veelvoorkomende voorbeelden van slecht kleurcontrast op realistische winkelpagina's, elk met de berekende WCAG-ratio, de oorzaak en een oplossing die u live kunt proberen.
Slecht kleurcontrast is tekst of een bedieningselement waarvan de kleur te dicht bij de achtergrond ligt, waardoor veel bezoekers het moeilijk kunnen lezen. De gebruikelijke boosdoeners zijn lichtgrijze tekst, wit op fel oranje of groen, placeholder-hints en koppen over foto's. WCAG 2.2 vraagt 4.5:1 voor normale tekst; elk voorbeeld hieronder toont de ratio.
De ratio van elk voorbeeld voor en na de oplossing
Voorbeeld
Voor
Na
Lichtgrijze broodtekst
Placeholder-tekst gebruikt als label
Witte tekst op een fel oranje knop
Witte tekst op een lichtgroene badge
Grijze tekst op een grijze kaart
Blauwe merktekst op een donker paneel
Witte kop op een lichte foto
Dit zijn fouten die voortdurend opduiken op websites van kleine bedrijven, hier nagebouwd met onze eigen kleuren zodat u de cijfers kunt zien. Bij elk voorbeeld staat welke regel het overtreedt, en in de editor kunt u een oplossing proberen en de ratio zien veranderen.
Zoek de kleinste, lichtste tekst op de pagina: datums, bijschriften, footers, formulierhints.
Controleer die tegen de exacte achtergrond waarop hij staat, inclusief getinte kaarten en banners.
Test tekst op een foto tegen het lichtste deel van de afbeelding achter de letters.
Los het op door eerst de helderheid te veranderen. Een donkerdere of lichtere tint van dezelfde kleur behoudt de uitstraling van het merk.
Beoordeel contrast niet alleen op een felle desktopmonitor. Bekijk de pagina buiten op een telefoon.
Uitgeschakelde knoppen zijn vrijgesteld in WCAG, maar zorg dat een actieve knop er nooit uitgeschakeld uitziet.
Tekst bij hover en focus telt ook mee. Het W3C noemt tekst die verschijnt bij hover of toetsenbordfocus expliciet.
Gebruikt een actiebanner een lichte merkkleur, zet er dan donkere tekst op in plaats van witte.
Ratio's tussen 3:1 en 4.5:1 zijn prima voor grote koppen en iconen, niet voor alinea's.
Veelgestelde vragen
Waarom faalt witte tekst op oranje zo vaak?
Oranje en geel zijn heldere kleuren, dus hun luminantie ligt dicht bij die van wit. Ons voorbeeldoranje #F5A623 haalt met witte tekst maar ongeveer 2:1.
Moet placeholder-tekst aan de contrasteis voldoen?
Ja. De W3C-toelichting bij succescriterium 1.4.3 noemt placeholder-tekst bij de tekst die eronder valt. Een zichtbaar label boven het veld blijft het betere patroon.
Hoe controleer ik tekst over een foto?
Meet tegen het deel van de afbeelding direct achter de tekst en ga uit van het lichtste gebied. Het W3C noemt achtergrondafbeeldingen zonder voldoende contrast als een fout.
Is een gekleurde link zonder onderstreping een contrastfout?
Het is een probleem met kleurgebruik onder succescriterium 1.4.1, dat zegt dat kleur niet de enige visuele manier mag zijn om informatie over te brengen. Een onderstreping lost het op.
Zijn grijs weergegeven uitgeschakelde knoppen een probleem?
Tekst in inactieve interface-onderdelen heeft geen contrasteis onder 1.4.3. Zorg er alleen voor dat de knop echt inactief is, en er niet alleen zo uitziet.
Waarom deze fouten zo vaak voorkomen
Ontwerpen worden vaak goedgekeurd op een groot, helder scherm waarop lichte tekst nog scherp oogt. Dezelfde pagina op een oudere telefoon met de helderheid omlaag vertelt een ander verhaal.
Merkkleuren doen de rest. Een vrolijk oranje of limoengroen ziet er prachtig uit als vlak, en dan zet iemand er witte tekst op omdat knoppen er meestal zo uitzien.
De regel die niet over ratio's gaat
Succescriterium 1.4.1 staat los van de ratio's: het vraagt dat kleur nooit de enige manier is waarop informatie wordt getoond. Links die alleen met kleur zijn gemarkeerd, verplichte velden die alleen in rood zijn aangegeven en grafieken die alleen op tint te onderscheiden zijn, overtreden het allemaal.
Combineer kleur met iets anders: een onderstreping, een icoon, een label, een patroon.
Wat er misgaat in elk voorbeeld
Probleem en oplossing per voorbeeld
Voorbeeld
Waarom het faalt
Oplossing
Lichtgrijze broodtekst
Lichtgrijs oogt rustig in een mockup, maar op een telefoon bij daglicht vervaagt het.
Maak het grijs donkerder tot #595959, dat 7:1 haalt op wit.
Placeholder-tekst gebruikt als label
De hint in een leeg veld is meestal licht, en WCAG rekent placeholder-tekst ook tot tekst die contrast nodig heeft.
Houd een zichtbaar label boven het veld en maak de hint donkerder tot #6B7280.
Witte tekst op een fel oranje knop
Heldere middentinten zoals oranje en geel zijn licht, dus witte tekst erop heeft weinig contrast.
Gebruik een gebrand oranje zoals #C2410C, of houd het felle oranje en zet er donkere tekst op.
Witte tekst op een lichtgroene badge
Succes- en actiebadges gebruiken vaak een fel groen waarop witte tekst niet leesbaar is.
Gebruik een dieper groen zoals #15803D achter witte tekst.
Grijze tekst op een grijze kaart
Een grijs dat slaagt op wit kan falen op een getinte kaart, omdat de kaart donkerder is dan de pagina.
Gebruik een donkerder grijs, zoals #4B5563, op getinte vlakken.
Blauwe merktekst op een donker paneel
Een middenblauw dat op wit werkt, wordt modderig op antraciet: beide kleuren liggen midden in het helderheidsbereik.
Maak het blauw lichter tot #93C5FD op donkere panelen.
Witte kop op een lichte foto
Tekst over een foto wordt getoetst aan de delen van de afbeelding erachter. Een lichte lucht of een witte muur laat witte tekst nergens opvallen.
Zet de kop op een effen of sterk verdonkerde band, of haal hem van de afbeelding af.
Een link die alleen met kleur wordt aangegeven
Als een link alleen in kleur verschilt van de zin eromheen, kunnen mensen die de kleuren niet uit elkaar houden hem niet vinden.
Onderstreep links in broodtekst. De kleur mag blijven.
Oplossingen in CSS
Leesbare kop op een foto
Een donkere band achter de woorden geeft witte tekst een stabiele achtergrond, wat de foto ook toont.
Links die niet op kleur leunen
Onderstreep links binnen alinea's en geef toetsenbordfocus een duidelijke outline.
Voor-en-na-editor
Kies een voorbeeld en verander dan de gecorrigeerde kleuren om te zien hoe ver u uw merktint kunt oprekken voordat hij faalt.
Voorbeeld
Tekstkleur
Achtergrondkleur
Contrast {r}
Link ten opzichte van broodtekst {r}
Voldoet aan 4.5:1 voor broodtekst.
Voldoet alleen aan 3:1, dus hooguit grote tekst of iconen.
Onder 3:1. Voor veel mensen moeilijk te lezen.
De oplossing behoudt de kleuren en voegt een onderstreping toe, zodat kleur niet langer het enige signaal is.
Geen hex-kleur
Deze week gratis bezorging bij bestellingen boven $50.
In winkelwagen
Uw e-mailadres
Het voorjaarsmenu is er
Lees ons
retourbeleid
voordat u bestelt.
Kleuren worden in uw browser gecontroleerd met de WCAG 2.2-formule.
Lichtgrijze broodtekst
Placeholder-tekst gebruikt als label
Witte tekst op een fel oranje knop
Witte tekst op een lichtgroene badge
Grijze tekst op een grijze kaart
Blauwe merktekst op een donker paneel
Een link die alleen met kleur wordt aangegeven
Lichtgrijs oogt rustig in een mockup, maar op een telefoon bij daglicht vervaagt het.
De hint in een leeg veld is meestal licht, en WCAG rekent placeholder-tekst ook tot tekst die contrast nodig heeft.
Heldere middentinten zoals oranje en geel zijn licht, dus witte tekst erop heeft weinig contrast.
Succes- en actiebadges gebruiken vaak een fel groen waarop witte tekst niet leesbaar is.
Een grijs dat slaagt op wit kan falen op een getinte kaart, omdat de kaart donkerder is dan de pagina.
Een middenblauw dat op wit werkt, wordt modderig op antraciet: beide kleuren liggen midden in het helderheidsbereik.
Als een link alleen in kleur verschilt van de zin eromheen, kunnen mensen die de kleuren niet uit elkaar houden hem niet vinden.
Maak het grijs donkerder tot #595959, dat 7:1 haalt op wit.
Houd een zichtbaar label boven het veld en maak de hint donkerder tot #6B7280.
Gebruik een gebrand oranje zoals #C2410C, of houd het felle oranje en zet er donkere tekst op.
Gebruik een dieper groen zoals #15803D achter witte tekst.
Gebruik een donkerder grijs, zoals #4B5563, op getinte vlakken.
Maak het blauw lichter tot #93C5FD op donkere panelen.
Onderstreep links in broodtekst. De kleur mag blijven.