Toegankelijkheid: Tekst en afbeeldingen voorbereiden
8 min
In dit artikel
- Onze aanbevelingen
- Kleurcodes zoeken
- Kleurcontrast aanpassen
- Kleurcontrast handmatig bekijken
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 behoeften qua zicht, 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.
- Houd een contrastverhouding van minimaal 3:1 voor grafische elementen en componenten van de gebruikersinterface (zoals formulierinvoerranden, tijdelijke aanduidingen, enz.) aan.
- 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.
Bij de meeste elementen kun je wijzigingen aanbrengen binnen de wizard zelf. Sommige elementen (bijvoorbeeld: app-elementen) zijn momenteel niet volledig geïntegreerd met de wizard en moeten handmatig worden beoordeeld of aangepast.
Wix Editor
Studio Editor
- Ga naar je editor.
- Klik bovenaan de editor op Instellingen.
- Selecteer Toegankelijkheidswizard.
- Selecteer Website scannen.
- Klik op het Gedetecteerde problemen-tabblad.
- Selecteer een pagina uit de lijst.
- Klik op Kleurcontrast verbeteren.
- Selecteer het relevante element en pas het indien nodig aan:
Pas het contrast aan in de wizard
Pas het contrast handmatig aan
.
Kleurcontrast handmatig bekijken
Er kan een kleurcontrast op de website aanwezig zijn dat de Toegankelijkheidswizard niet identificeert. We raden aan de inhoud van de website handmatig te bekijken met de Wix-contrastcontrole en het contrast indien nodig aan te passen.
Je kunt de contrastcontrole installeren en gebruiken vanuit je websitebouwer (Wix Editor of Studio Editor). Als de elementen niet aan de vereisten voldoen, kun je ook nieuwe verhoudingen testen met de kiezer.
Wix Editor
Studio Editor
Om het contrast te controleren:
- (Alleen de eerste keer) Installeer de add-on in je editor.
- Klik op Tools
rechtsboven in je editor. - Klik op Editor add-ons.
- Klik op Contrast Checker.
- Gebruik de kleurvakken om de kleur van het element en de achtergrond in het dambord te selecteren of plak de relevante kleurcodes in de app.
Om het contrast aan te passen:
- Pas de voorgrond- en achtergrondkleuren in de contrastcontrole aan de aanbevolen verhouding aan.
- Kopieer de kleurencodes van de kleuren rechtsonder in de kiezer.
- Klik op het betreffende element in je editor.
- Open de kleurenkiezer vanuit de ontwerpinstellingen van het element.
- Klik naast Mijn kleuren op Toevoegen.
- Plak de gekopieerde code in het veld.
Tip:
Hoe je de ontwerpinstellingen opent, hangt af van het element, maar je kunt ze meestal vinden door het element te selecteren en dan op het Ontwerp-pictogram 
te klikken.
te klikken.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 je website op het gebied van toegankelijkheid.