Co sprawdza ta reguła
Kontrast między kolorami pierwszego planu i tła spełnia progi kontrastu WCAG 2 AA.
Dlaczego to ważne
WCAG 1.4.3 wymaga współczynnika kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Blade ceny, plakietki i banery są trudne do odczytania dla osób słabowidzących, a w jasnym świetle dla wszystkich.
Jak to naprawić
Na dowolnej stronie
- Znajdź tekst o niskim kontraście i zanotuj kolor tekstu oraz tła: pokaże je narzędzie do badania kontrastu lub narzędzia deweloperskie przeglądarki.
- Zmień kolor tekstu lub tła w CSS motywu, aż współczynnik wyniesie co najmniej 4.5:1 (3:1 dla tekstu o rozmiarze 24px i większym albo pogrubionego tekstu o rozmiarze 18,66px).
- Zwróć szczególną uwagę na plakietki promocji, tekst zastępczy (placeholder), linki w stopce i przyciski na obrazach.
W Shopify
- Znajdź tekst o niskim kontraście i zanotuj kolor tekstu oraz tła: pokaże je narzędzie do badania kontrastu lub narzędzia deweloperskie przeglądarki.
- W sekcji Sklep online > Motywy > Dostosuj > Ustawienia motywu > Kolory przyciemnij kolor tekstu lub rozjaśnij tło w danym schemacie kolorów, aż współczynnik wyniesie co najmniej 4.5:1.
- Zwróć szczególną uwagę na plakietki promocji, tekst zastępczy (placeholder), linki w stopce i przyciski na obrazach.
Jak sprawdzić poprawkę
- Uruchom skan ponownie i potwierdź, że reguła color-contrast już się nie pojawia.
- Sprawdź wyrywkowo dokładne kolory w narzędziu do badania kontrastu.
Jak FixReports to wykrywa
Nasz skan uruchamia regułę axe-core color-contrast w prawdziwej przeglądarce Chrome na każdej testowanej stronie i zgłasza każdy błędny element wraz z podstroną, jego kodem HTML i, tam gdzie ma to zastosowanie, zrzutem ekranu.
Test automatyczny potwierdza, że ten konkretny problem występuje. Nie rozstrzyga, czy reszta strony jest dostępna: niektóre bariery wychodzą na jaw dopiero wtedy, gdy stronę sprawdzi człowiek.