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 WCAG 2.0 1.4.3 AA moet de visuele presentatie van tekst een contrastverhouding van minstens 4,5:1 hebben voor reguliere tekst en 3:1 voor grote tekst. Grote tekst wordt gedefinieerd als minstens 18 pt of 14 pt 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 Color Palette Contrast Checker.
- 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 doen zich voor wanneer de tekstkleur en achtergrondkleur te veel op elkaar lijken qua helderheid. Om het probleem op te lossen, gebruik Deque's Color Contrast Analyzer om kleuren te vinden die voldoen aan het vereiste minimum op basis van de tekstgrootte. Pas 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 als prioriteit worden aangepakt. 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 regels negeren.
Veelgestelde Vragen
Zijn er bekende beperkingen met deze regel?\
Ja.
- Deze regel kan onnauwkeurige resultaten opleveren wanneer tekst op een achtergrond met veel kleuren staat, zoals een verloop, afbeelding of semi-transparante achtergrond. Als u denkt dat een bevinding onjuist is, gebruik de Deque Color Contrast Analyzer om de verhouding tussen de tekst- en achtergrondkleuren te bevestigen.
- De Kleurcontrastregel gebruikt het Vision-framework van Apple (Optical Character Recognition, of OCR) om tekst binnen de grenzen van een element te lezen. OCR kan af en toe kleine, pictogramachtige symbolen, zoals terugpijl-chevron (<), opsommingstekens en decoratieve symbolen als tekst misidentificeren. Wanneer dat gebeurt, voert de Kleurcontrastregel een controle uit op een element dat geen leesbare tekst bevat, waardoor er een resultaat voor een knop met alleen een pictogram kan verschijnen. Omdat OCR-uitvoer niet deterministisch is over scans heen, kan hetzelfde element in de ene scan in de Kleurcontrastresultaten verschijnen en in de volgende als "NIET TOEPASSELIJK" worden gemeld. Dit is een bekende eigenschap van OCR, geen bug in de regel. Om dit probleem te omzeilen, kunt u de
ignoreAPI's gebruiken om Kleurcontrastresultaten voor de getroffen elementen te onderdrukken. Leer meer over regels negeren.
Middelen
Deque University Cursus Pagina's
Opmerking: Volledige toegang tot de bronnen van Deque University vereist een abonnement.