Kalkulator kontrastu kolorów
Sprawdź dostępność pary kolorów
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
WCAG wymaga kontrastu 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Poziom AAA to odpowiednio 7:1 i 4,5:1. Jeśli wynik nie zalicza, rozważ zmianę koloru tekstu na czarny lub biały — kalkulator podaje, który daje lepszy kontrast.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćKalkulator kontrastu kolorów
Kontrast to jeden z najważniejszych aspektów dostępności. Odpowiedni stosunek jasności tekstu i tła decyduje o tym, czy treść będzie czytelna dla wszystkich.
Wymagania WCAG 2.1
| Poziom | Zwykły tekst | Duży tekst |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Duży tekst to co najmniej 24 px lub 18,66 px pogrubiony.
Jak liczymy?
Kontrast wyznacza się ze względnej luminancji kolorów: (L1 + 0,05) ÷ (L2 + 0,05), gdzie L1 to jaśniejszy, a L2 ciemniejszy kolor.
Przykład
Szary #777777 na białym tle ma kontrast około 4,48:1 — ledwo poniżej progu AA dla zwykłego tekstu. Ciemniejszy #595959 daje już ponad 7:1 i spełnia AAA.
Najczęstsze pytania
Czy wystarczy zmienić sam kolor tekstu?
Często tak — wystarczy zmienić odcień na ciemniejszy lub jaśniejszy. Kalkulator podpowiada, czy lepszy będzie czarny, czy biały tekst.
Czy kontrast dotyczy tylko tekstu?
Nie — wymagania dotyczą też ikon, obramowań i elementów interfejsu (minimum 3:1 dla elementów niebędących tekstem).
Po co dbać o kontrast?
Poprawia czytelność dla wszystkich, a dla osób słabowidzących jest warunkiem korzystania z serwisu. To też wymóg prawny dla stron publicznych.