Sprawdzanie kontrastu kolorów
Wpisz kolor tekstu i kolor tła, aby poznać współczynnik kontrastu WCAG oraz wynik zaliczone lub niezaliczone dla AA i AAA, dla zwykłego i dużego tekstu, z podglądem na żywo.
Działa w przeglądarce; nic, co wpiszesz, nie opuszcza Twojego urządzenia
Współczynnik kontrastu –
| Zastosowanie | Wymaga | Wynik |
|---|---|---|
| Zwykły tekst, AA | 4.5:1 | |
| Zwykły tekst, AAA | 7:1 | |
| Duży tekst, AA | 3:1 | |
| Duży tekst, AAA | 4.5:1 |
Używa współczynnika kontrastu WCAG 2.x, który mierzy tylko kontrast luminancji. Nie oceni par kolorów trudnych przy zaburzeniach widzenia barw, takich jak czerwony na zielonym, cienkich ani małych czcionek, ani tekstu na zdjęciach i gradientach. Odczytuje HEX (3, 4, 6 lub 8 cyfr), rgb(), hsl() i nazwy kolorów CSS; inną składnię kolorów CSS odczytuje przeglądarka, o ile potrafi.
Jak sprawdzić kontrast kolorów
- Wpisz lub wklej kolor tekstu i kolor tła jako HEX,
rgb(),hsl()lub nazwę koloru CSS, na przykładnavy, albo wybierz każdy próbnikiem kolorów. - Odczytaj współczynnik kontrastu, od 1:1 dla braku kontrastu do 21:1 dla czerni na bieli.
- Sprawdź tabelę: zwykły tekst wymaga 4,5:1 dla AA i 7:1 dla AAA, a duży tekst wymaga 3:1 dla AA i 4,5:1 dla AAA. Podgląd pokazuje, jak wygląda tekst.
Co oznacza współczynnik kontrastu
Współczynnik kontrastu WCAG porównuje jasność dwóch kolorów. Każdy kolor jest zamieniany na luminancję względną od 0 (czerń) do 1 (biel), z użyciem wartości sRGB z usuniętą krzywą gamma i trzech kanałów ważonych tym, jak jasne widzi je oko: najbardziej zielony, potem czerwony, potem niebieski. Współczynnik to luminancja jaśniejszego koloru plus 0,05 podzielona przez luminancję ciemniejszego plus 0,05, więc mieści się od 1:1 dla identycznych kolorów do 21:1 dla czerni na bieli.
WCAG 2 ustala minima zależnie od rozmiaru tekstu. Zwykły tekst wymaga 4,5:1 dla poziomu AA i 7:1 dla surowszego poziomu AAA. Duży tekst, łatwiejszy do odczytania, wymaga 3:1 dla AA i 4,5:1 dla AAA. Duży oznacza co najmniej 24 px albo około 18,7 px w wersji pogrubionej.
Współczynnik uwzględnia tylko jasność. Dwa kolory mogą zaliczyć i nadal być trudne do odróżnienia dla osób z zaburzeniami widzenia barw, a cienkie czcionki lub tekst na zdjęciu mogą potrzebować większego kontrastu niż minimum. Traktuj tę wartość jako dolną granicę i sprawdź podgląd.
Dla programistów i agentów AI
Chcesz sprawdzać kontrast w kodzie, w kroku budowania lub z poziomu agenta AI? Jest do tego API: zobacz przewodnik po API sprawdzania kontrastu kolorów.
Wskazówki
- Najpierw potrzebujesz przeliczyć kolor między HEX, RGB, HSL i CMYK? Użyj narzędzia Konwerter kolorów.
- Budujesz zestaw pasujących kolorów? Generator palety kolorów pokazuje kontrast względem bieli i czerni dla każdej próbki.
- Potrzebujesz koloru piksela ze zrzutu ekranu? Użyj narzędzia Pobierz kolor z obrazu.
Najczęstsze pytania
Jak obliczany jest współczynnik kontrastu?
Według wzoru WCAG 2.x: luminancję względną każdego koloru oblicza się z jego wartości sRGB, a współczynnik to (jaśniejszy + 0,05) podzielone przez (ciemniejszy + 0,05). Mieści się w zakresie od 1:1 (brak kontrastu) do 21:1 (czerń na bieli). Współczynnik jest pokazany z dwoma miejscami po przecinku, a obok widać wartość niezaokrągloną.
Jakich współczynników wymagają AA i AAA?
Zwykły tekst wymaga 4,5:1 dla AA i 7:1 dla AAA. Duży tekst, czyli co najmniej 24 px zwykły lub około 18,7 px pogrubiony, wymaga 3:1 dla AA i 4,5:1 dla AAA. Współczynnik nie jest zaokrąglany w górę przez próg: 4,499:1 jest pokazane jako 4,49 i nie zalicza AA dla zwykłego tekstu.
Dlaczego #777777 na białym nie zalicza AA?
Jego kontrast to 4,48:1, tuż poniżej 4,5:1, których AA wymaga dla zwykłego tekstu, więc nie zalicza dla tekstu podstawowego, ale zalicza dla dużego tekstu, który potrzebuje tylko 3:1. Nieco ciemniejszy szary, taki jak #767676, osiąga 4,54:1 i zalicza.
Co z przezroczystymi kolorami?
Częściowo przezroczysty kolor tekstu jest najpierw mieszany z tłem, tak jak pokazuje go ekran, i mierzony jest kolor po zmieszaniu. Częściowo przezroczyste tło jest traktowane jako leżące na bieli. Kanały są zaokrąglane do liczb całkowitych po zmieszaniu.
Czy zaliczony współczynnik oznacza, że tekst jest dostępny?
Nie sam w sobie. Współczynnik mierzy tylko kontrast jasności. Nie mówi nic o parach kolorów trudnych przy zaburzeniach widzenia barw, bardzo cienkich czcionkach, tekście na zdjęciach lub gradientach ani o tym, czy kolor jest jedynym sposobem przekazania znaczenia. Traktuj go jako minimum, nie gwarancję.
Czy cokolwiek jest wysyłane na serwer?
Nie. Kolory są odczytywane i mierzone w Twojej przeglądarce, a nic, co wpiszesz, nie opuszcza Twojego urządzenia.