Sprawdzanie kontrastu kolorów
Upewnij się, że twój tekst jest czytelny dla wszystkich, a jeśli nie jest, dostaniesz gotową poprawkę.
Zapieczętowane na tym urządzeniu
Działa w przeglądarce. Nic nie jest wysyłane.
Zapieczętowane
Kolory
- Współczynnik kontrastu
- Zwykły tekst
- AA · 4,5:1
- AAA · 7:1
- Duży tekst
- AA · 3:1
- AAA · 4,5:1
- Elementy interfejsu i ikony
- AA · 3:1
- Kontrast APCA (informacyjnie)
APCA to nowsza metoda analizowana na potrzeby przyszłych wytycznych dostępności. Punktem odniesienia pozostaje dziś WCAG 2.2.
Podgląd
Tak wygląda duży tekst
Zwykły tekst powinien być łatwy do przeczytania dla każdego, także dla osób słabowidzących, na telefonie w pełnym słońcu czy na starym ekranie.
Drobny druk i podpisy potrzebują największego kontrastu.
Proponowane poprawki
Jak to działa
-
Podaj dwa kolory
Wpisz lub wybierz kolor tekstu i kolor tła. Działa każdy format: HEX, RGB, HSL lub nazwa CSS.
-
Sprawdź wynik
Zobacz współczynnik kontrastu i to, czy spełnia WCAG 2.2 AA i AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu.
-
W razie potrzeby popraw
Jeśli któryś poziom nie jest spełniony, użyj jednego z proponowanych kolorów: to najbliższy kolor o tej samej barwie, który spełnia wymagania.
Najczęściej zadawane pytania
Jakiego współczynnika kontrastu potrzebuję?
Poziom AA w WCAG 2.2 wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Poziom AAA wymaga 7:1 i 4,5:1. Ikony, obramowania pól i inne elementy interfejsu potrzebują co najmniej 3:1 względem tego, co je otacza.
Co liczy się jako duży tekst?
Tekst o wielkości co najmniej 18 punktów (24 piksele CSS) albo co najmniej 14 punktów (około 18,7 piksela CSS), jeśli jest pogrubiony. Wszystko, co mniejsze, to zwykły tekst.
Dlaczego 4,49:1 nie spełnia wymagań, skoro to tak blisko 4,5:1?
Progi WCAG to ścisłe minimum i współczynnika nie wolno zaokrąglać w górę. Dlatego to narzędzie pokazuje współczynnik zaokrąglony w dół: wartość, która wygląda na spełniającą wymagania, naprawdę je spełnia.
Czym jest APCA?
APCA (Accessible Perceptual Contrast Algorithm) to nowszy sposób mierzenia kontrastu, który uwzględnia, czy tekst jest ciemny na jasnym tle, czy jasny na ciemnym. Jest analizowany na potrzeby przyszłej wersji wytycznych. Pokazujemy go tu wyłącznie informacyjnie: obecnie wymagania prawne i audytowe odwołują się do współczynnika WCAG 2.
Jak dobierane są proponowane kolory?
Narzędzie zachowuje barwę i nasycenie twojego koloru i zmienia tylko jego jasność w percepcyjnej przestrzeni barw OKLCH, aż znajdzie najbliższą wartość, która osiąga dany poziom. Twój kolor nadal wygląda jak on sam, tylko nieco jaśniej lub ciemniej.
Czy działa z przezroczystymi kolorami?
Tak, w przypadku koloru tekstu: półprzezroczysty kolor tekstu jest najpierw mieszany z tłem, bo właśnie taki kolor ludzie faktycznie widzą. Tło jest traktowane jako pełne.