Kleurcontrast
Zorg ervoor dat tekst leesbaar is voor alle gebruikers
Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!
Wat We Controleren
Zorg ervoor dat het kleurcontrast tussen de tekst en de achtergrond voldoet aan de WCAG 2 AA minimumverhouding drempelwaarden.
Volgens WCAG 2.0 1.4.3 AA, moet de visuele presentatie van tekst een contrastverhouding hebben van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Grote tekst wordt gedefinieerd als minimaal 18pt of 14pt vet.
Foutief Voorbeeld ❌
Contrastverhouding ligt onder de 4,5:1 minimum voor normale tekst en 3:1 voor grote tekst
Tekst is moeilijk te onderscheiden van de achtergrond
Gebruikers met een laag gezichtsvermogen kunnen deze tekst mogelijk niet lezen
Correct Voorbeeld ✅
Contrastverhouding voldoet aan of overschrijdt de 4,5:1 minimum voor normale tekst
Tekst is duidelijk te onderscheiden van de achtergrond
Gebruikers met een laag gezichtsvermogen kunnen deze tekst zonder moeite lezen
In Één Oogopslag
- Deze regel heeft een serieuze impact voor gebruikers
- Normale 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 textelementen en tekst binnen interactieve elementen
- Deze regel gebruikt AI om contrastproblemen te detecteren - resultaten kunnen handmatige verificatie vereisen bij 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 in helderheid, wordt de tekst moeilijk of onmogelijk leesbaar.
Dit beïnvloedt iedereen in weinig lichtomstandigheden, buiten in zonlicht, of met een ouder scherm — maar het is vooral een probleem voor gebruikers met een laag gezichtsvermogen. Wat lijkt op een leesbaar label voor de ene gebruiker, kan voor een andere bijna onzichtbare waas zijn.
Kleurcontrastprobleem Bevestigen
- Doe een van de volgende:
- Open uw app in een emulator, OF
- Maak een screenshot van de app op uw fysieke apparaat. Stuur de screenshot naar uzelf en open het op uw computer.
- Gebruik een kleurtangen om:
- De meest nauwkeurige kleur van het textelement te verkrijgen.
- De meest nauwkeurige kleur van elke afzonderlijke achtergrondkleur achter de tekst te verkrijgen.
- Voer elke kleur in de Deque Kleurpalet Contrastcheckerin.
- U vindt een van de volgende:
- Toegankelijk: De kleurcontrastverhouding voldoet aan de vereiste minimum voor zijn tekstgrootte.
- Ontoegankelijk: De kleurcontrastverhouding voldoet niet aan de vereiste minimum voor zijn tekstgrootte.
Problemen Oplossen
Kleurcontrastproblemen doen zich voor wanneer de tekstkleur en achtergrondkleur te veel op elkaar lijken in helderheid. Om het probleem op te lossen, gebruik Deque's Kleurcontrast Analyzer om kleuren te vinden die voldoen aan de 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 tekst puur decoratief is en geen informatie overbrengt. Leer meer over negeren van regels.
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.
Bronnen
Deque University Cursuspagina's
Noot: Volledige toegang tot Deque University-bronnen vereist een abonnement.