In dit artikel beschrijven we waarom en hoe we simulatie van kleurenblindheid hebben geïmplementeerd in DevTools en de Blink Renderer.
Achtergrond: slecht kleurcontrast
Tekst met een laag contrast is het meestvoorkomende automatisch detecteerbare toegankelijkheidsprobleem op internet.
Volgens WebAIM's toegankelijkheidsanalyse van de top 1 miljoen websites heeft meer dan 86% van de homepages een laag contrast. Gemiddeld bevat elke homepage 36 verschillende exemplaren van tekst met een laag contrast.
Contrastproblemen vinden, begrijpen en oplossen met DevTools
Met Chrome DevTools kunnen ontwikkelaars en ontwerpers het contrast verbeteren en toegankelijkere kleurenschema's voor web-apps kiezen:
- De tooltips voor de inspectiemodus die boven aan de webpagina worden weergegeven , geven de contrastverhouding voor tekstelementen weer .
- De DevTools-kleurenkiezer signaleert slechte contrastverhoudingen voor tekstelementen en toont de aanbevolen contrastlijn om handmatig betere kleuren te selecteren. Bovendien kan de kleurenkiezer zelfs toegankelijke kleuren voorstellen .
- Zowel het paneel CSS-overzicht als het Lighthouse Accessibility-auditrapport geven een overzicht van de tekstelementen met laag contrast zoals die op uw pagina voorkomen.
We hebben onlangs een nieuwe tool aan deze lijst toegevoegd, die enigszins afwijkt van de andere. De bovenstaande tools richten zich voornamelijk op het weergeven van contrastverhoudingsinformatie en het bieden van opties om deze te corrigeren . We realiseerden ons dat DevTools nog steeds een manier miste voor ontwikkelaars om dit probleem beter te begrijpen . Om dit aan te pakken, hebben we simulatie van visuele beperkingen geïmplementeerd in het tabblad Rendering van DevTools.
In Puppeteer kunt u deze simulaties programmatisch inschakelen met de nieuwe page.emulateVisionDeficiency(type) API .
Kleurzichttekorten
Ongeveer 1 op de 20 mensen lijdt aan een kleurenblindheid (ook wel de minder accurate term 'kleurenblindheid' genoemd). Dergelijke beperkingen maken het moeilijker om verschillende kleuren van elkaar te onderscheiden, wat contrastproblemen kan versterken .