Toegankelijkheid: Tekst en afbeeldingen voorbereiden

Leestijd 3 minuten
Bezoekers met visuele beperkingen vinden het misschien moeilijk om het verschil te zien tussen de voor- en achtergrond van de pagina's van een website. Daarom raden we aan het kleurcontrast op je website te controleren en indien nodig aan te passen.
In dit artikel lees je meer over:

Onze aanbevelingen

Om de toegankelijkheid te vergroten voor bezoekers met verschillende zichtbehoeften, raden we het volgende aan:
  • Verander het contrast van de tekstkleur en de achtergrondkleur in een verhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. 
  • Een contrastverhouding van minimaal 3:1 voor grafische elementen en componenten van de gebruikersinterface (zoals formulierinvoerranden, tijdelijke aanduidingen, enz.). 
  • Niveau AAA vereist een hogere contrastverhouding van minimaal 7:1 voor normale tekst en 4,5:1 voor grote tekst.
Goed om te weten:
Grote tekst wordt gedefinieerd als boven 14 punten (ongeveer 18 px) en vetgedrukt, of 18 punten (ongeveer 24 px).

Kleurcodes zoeken

Je kunt de kleurcodes vinden in de websitebouwer die je gebruikt (Studio Editor, Wix Editor, enzovoort).
Studio Editor
Wix Editor
ADI
  1. Selecteer het relevante element (tekst, strookachtergrond, verzamelvak, enzovoort).
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik op het Ontwerp-tabblad.
  4. Klik op het kleurvak om de kleurenkiezer te openen.
  5. Wijs de kleur aan om de code te zien.
De kleurenkiezer in de Studio Editor. De cursor wijst een kleur aan en de code is gemarkeerd in het paneel.
Kleurcontrasten testen:
Er zijn talloze websites en browser-plug-ins zoals Contrast Checker die het kleurcontrast testen door de voor- en achtergrondkleuren te vergelijken (met de kleurcodes). Voor het controleren van het kleurcontrast voor tekst op een achtergrondafbeelding, raden we aan om Colour Contrast Analyser te gebruiken. Hiermee kun je de achtergrondkleur kiezen en vervolgens testen.

Kleurcontrast aanpassen

Je kunt de Toegankelijkheidswizard gebruiken om een laag kleurcontrast op je pagina's te vinden en aan te passen. De wizard is een tool die je website scant op mogelijke toegankelijkheidsproblemen en waarmee je geavanceerde instellingen kunt inschakelen om de toegankelijkheid van je website te blijven verbeteren.
Je moet weten:
De wizard is alleen beschikbaar in de Wix Editor. Stem om de Toegankelijkheidswizard toe te voegen aan de Studio Editor

Om het contrast aan te passen:

  1. Selecteer Instellingen
  2. Selecteer Toegankelijkheidswizard.
  3. Selecteer Scan mijn website.
  4. Selecteer kaarten met de titel Kleurcontrast.
  5. Gebruik de schuifregelaar om de tekst- en achtergrondkleur aan te passen.
  6. Selecteer Wijzigingen toepassen.
Er is een kleurcontrast geopend in de Wizard. Het contrast is aangepast en de cursor wijst Wijzigingen toepassen aan.
Geef je grafieken of gegevens weer op je website?
Kleuren met hoog contrast zijn een goede manier om gegevens op je website weer te geven. We raden echter ook aan om andere indicatoren (zoals texturen en patronen) te gebruiken om onderscheid te maken tussen informatie. 
Volgende stap:
Ga terug naar de Toegankelijkheidschecklist om door te gaan met het verbeteren van de toegankelijkheid van je website.

Vond je dit artikel nuttig?

|