Maak uw website beter leesbaar

Sofia Emelianova

Belangrijk punt: 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.

Teksten met een laag contrast maken uw website minder leesbaar voor alle gebruikers, en nog meer voor gebruikers met een visuele beperking. DevTools kan automatisch problemen met een laag contrast vinden en betere kleuren voorstellen om u te helpen deze op te lossen.

Gebruik DevTools om:

• Ontdek contrastproblemen . Gebruik het paneel CSS-overzicht , het tabblad (preview) Problemen of een Lighthouse- rapport om een ​​lijst met alle problemen te krijgen.
• Contrastproblemen oplossen . Bekijk de problemen met tooltip in de infovenstermodus en selecteer kleuren die de Kleurkiezer voorstelt om de contrastverhouding te corrigeren.
• Emuleer tekortkomingen in het gezichtsvermogen . Bekijk uw site zoals uw gebruikers deze zien.

Ontdek tekst met laag contrast

Tekst met laag contrast ontdekken:

1. Open DevTools op uw pagina. In deze tutorial kunt u deze demopagina gebruiken.

2. Krijg een lijst met alle contrastproblemen met behulp van een van de drie panelen:

   • CSS-overzicht
   • (Voorbeeld) Problemen
   • Vuurtoren

Contrastproblemen in het CSS-overzichtpaneel

Om een ​​overzicht te krijgen:

1. Open CSS-overzicht .
2. Leg een overzicht vast .
3. Open de sectie Kleuren , blader naar Contrastproblemen en klik op een eventueel probleem.

4. Beweeg in de tabel Contrastproblemen over een element en klik op de link ernaast.

   

5. Los het probleem op zoals beschreven in de sectie Tekst met laag contrast corrigeren .

(Voorbeeld) Contrastproblemen op het tabblad Problemen

Opmerking: dit is een voorbeeldfunctie die standaard is uitgeschakeld.

Om een ​​lijst met problemen te krijgen:

1. Schakel rapportage van contrastproblemen in op het tabblad Problemen :
   1. Open Instellingen > Experimenteel .
   2. Zoek in de filterbalk naar contrast issue .
   3. Vink Automatische rapportage van contrastproblemen inschakelen aan via het paneel Problemen .
   4. Klik op DevTools opnieuw laden in de prompt bovenaan.
2. Open het tabblad Problemen .

3. Vouw de contrastproblemen uit die DevTools heeft gevonden, vouw vervolgens de elemententabel uit en klik op een link naast het element.

   

4. Los het probleem op zoals beschreven in de sectie Tekst met laag contrast corrigeren .

Contrastproblemen in een Lighthouse-rapport

Een rapport uitvoeren:

1. Open in DevTools Meer tabbladen > Vuurtoren .
2. Genereer een Lighthouse-rapport met de volgende instellingen:
   • Modus : Navigatie (standaard)
   • Categorieën : Toegankelijkheid
   • Apparaat : bureaublad
3. Klik op Paginabelasting analyseren en wacht tot Lighthouse het rapport heeft gegenereerd.
4. Blader omlaag naar de sectie Contrast en klik in de elementenlijst op een link naar een beïnvloed element.
5. Los het probleem op zoals beschreven in de sectie Tekst met laag contrast corrigeren .

Tekst met laag contrast corrigeren

Een probleem met laag contrast oplossen:

1. Zoek een contrastprobleem en klik op een link naar een betrokken element in het CSS- overzichtpaneel , het tabblad Problemen of het Lighthouse- rapport . DevTools brengt u naar het paneel Elementen en selecteert het overeenkomstige element. Op deze demopagina is het eerste getroffen element bijvoorbeeld h1.line1 .

2. Klik Inspecteer in de rechterbovenhoek van DevTools en plaats de muisaanwijzer op het element in de viewport. DevTools toont een tooltip voor dit element.

   

   Let op de waarschuwingsbord naast de waarde van de contrastverhouding in de tooltip. De contrastverhouding meet het verschil in helderheid tussen de voorgrond- (tekstkleur) en achtergrondkleuren.

3. Open de Kleurkiezer naast de kleurdeclaratie van de tekst van het element en vouw in de Kleurkiezer het gedeelte Contrastverhouding uit.

   

   De Kleurkiezer geeft aan dat de contrastverhouding niet voldoet aan de AA- of AAA-niveaus van de WebAIM-richtlijnen .

4. Klik op de Gebruik de voorgestelde kleurknop naast het AAA-niveau. De Kleurkiezer past de tekstkleur toe die voldoet aan de richtlijnen voor contrastverhoudingen.

   

5. Als alternatief kunt u, om handmatig een kleur te kiezen, de cirkel in het tintenvoorbeeld verslepen. Om binnen het AA- of AAA-niveau te blijven, kiest u respectievelijk een kleur onder de bovenste of onderste regel.

   

6. Op dezelfde manier kunt u alle contrastproblemen oplossen die u hebt gevonden met het CSS-overzichtspaneel , het tabblad Problemen of het Lighthouse- rapport .

Sla de wijzigingen op

De wijzigingen opslaan die u in DevTools hebt aangebracht:

• Kopieer alle CSS-wijzigingen in één keer en plak ze in uw code
• Overweeg een werkruimte in te stellen waarmee DevTools bestanden rechtstreeks naar uw bronnen kan opslaan.

Wat is het volgende?

Kom meer te weten:

• Leer Toegankelijkheid in het algemeen
• Vooral kleur- en contrasttoegankelijkheid