DevTools-tips: Ontdek en corrigeer tekst met laag contrast

Sofia Emelianova
Sofia Emelianova
GitHub

Tekst met laag contrast is het grootste toegankelijkheidsprobleem op internet. In februari 2022 had 83,9% van de top miljoen homepages dit probleem. Bekijk het WebAIM Million 2022-rapport voor meer informatie.

Met Chrome DevTools kunt u alle contrastproblemen in één oogopslag ontdekken en met één klik op de knop oplossen.

Bekijk de video om te leren hoe u:

  • Bekijk de contrastverhoudingen in de knopinfo van de infovenstermodus en de aanbevolen verhoudingswaarden in de Kleurkiezer .

    Contrastverhoudingen zijn beschikbaar in tooltip, met een Kleurkiezer om de verhouding van alternatieve kleuren te meten. Er is een AA- en AAA-indeling van het rantsoen beschikbaar.

  • Selecteer in de Kleurkiezer voorgestelde kleuren of kies een kleur onder de contrastverhoudingslijnen om te voldoen aan de WebAIM-richtlijnen .

    Aanbevolen contrastverhoudingslijnen zijn beschikbaar in het kleurvoorbeeld van de Kleurkiezer.

  • Ontdek alle contrastproblemen in de panelen CSS-overzicht en (preview) problemen .

    Vergelijk de problemen die worden vermeld in het paneel CSS-overzicht en op het tabblad Problemen.

  • Emuleer zichttekortkomingen om te begrijpen hoe uw pagina er voor al uw gebruikers uitziet.

    Wazig zicht geselecteerd op het tabblad Rendering en geëmuleerd in het kijkvenster.

Voor een meer praktische leerervaring, zie de tutorial Maak uw website leesbaarder .

Voor meer informatie, zie: