Toegankelijkheid: Tekst en afbeeldingen voorbereiden
4 min
In dit artikel
- Onze aanbevelingen
- Kleurcodes zoeken
- Kleurcontrast aanpassen
Bezoekers met visuele aandoeningen of problemen kunnen het moeilijk vinden om het verschil te zien tussen de voorgrond 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.
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 elke websitebouwer die je gebruikt (Studio Editor of Wix Editor).
Wix Editor
Studio Editor
- Selecteer het relevante element (tekst, strookachtergrond, verzamelvak, enz.) en open de Kleurkiezer.
- Beweeg over een van de kleuren om de kleurcode te zien.
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 in je editor gebruiken om een laag kleurcontrast op een website te vinden en aan te passen, of je nu de Wix Editor of de Studio Editor gebruikt. De wizard scant je website op mogelijke toegankelijkheidsproblemen en markeert manieren om de toegankelijkheid van de website te verbeteren.
Wix Editor
Studio Editor
- Ga naar je editor.
- Klik bovenaan de editor op Instellingen.
- Selecteer Toegankelijkheidswizard.
- Selecteer Scan mijn website.
- Selecteer kaarten met de titel Kleurcontrast.
- Gebruik de schuifregelaar om de tekst- en achtergrondkleur aan te passen.
- Selecteer Wijzigingen toepassen.
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.