Sprawdzanie kontrastu kolorów (WCAG)
Wpisz oba kolory w formacie szesnastkowym (#1f2937) lub rgb(31, 41, 55).
Wynik
4,54:1Współczynnik kontrastu
- AA, zwykły tekst (4,5:1)
- ✓
- AA, duży tekst (3:1)
- ✓
- AAA, zwykły tekst (7:1)
- ✕
- AAA, duży tekst (4,5:1)
- ✓
- Wczytane kolory
- #767676 / #ffffff
Dane wejściowe
- Kolor tekstu
- #767676
- Kolor tła
- #ffffff
Jak to obliczyć
Względna luminancja każdego koloru jest obliczana z zlinearyzowanych kanałów sRGB.
Wynik
Współczynnik kontrastu
- AA, zwykły tekst (4,5:1)
- ✓
- AA, duży tekst (3:1)
- ✓
- AAA, zwykły tekst (7:1)
- ✕
Jak to obliczyć
- Względna luminancja każdego koloru jest obliczana z zlinearyzowanych kanałów sRGB.
- Współczynnik = (jaśniejsze L + 0,05) ÷ (ciemniejsze L + 0,05), od 1:1 do 21:1.
- Wynik jest porównywany z progami WCAG 2 bez zaokrąglania.
Przykład
#767676 na białym tle daje 4,54:1: spełnia AA dla zwykłego tekstu, ale nie AAA.
Warto wiedzieć
- Duży tekst ma co najmniej 24 px lub 18,66 px pogrubionej czcionki.
- Przezroczystość i gradienty nie są uwzględniane.
Kiedy użyć
- Sprawdź czytelność tekstu na tle strony internetowej.
- Zweryfikuj, czy para kolorów spełnia wymagania WCAG AA lub AAA.
Częste pytania
Jaki współczynnik WCAG AA jest wymagany dla zwykłego tekstu?
WCAG 2 wymaga dla zwykłego tekstu kontrastu co najmniej 4,5:1.
Co WCAG uznaje za duży tekst?
Co najmniej 24 piksele CSS lub około 18,66 pikseli CSS przy pogrubieniu.
Czy narzędzie uwzględnia przezroczystość i gradienty?
Nie. Porównuje podane kolory jednolite; przezroczystość i gradienty nie są obliczane.