Operationeel
Kleurcontrastcontrole
Advertentie
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Voer hieronder uw kleurencombinaties in om ze te testen met onze kleurcontrastcontrole en zie direct of ze voldoen aan de toegankelijkheidsnormen.
Hoe onze kleurcontrastcontrole werkt
Voer uw voorgrond- enachtergrond-kleuren in met behulp van RGB-hexadecimale waarden, of kies ze rechtstreeks met de Kleurkiezer.
- Pas Alfa aan om te wijzigen hoe transparant de voorgrondkleur is.
- Gebruik de schuifregelaar Lichtheid om de kleur er lichter of donkerder uit te laten zien.
Onze tool berekent vervolgens de contrastverhouding en vergelijkt deze met de WCAG-richtlijnen:
- WCAG 2.0 niveau AA
- Minimaal 4,5:1 voor normale hoofdtekst
- Minimaal 3:1 voor grote tekst
- WCAG 2.1 (UI en afbeeldingen)
- Minimaal 3:1 voor pictogrammen, randen en andere interfacecomponenten
- WCAG-niveau AAA
- Minimaal 7:1 voor normale tekst
- Minimaal 4,5:1 voor grote tekst
Grote tekst betekent:
- 14 pt (ongeveer 18,66 px) en vetgedrukt, of
- 18 pt (ongeveer px) of groter
U kunt de pipet in de Kleurkiezer gebruiken om de exacte kleuren uit alles op uw scherm te halen.
Voor links die uitsluitend afhankelijk zijn van kleur om op te vallen, gebruikt u onze kleurcontrastcontrole om er zeker van te zijn dat ze voldoen aan de toegankelijkheidsnormen en voor iedereen gemakkelijk leesbaar blijven.