WCAG 1.4.11 Använd tillräckliga kontraster i komponenter och grafik

Det som behövs för att se och använda en kontroll ska ha minst kontrasten 3:1 mot färgerna intill. Det gäller kanter på fält, ikoner som är knappar, markeringen som visar att något är valt och fokusmarkeringen. Kravet gäller också grafik som behövs för att förstå innehållet, till exempel ikoner för lagerstatus. Inaktiverade kontroller, logotyper och foton omfattas inte.

• Fälten i kassan har en ljusgrå kant på vit bakgrund, så att det är svårt att se var man ska skriva.
• Kryssrutor och radioknappar för villkor och fraktsätt som knappt syns.
• Vald storlek eller färg markeras bara med en tunn, ljus ram som inte når 3:1.
• Ikonknappar för varukorg, sök och favoriter i en ljus färg mot en ljus bakgrund.
• Pilar och punkter i produktgalleriet i vitt ovanpå ljusa produktbilder.
• Fokusmarkeringen är en blek skugga som inte syns mot bakgrunden.

Ge kanter, ikoner och markeringar en färg med minst 3:1 mot bakgrunden. Visa valt läge med något mer än en ljus ram, till exempel en tjockare mörk ram eller en bock.

/* #dddddd mot vitt ger 1,4:1 */
input { border: 1px solid #dddddd; }

/* #767676 mot vitt ger 4,5:1 */
input { border: 1px solid #767676; }

.storlek[aria-pressed="true"] {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

Kontrollera själv

Ingen av de automatiska kontrollerna mäter kontrasten på kanter, ikoner och grafik, eftersom det kräver att man vet vilka färger som ligger intill varandra. Mät färgparen själv i kontrastkontrollen. Månadsgranskningen hittar däremot element där fokusmarkeringen inte syns alls.

Kontrastkontroll enligt WCAG 2.1

• Understanding 1.4.11 Non-text Contrast hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 1.4.11 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.