# Elementy muszą mieć wystarczający kontrast kolorów

<https://www.fixreports.com/pl/issues/color-contrast>

WCAG 1.4.3 Kontrast (minimum) · poziom AA

Część tekstu nie odróżnia się wystarczająco od tła, by mogły go odczytać osoby słabowidzące.

## 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
1. 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.
2. 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).
3. Zwróć szczególną uwagę na plakietki promocji, tekst zastępczy (placeholder), linki w stopce i przyciski na obrazach.

### W Shopify
1. 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.
2. 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.
3. Zwróć szczególną uwagę na plakietki promocji, tekst zastępczy (placeholder), linki w stopce i przyciski na obrazach.

### W WooCommerce i WordPressie
1. 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.
2. 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).
3. 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.

## Źródła
- Dokumentacja reguły axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Objaśnienie kryterium WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum