Kalkulator kontrastu kolorów WCAG 2.2
Wpisz kolor tekstu i tła. Od razu zobaczysz, czy połączenie spełnia wymagania WCAG 2.2, a jeśli nie, dostaniesz najbliższy kolor, który je spełnia. Obliczenia działają w przeglądarce, nic nie wysyłamy.
Format #rrggbb, #rgb albo rgb(r, g, b), bez przezroczystości.
Format #rrggbb, #rgb albo rgb(r, g, b), bez przezroczystości.
Wynik
4,54:1
Kontrast 4,54:1. Zwykły tekst spełnia poziom AA.
- Spełnia: Zwykły tekst, poziom AA (min. 4,5:1, WCAG 1.4.3)
- Spełnia: Duży tekst, poziom AA (min. 3:1, WCAG 1.4.3)
- Spełnia: Ikony, obramowania pól, wykresy (min. 3:1, WCAG 1.4.11)
- Nie spełnia: Zwykły tekst, poziom AAA (min. 7:1, WCAG 1.4.6)
- Spełnia: Duży tekst, poziom AAA (min. 4,5:1, WCAG 1.4.6)
Jakie progi obowiązują
Przepisy o dostępności w Unii Europejskiej odwołują się do poziomu AA. W praktyce oznacza to trzy liczby:
| Co mierzysz | Minimum AA | Kryterium |
|---|---|---|
| Zwykły tekst | 4,5:1 | 1.4.3 |
| Duży tekst: od 24 px albo od 18,66 px pogrubiony | 3:1 | 1.4.3 |
| Ikony, obramowania pól, elementy wykresów | 3:1 | 1.4.11 |
Z wymagań wyłączone są logotypy, elementy nieaktywne i dekoracje, które nie niosą informacji.
Gdzie w sklepie sprawdzić kontrast najpierw
Na liście najczęstszych błędów niski kontrast jest od lat na pierwszym miejscu. W sklepach najczęściej zawodzą te same miejsca: przekreślone stare ceny, szare daty i podpisy, biały napis na żółtym albo jasnozielonym przycisku, placeholder w polu wyszukiwarki i drobny tekst w stopce. Zacznij od nich, bo to one decydują, czy klient przeczyta cenę i znajdzie przycisk zamówienia.
Czego kalkulator nie sprawdzi
Kalkulator porównuje dwa jednolite kolory. Nie oceni tekstu na zdjęciu, gradiencie ani filmie. Nie sprawdzi też stanów, które pojawiają się dopiero po interakcji: najechania myszą, zaznaczenia czy komunikatu błędu. Żeby sprawdzić wszystkie teksty naraz, uruchom skan całej strony.
Więcej o przyczynach i poprawkach przeczytasz w opisie błędu niski kontrast tekstu.
Najczęstsze pytania
Jaki kontrast jest wymagany przez WCAG 2.2?
Na poziomie AA zwykły tekst potrzebuje co najmniej 4,5:1, a duży tekst (od 24 px albo od 18,66 px pogrubiony) co najmniej 3:1. Ikony, obramowania pól formularza i elementy wykresów potrzebują co najmniej 3:1 względem sąsiednich kolorów.
Dlaczego kalkulator pokazuje 4,49:1, a nie 4,5:1?
Bo wynik obcinamy, a nie zaokrąglamy w górę. Kontrast 4,499:1 nie spełnia progu 4,5:1, choć zaokrąglony wyglądałby na zgodny. Część narzędzi zaokrągla i przepuszcza takie kolory.
Czy kalkulator sprawdzi kontrast tekstu na zdjęciu?
Nie. Kalkulator porównuje dwa jednolite kolory. Przy tekście na zdjęciu albo gradiencie zmierz najjaśniejsze miejsce tła pod tekstem, bo tam kontrast jest najniższy.
Czy moje kolory są gdzieś wysyłane?
Nie. Obliczenia działają w Twojej przeglądarce. Nie zapisujemy i nie wysyłamy wpisanych kolorów.