Niet-tekstueel contrast

Wat het vereist

De contrastregel van 1.4.3 geldt alleen voor tekst; 1.4.11 breidt een zwakkere variant (3:1 in plaats van 4,5:1) uit naar twee aanvullende categorieën. Ten eerste moeten visuele indicatoren van UI-componenten — wat aangeeft dat een knop een knop is, waar de focusring zich bevindt, waar de rand van een formulierveld ligt — 3:1 halen ten opzichte van het aangrenzende vlak. Ten tweede moeten de onderdelen van betekenisvolle afbeeldingen die de gebruiker moet kunnen herkennen — grafiekbalken, pictogrammen die een toestand aangeven, indicatorstipjes — 3:1 halen.

Hoe er aan te voldoen

• Geef elk formulierveld een zichtbare rand met minimaal 3:1 contrast ten opzichte van de paginaachtergrond.
• Styl focusindicatoren (:focus-visible-omtrek) met minimaal 3:1 contrast ten opzichte van zowel het component als de pagina.
• Voor doorzichtige / contour-knoppen moet de rand zelf 3:1 halen ten opzichte van de paginaachtergrond.
• Voor schakelknoppen moeten het aan/uit-spoor en de duimschuif 3:1 contrast hebben op het punt waar ze samenkomen.
• Voor pictogrammen met betekenis („informatie“ i, „waarschuwing“ driehoek, „vinkje“) moeten de pictogramlijnen 3:1 halen ten opzichte van hun achtergrond.
• Voor grafiekreeksen moeten de kleuren ter onderscheiding van balken of lijnen 3:1 van elkaar afwijken, of worden gecombineerd met een patroon of textuur.

Veelvoorkomende fouten

• Formuliervelden zonder zichtbare rand, of een rand van #e5e5e5 op #fff met 1,3:1 — onzichtbaar voor slechtziende gebruikers.
• Standaard focusomtrek van de browser overschreven door outline: none en nooit vervangen.
• Doorzichtige knoppen met witte tekst op een transparante achtergrond en een 1 px grijze rand — de knop is effectief onzichtbaar.
• Schakelknoppen met een nauwelijks zichtbare duimschuif op een bijna gelijkende baan in de „uit“-toestand.
• Statuspictogrammen in de hoek van een kaart (groen vinkje, rode x) waarbij de kleur nauwelijks contrasteert met de kaartachtergrond.
• Taartdiagram met schijfkleuren die 2:1 van elkaar liggen — ziende gebruikers zien de grenzen nog net; slechtziende gebruikers zien één vlek.

Waarom het ertoe doet

1.4.11 werd toegevoegd in versie 2.1 en treft teams regelmatig onverwacht — de meeste contrastcontroles betreffen alleen tekst. Formulierveldcontouren, focusringen en doorzichtige knoppen zijn de standaard faalpatronen. Tools zoals axe en Stark controleren nu ook niet-tekstueel contrast, maar ontwerpers slaan het bij het ontwerpen nog steeds over omdat het mentale model „contrast = tekstcontrast“ is. Het herstel betekent doorgaans het verdikken van randen en het donkerder maken van grijstinten in het ontwerpsysteem.