WCAG-kleurcontrastgids
Begrijp de contrastvereisten van AA en AAA, hoe u tekst- en UI-componenten kunt testen en hoe u falende paren kunt repareren.
FAQ
- Welke verhouding heb ik nodig voor knoppen?
- UI-componenten en grafische objecten hebben over het algemeen minimaal 3:1 nodig ten opzichte van aangrenzende kleuren. Tekst in knoppen heeft nog steeds een formaat van 4,5:1 (AA) of 3:1 voor grote tekst nodig.
WCAG-basisprincipes van contrast
WCAG 2.x definieert minimale contrastverhoudingen tussen tekst- en achtergrondkleuren. Niveau AA is het gemeenschappelijke juridische en productdoel; AAA is strenger en wordt indien mogelijk aanbevolen voor hoofdtekst.
Contrast is gebaseerd op relatieve helderheid, niet op tint. Twee kleuren kunnen er verschillend uitzien, maar kunnen geen contrast opleveren als hun lichtheid te veel op elkaar lijkt.
Werkstroom testen
Kies voor- en achtergrondkleuren uit uw ontwerpsysteem. Voer ze door een contrastcontrole. Houd rekening met normale versus grote tekstdrempels.
Test de hover-, focus- en uitgeschakelde statussen, niet alleen de standaardknoppen en links.