Kleurcontrast
Zorg ervoor dat tekst leesbaar is voor alle gebruikers
Leer hoe we kunstmatige intelligentie gebruiken voor deze regel!
Wat We Controleren
Zorg ervoor dat het kleurcontrast tussen tekst en de achtergrond voldoet aan de WCAG 2 AA minimale verhouding drempels.
Volgens de WCAG 2.0 1.4.3 AAmoet de visuele presentatie van tekst een contrastverhouding hebben van minimaal 4,5:1 voor gewone tekst en 3:1 voor grote tekst. Grote tekst wordt gedefinieerd als minimaal 18pt of 14pt vet.
Voorbeeld van een Fout ❌
Contrastverhouding ligt onder het minimum van 4,5:1 voor normale tekst en 3:1 voor grote tekst
Tekst is moeilijk te onderscheiden van de achtergrond
Gebruikers met een beperkt zicht kunnen deze tekst mogelijk niet lezen
Voorbeeld van een Succes ✅
Contrastverhouding bereikt of overschrijdt het minimum van 4,5:1 voor normale tekst
Tekst is duidelijk te onderscheiden van de achtergrond
Gebruikers met een beperkt zicht kunnen deze tekst zonder problemen lezen
In een Oogopslag
- Deze regel heeft een serieuze impact voor gebruikers
- Gewone tekst moet een contrastverhouding van minimaal 4,5:1 hebben tegen de achtergrond
- Grote tekst (minimaal 18pt of 14pt vet) moet een contrastverhouding van minimaal 3:1 hebben
- Deze regel controleert het kleurcontrast van statische tekstelementen en tekst binnen interactieve elementen
- Deze regel gebruikt AI om contrastproblemen te detecteren - resultaten kunnen handmatige verificatie vereisen op complexe achtergronden
Impact op Gebruikers
Het niveau van kleurcontrast beïnvloedt hoe gemakkelijk of moeilijk het is om tekst van de achtergrond te onderscheiden. Wanneer tekst- en achtergrondkleuren te veel op elkaar lijken qua helderheid, wordt de tekst moeilijk of onmogelijk te lezen.
Dit beïnvloedt iedereen in omstandigheden met weinig licht, buiten in zonlicht, of bij het gebruik van een ouder scherm — maar het is vooral een probleem voor gebruikers met een beperkt zicht. Wat voor de ene gebruiker als een leesbaar etiket lijkt, kan voor een andere bijna onzichtbaar wazig zijn.
Bevestig Kleurcontrastprobleem
- Voer een van de volgende handelingen uit:
- Open uw app in een simulator, OF
- Maak een screenshot van de app op uw fysieke apparaat. Stuur de screenshot naar uzelf en open deze op uw computer.
- Gebruik een kleurnenner om:
- De meest ware kleur van het tekstelement te verkrijgen.
- De meest ware kleur van elke onderscheidende achtergrondkleur achter de tekst te verkrijgen.
- Voer elke kleur in in de Deque Kleurpalet Contrastchecker.
- U zult een van de volgende bevindingen doen:
- Toegankelijk: De kleurcontrastverhouding **voldoet aan** het vereiste minimum voor de tekstgrootte.
- Niet Toegankelijk: De kleurcontrastverhouding **voldoet niet aan** het vereiste minimum voor de tekstgrootte.
Problemen Oplossen
Kleurcontrastproblemen treden op wanneer de tekstkleur en achtergrondkleur te veel op elkaar lijken qua helderheid. Om het probleem op te lossen, gebruik je Deque's Kleurcontrast Analyzer om kleuren te vinden die voldoen aan het vereiste minimum op basis van tekstgrootte. Pas ofwel de tekstkleur of de achtergrondkleur aan totdat de vereiste contrastverhouding is bereikt.
Kan ik deze Regel Negeren?
Kleurcontrast heeft een Serieuze impact voor gebruikers. Voldoende kleurcontrast is een WCAG AA-vereiste, dus dit moet een prioriteit zijn om op te lossen. In zeldzame gevallen kan het acceptabel zijn om deze regel te negeren — bijvoorbeeld als de tekst puur decoratief is en geen informatie overbrengt. Lees meer over regels negeren.
Veelgestelde Vragen
Zijn er bekende beperkingen met deze regel?
Ja. Deze regel kan onnauwkeurige resultaten opleveren wanneer tekst zich op een achtergrond met veel kleuren bevindt, zoals een verloop, afbeelding of semi-transparante achtergrond. Als u denkt dat een bevinding onjuist is, gebruik dan de Deque Color Contrast Checker om de verhouding tussen de tekst- en achtergrondkleuren te bevestigen.
Middelen
Deque University Cursus Pagina's
Opmerking: Volledige toegang tot de bronnen van Deque University vereist een abonnement.