Sprawdzanie kontrastu kolorów (WCAG 2.2 AA i AAA)
Sprawdzanie kontrastu
Format hex, na przykład #2f47d9 lub #fff.
Zwykły tekst: dodaj produkt do koszyka i zapłać w trzech krokach.
Duży tekst: 129 €
Obramowanie i ikona przycisku
Współczynnik kontrastu
4.54 : 1
| Wymaganie | Minimum | Wynik |
|---|---|---|
| Zwykły tekst, poziom AAWCAG 1.4.3 | 4.5 : 1 | — |
| Duży tekst, poziom AAWCAG 1.4.3 | 3 : 1 | — |
| Zwykły tekst, poziom AAAWCAG 1.4.6 | 7 : 1 | — |
| Duży tekst, poziom AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Ikony, obramowania pól i inne elementy interfejsuWCAG 1.4.11 | 3 : 1 | — |
Duży tekst to co najmniej 24 px lub 18.66 px pogrubione. Sprawdzenie działa w Twojej przeglądarce; kolory nie są nigdzie wysyłane.
Podaj kolor tekstu i kolor tła: narzędzie pokaże współczynnik kontrastu obliczony wzorem WCAG 2.x, czy para spełnia poziom AA i AAA dla zwykłego i dużego tekstu oraz dla elementów interfejsu, a także najbliższy kolor tekstu, który osiąga 4,5:1.
Co oznaczają wyniki
| Wymaganie | Minimum | Kryterium WCAG |
|---|---|---|
| Zwykły tekst, poziom AA | 4,5 : 1 | 1.4.3 Kontrast (minimum) |
| Duży tekst, poziom AA | 3 : 1 | 1.4.3 Kontrast (minimum) |
| Zwykły tekst, poziom AAA | 7 : 1 | 1.4.6 Kontrast (wzmocniony) |
| Duży tekst, poziom AAA | 4,5 : 1 | 1.4.6 Kontrast (wzmocniony) |
| Ikony, obramowania, elementy interfejsu | 3 : 1 | 1.4.11 Kontrast elementów nietekstowych |
Poziom AA to poziom, na którym opierają się EN 301 549, Europejski akt o dostępności, niemiecka ustawa BFSG i praktyka w USA na gruncie ADA. AAA jest bardziej rygorystyczny i te przepisy go nie wymagają.
Dlaczego kontrast ma znaczenie w sklepie internetowym
Szare ceny na białym tle, biały tekst na bladym banerze, jasne podpowiedzi w formularzu zamówienia: osoby słabowidzące, starsi klienci i każdy, kto korzysta z telefonu w słońcu, czytają je wolno albo wcale. Niski kontrast to najczęstszy problem, jaki automatyczna kontrola znajduje na stronach sklepów. Poprawiaj go w ustawieniach kolorów motywu albo w jego zmiennych CSS, a nie element po elemencie.
Jak liczy się współczynnik
Współczynnik porównuje względną luminancję jaśniejszego i ciemniejszego koloru: (L1 + 0.05) / (L2 + 0.05). Przyjmuje wartości od 1:1 (ten sam kolor) do 21:1 (czarny na białym). Przezroczystość, cienie i obrazy w tle zmieniają rzeczywisty kontrast; tekst na obrazie sprawdzaj z najciemniejszą i najjaśniejszą częścią obrazu pod nim.
Sprawdź całą stronę
To narzędzie testuje jedną parę kolorów. Pandus znajduje na stronie każdy tekst o niskim kontraście — z kolorami, współczynnikiem i zrzutem ekranu — i co tydzień sprawdza każdą podstronę Twojego serwisu. Zobacz też regułę niski kontrast tekstu.