Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Welke kleurcontrast wordt voorgeschreven voor tekst op websites?
Normale tekst heeft minimaal 4,5:1 contrastverhältnis met de achtergrond nodig, grote tekst - vanaf ongeveer 24 pixel of vet vanaf ongeveer 18,7 pixel - minimaal 3:1. Deze drempels afkomstig van internationale norm WCAG. Ze zorgen ervoor dat ook mensen met verslechterde zicht uw teksten kunnen lezen - en elke bezoeker bij zonlicht op mobiel.
Het contrastverhältnis in eenvoudige taal verklaard
Het contrastverhältnis beschrijft hoe sterk tekstkleur en achtergrondkleur in helderheid van elkaar verschillen. Zwart op wit bereikt de topwaarde 21:1 en leest zich moeiteloos. De modieuze lichtgrijs op wit ligt vaak onder 3:1 - voor mensen met leeftijdsafhankelijk verslechterde zicht verdwijnt dergelijke tekst in de grijze vlakte. Getroffen zijn niet alleen visueel gehandicapten: ook de klant die uw openingsuren bij zonlicht op mobiel zoekt, mislukt aan zwakke contrasten. De drempel 4,5:1 voor normale tekst en 3:1 voor grote tekst is het in de norm vastgestelde compromis tussen gestalterische vrijheid en betrouwbare leesbaarheid.
Zo meet onze messkern het contrast - ook op afbeeldingen
De basismatig neemt axe-core over: het berekent voor de teksten van uw pagina het contrastverhältnis van tekst- en achtergrondkleur. Bij tekst op foto's of kleurgradienten kan geen gereedschap de achtergrond eenvoudig aflezen - precies daar gaat onze messkern verder: hij schakelt de tekst even onzichtbaar, fotografeert de plek in browser, berekent helderheid achtergrond beeldpunt voor beeldpunt en bepaalt daaruit het echte contrast tegen de tekstkleur. Zo wordt uit niet bepaalbaar een betrouwbaar oordeel. Elke doorgefaalde plek documenteert het rapport met gemeten waarde, vereiste drempel en bewijsschermafdruk - u ziet dus precies welke tekststel getroffen is.
Contrast verbeteren zonder het ontwerp op te offeren
Goede contrasten dwingen geen zwart-wit-ontwerp af. Meestal volstaat het om de tekstkleur enkele stappen af te donkeren - van een lichtgrijs wordt een middel antraciet, dat dezelfde terughoudendheid uitstraalt en toch leesbaar is. Bij tekst op foto's helpen beproefde handelingen: een halfdoorzichtige donkere vlakte achter de tekst, een kleurverlopen aan onderkant afbeelding of verplaatsing van tekst naar rustige beelddeel. Uw merkkleur hoeft u meestal niet te veranderen - meestal volstaat het ze voor grootschalige achtergronden te gebruiken en voor tekst een dunkerder of lichter variant van dezelfde kleurenfamilie te kiezen.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- Controleer eerst de grijze teksten van uw website - voetteksten, onderschriften en formulierhints vallen het meest onder de drempel.
- Vraag uw bureau alle tekstkleuren tegen de drempels 4,5:1 en 3:1 te controleren en de waarden vast te leggen.
- Plaats tekst op foto's met een semi-transparante donkere achtergrond, in plaats van de leesbaarheid aan de afbeelding over te laten.
- Bekijk uw pagina bij helder daglicht op een mobiele telefoon — wat daar uitvalt, valt altijd uit voor slechtzienden.
- Leg de gecontroleerde kleurkombinaties in uw ontwerphandleiding vast, zodat nieuwe pagina's ze kunnen overnemen.