Maak uw website beter leesbaar

Sofia Emelianova
Sofia Emelianova
GitHub

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 opsporen en betere kleuren voorstellen om u te helpen deze op te lossen.

Gebruik DevTools om:

  • Ontdek contrastproblemen . Gebruik het CSS-overzichtspaneel , het tabblad Problemen (voorvertoning) of een Lighthouse- rapport om een ​​lijst met alle problemen te bekijken.
  • Los contrastproblemen op . Bekijk de problemen met een tooltip in de inspectiemodus en selecteer de kleuren die de kleurenkiezer suggereert om de contrastverhouding te corrigeren.
  • Boots visuele beperkingen na . Bekijk je website vanuit het perspectief van je gebruikers.

Ontdek tekst met een laag contrast

Om tekst met een laag contrast te ontdekken:

  1. Open de ontwikkelaarstools op je pagina.

  2. Geef alle contrastproblemen weer met behulp van een van de drie panelen:

Je kunt experimenteren door onze CodePen te openen.

Contrastproblemen in het CSS-overzichtpaneel

Om een ​​overzicht te krijgen:

  1. Open het CSS-overzicht .
  2. Leg een overzicht vast .
  3. Open het gedeelte Kleuren , ga naar Contrastproblemen en klik op een probleem, indien aanwezig.

  4. In de tabel 'Contrastproblemen ' kunt u met de muis over een element bewegen en op de link ernaast klikken.

    Lijst met contrastproblemen in het CSS-overzicht.

  5. Los het probleem op zoals beschreven in het gedeelte 'Tekst met laag contrast corrigeren' .

(Voorbeeldweergave) Vergelijk de problemen in het tabblad Problemen

Om een ​​lijst met problemen te krijgen:

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

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

    Tabel met elementen met contrastproblemen in het tabblad Problemen.

  4. Los het probleem op zoals beschreven in het gedeelte 'Tekst met laag contrast corrigeren' .

Vergelijk de problemen in een Lighthouse-rapport

Om een ​​rapport uit te voeren:

  1. Open in DevTools Meer tabbladen > Lighthouse .

  2. Genereer een Lighthouse-rapport met de volgende instellingen:

    • Modus : Navigatie (standaard)
    • Categorieën : Toegankelijkheid
    • Apparaat : Desktop

    Lighthouse-rapport met navigatie-, toegankelijkheids- en bureaubladinstellingen.

  3. Klik op 'Pagina laden analyseren' en wacht tot Lighthouse het rapport genereert.

  4. Ga naar het gedeelte 'Contrast' . Klik in de lijst met elementen op een link naar een element waarop het contrast betrekking heeft.

    Het onderdeel 'Contrast' van het Lighthouse-rapport bevat een lijst met elementen die contrastproblemen vertonen.

  5. Los het probleem op zoals beschreven in het gedeelte 'Tekst met laag contrast corrigeren' .

Corrigeer tekst met laag contrast

Om een ​​probleem met laag contrast op te lossen:

  1. Zoek een contrastprobleem en klik op een link naar het betreffende element in het CSS-overzichtspaneel , op het tabblad Problemen of in het Lighthouse -rapport . DevTools brengt je naar het paneel Elementen en selecteert het bijbehorende element.

    Een element met een contrastprobleem is geselecteerd in het paneel Elementen.

    Op onze ontoegankelijke demo CodePen is bijvoorbeeld het eerste getroffen element h1.line1 .

  2. Klik Inspecteer het element in de rechterbovenhoek van de ontwikkelaarstools door met de muis over het element in het weergavegebied te bewegen. De ontwikkelaarstools tonen dan een tooltip voor dit element.

    De tooltip toont een waarschuwingssymbool naast de contrastwaarde.

    Merk op dat Waarschuwingspictogram naast de contrastverhoudingswaarde in de tooltip. De contrastverhouding meet het verschil in helderheid tussen de voorgrondkleur (tekstkleur) en de achtergrondkleur.

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

    Het gedeelte 'Contrastverhouding' van de kleurenkiezer.

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

  4. Klik op Gebruik de knop 'Voorgestelde kleur' ​​naast het AAA-niveau. De kleurenkiezer past de tekstkleur toe die voldoet aan de richtlijnen voor de contrastverhouding.

    De aangebrachte kleur voldoet aan de richtlijnen.

  5. Als alternatief kunt u handmatig een kleur kiezen door de cirkel in de voorbeeldweergave van de tinten te verslepen. Om binnen het AA- of AAA-niveau te blijven, kiest u een kleur onder respectievelijk de boven- of onderlijn.

    Een kleurtint kiezen die onder de onderste streep ligt om in de AAA-categorie te blijven.

  6. Los op dezelfde manier alle contrastproblemen op die je hebt gevonden met behulp van het CSS-overzichtspaneel , het tabblad Problemen of het Lighthouse- rapport .

Sla de wijzigingen op.

Om de wijzigingen die je in DevTools hebt aangebracht op te slaan:

Wat volgt?

Meer informatie: