Contrast tekstkleur bijwerken

Iedereen moet je tekst kunnen lezen

Het is belangrijk dat de tekst zichtbaar en leesbaar is. Als je wilt dat je bezoekers je tekst begrijpen, moeten ze die wel kunnen lezen.

Een goed tekstcontrast zorgt ervoor dat iedereen de tekst kan zien tegen de achtergrond.

Niet iedereen ziet kleur op dezelfde manier. WCAG heeft specifieke contrastvereisten gedefinieerd in de WCAG 2.1 AA-richtlijnen om er zeker van te zijn dat de tekst leesbaar is voor iedereen. Volg deze vereisten en onze aanbevolen werkwijzen voor contrast om problemen met het contrast op te lossen of te voorkomen.

Ally volgt de contrastvereisten om te verifiëren dat er voldoende contrast is tussen de tekstkleur en de achtergrondkleur. Slecht tekstcontrast is een groot probleem. Grote problemen belemmeren de toegankelijkheid en hoewel ze niet ernstig zijn, vereisen ze wel aandacht.

Gebruik Ally om tekst met een slecht contrast te vinden

Gebruik het toegankelijkheidsrapport van Ally om toegankelijkheidsproblemen op je site te ontdekken en op te lossen. Gebruik de koppeling die voor het rapport is opgegeven en meld je aan. Open het rapport en bekijk de lijst met problemen in de tabel Toegankelijkheidsproblemen.

De tabel Toegankelijkheidsproblemen bevindt zich op de tabbladen Overzicht en Domein. Start op het tabblad Domein om problemen van een specifiek domein te bekijken. 

Het is een groot probleem om tekst met een slecht contrast te hebben. Gebruik het tabblad Groot probleem in de tabel Toegankelijkheidsproblemen om de lijst van grote problemen weer te geven. Selecteer de problemen met contrastproblemen.

Als je begint op het tabblad Overzicht selecteer je het probleem en vervolgens het domein met het probleem.

Contrastproblemen kunnen beginnen met Document of HTML in de lijst.

Uit de lijst met contrastproblemen in het domein selecteer je de score-indicator naast een item met het probleem. Het feedbackvenster van de inhoudseditor wordt geopend.

Een voorbeeld van de tekst met een slecht contrast weergeven

Het feedbackvenster van Ally geeft je een voorbeeld van de inhoud, gedetailleerde feedback en ondersteuning om je toegankelijkheidsproblemen op te lossen. Gebruik het voorbeeld om de tekst met slecht contrast weer te geven.

In het voorbeeld worden markeringen weergegeven waar specifieke toegankelijkheidsproblemen in het document te vinden zijn. De markeringen geven één probleemtype per melding weer. Bijvoorbeeld: als je tekst slecht contrast heeft, geven de markeringen steeds aan waar dit specifieke probleem voorkomt.

Voorbeeldtools

Gebruik de voorbeeldtools om de problemen in je document te bekijken.

• Navigeer per pagina door het voorbeeld.
• Bekijk hoe vaak een specifiek probleem voorkomt.
• Navigeer tussen de probleemmarkeringen.
• Geef de markeringen weer of verberg ze.
• Zoom de voorbeeldinhoud in of uit.
• Als het probleem zich in een bijgevoegd document voordoet, download dan het oorspronkelijke bestand.

Volg de stappen van Ally om slecht contrast op te lossen.

Ally gaat ervan uit dat je basiskennis hebt van HTML en van het gebruik van het Content Management System (CMS). Als je de stappen wilt volgen, moet je weten hoe je een webpagina in de HTML of broncode in je CMS kunt bewerken.

Ally gaat er ook vanuit dat je gemachtigd bent om de kleur van de website bij te werken. De kleur wordt vaak gedefinieerd in de stijlgids van een site en kan een afspiegeling zijn van de huisstijl. Raadpleeg de stijlgids van je site voordat je wijzigingen doorvoert. 

Naast het voorbeeld biedt Ally tevens stapsgewijze instructies over hoe je het probleem kunt oplossen. Ally organiseert deze feedback in een beslisboom.Je hoeft alleen maar de instructies te volgen en te reageren op de vragen. Lees meer over het probleem, waarom het van belang is, en hoe je het kunt verhelpen.

Selecteer Problemen met contrast oplossen om de stappen te volgen.

Manieren om contrastproblemen op te lossen

Als tekst slecht contrast heeft, betekent dit dat er niet voldoende kleurcontrast is tussen de tekst en de achtergrond.

In de stappen van Ally wordt uitgelegd hoe je de kleur van de tekst kunt wijzigen. Je kunt ook de achtergrondkleur wijzigen. 

Voordat je wijzigingen aanbrengt, raadpleeg je de stijlgids van je site. Kleur is vaak gerelateerd aan branding en moet met voorzichtigheid worden gewijzigd.

In de stappen van Ally wordt ook uitgelegd hoe je de updates kunt maken in de bron-HTML-code van afzonderlijke webpagina's. CMS’en kunnen variëren. Sommige CMS’en hebben een Rich Text Editor (RTE) die gebruikersvriendelijke manieren kan bieden voor het opmaken van tekst. Met RTE’s kun je de vooraf ingestelde stijl kiezen voor koppen, kleuren, lettertypen, afbeeldingen, enzovoort. Niet elke CMS biedt echter een RTE en vereist wijzigingen in de broncode met HTML. Soms zijn zowel HTML als RTE beschikbaar.

Voor terugkerende contrastproblemen kun je beter de sjabloon bijwerken. Voor sjabloonupdates is een bepaalde kennis van HTML en CSS nodig en de updates kunnen afhankelijk zijn van de huisstijl van je site. 

Ga naar w3schools voor meer informatie over HTML en CSS

Kleur HEX of RGB

HEX en RGB zijn verschillende manieren om kleuren te definiëren.

• RGB bepaalt de kleur aan de hand van de hoeveelheid rood (R), groen (G) en blauw (B) die wordt gebruikt. Een tint rood kan bijvoorbeeld worden gedefinieerd als RGB (253, 2, 2).
• HEX is een hexadecimale notatie waarin een kleur wordt gedefinieerd door de waarden van rood, groen en blauw in een combinatie van zes letters en cijfers. Hexadecimaal begint met het getal of het symbool hashtag (#). Zo wordt dezelfde tint rood bijvoorbeeld gedefinieerd als #fd0202.

Hexadecimaal is de meest gebruikelijke manier om kleuren op webpagina's te definiëren.

Aanbevolen werkwijzen voor tekstcontrast

Er zijn verschillende eenvoudige manieren om tekst leesbaarder te maken.

• Gebruik lettertypen met brede tekens.
• Gebruik een tekengrootte van ten minste 12px. Als je een lettertype met smalle tekens gebruikt, zet de grootte dan op minimaal 16px.
• Gebruik 'smalle' lettertypen alleen op donkere achtergronden.
• Gebruik lichte tekst op donkere achtergronden.
• Gebruik donkere tekst op lichte achtergronden.
• Vermijd de volgende kleurcombinaties:
  • Groen en rood
  • Groen en bruin
  • Blauw en paars
  • Groen en blauw
  • Lichtgroen en geel
  • Blauw en grijs
  • Groen en grijs
  • Groen en zwart

Twijfel je of je tekst genoeg contrast heeft?Gebruik de Colour Contrast Analyser van de Paciello Group om je inhoud te controleren.

Waarom is tekstcontrast belangrijk?

Tekst met weinig contrast kan in veel situaties moeilijk te lezen zijn.

• Geprojecteerd in de klas
• Voor studenten met kleurblindheid
• Op een mobiel apparaat met helder licht of schittering op het scherm
• Op beeldschermen van lage kwaliteit

Een laag contrast kan leiden tot vermoeidheid van de ogen, inhoud moeilijk te onderscheiden en scannen maken en frustraties veroorzaken.

Een goed contrast betekent dat iedereen de tekst goed kan zien. Dit verbetert de algehele gebruikservaring.