Sprawdzanie kontrastu kolorów mierzy różnicę luminancji między kolorem pierwszego planu (zazwyczaj tekstu) a kolorem tła, a wynik wyraża jako stosunek. Stosunek 1:1 oznacza, że kolory są identyczne; 21:1 to wartość maksymalna, reprezentująca czarny na białym lub odwrotnie. Web Content Accessibility Guidelines (WCAG) opublikowane przez W3C definiują minimalne stosunki kontrastu, które tekst musi spełniać, aby osoby słabowidzące lub z zaburzeniami widzenia kolorów mogły go odczytać.
Wzór na stosunek kontrastu pochodzi z WCAG 2.x i opiera się na luminancji względnej — mierze tego, jak jasny kolor wydaje się ludzkiemu oku. Luminancja względna jest obliczana przez linearyzację każdego kanału sRGB (usunięcie korekcji gamma) i ważenie kanałów zgodnie ze współczynnikami ITU-R BT.709: 0,2126 dla czerwonego, 0,7152 dla zielonego i 0,0722 dla niebieskiego. Zielony wnosi największy wkład, ponieważ ludzkie oko jest najbardziej wrażliwe na zielone światło. Stosunek wynosi (L1 + 0,05) / (L2 + 0,05), gdzie L1 to luminancja jaśniejszego koloru.
WCAG definiuje dwa poziomy zgodności. Poziom AA wymaga stosunku kontrastu co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego (18px lub więcej, lub 14px pogrubiony). Poziom AAA podnosi poprzeczkę odpowiednio do 7:1 i 4,5:1. WCAG 2.1 wprowadził również kryterium sukcesu 1.4.11, które wymaga stosunku 3:1 dla nieodwzorowujących elementów interfejsu, takich jak obramowania, ikony i wskaźniki fokusu.
Dlaczego warto użyć tego narzędzia do sprawdzania kontrastu?
Ocenianie kontrastu na oko jest zawodne. Kolory, które wyglądają wyraźnie na skalibrowanym monitorze, mogą zlewać się na ekranie laptopa niskiej jakości, w bezpośrednim świetle słonecznym lub dla osoby z deuteranopią. Numeryczny stosunek eliminuje zgadywanie i daje jednoznaczny werdykt zaliczone/niezaliczone względem standardu WCAG.
⚡
Natychmiastowe obliczanie stosunku
Wybierz lub wpisz dwa kolory, a stosunek kontrastu aktualizuje się w czasie rzeczywistym. Bez formularza do wysłania, bez przeładowania strony.
🔒
Przetwarzanie z poszanowaniem prywatności
Obliczenia luminancji są wykonywane wyłącznie w przeglądarce. Żadne wartości kolorów nie opuszczają twojego urządzenia, a żadne pliki cookie ani narzędzia analityczne nie śledzą twoich wyborów.
🎯
Werdykty AA i AAA
Wyniki pokazują status zaliczone/niezaliczone dla WCAG AA i AAA — dla tekstu normalnego i dużego — dzięki czemu dokładnie wiesz, które progi spełniasz.
📋
Bez zakładania konta
Otwórz stronę i zacznij testować. Bez rejestracji, bez limitów. Narzędzie działa offline po załadowaniu strony.
Zastosowania narzędzia do sprawdzania kontrastu
Rozwój frontendu
Przed wysłaniem zmiany interfejsu wklej kolor tekstu i tła z CSS do narzędzia, aby potwierdzić, że para spełnia WCAG AA. Pozwala to wychwycić błędy kontrastu, zanim trafią do przeglądu kodu lub automatycznych audytów.
Przekazywanie projektów
Projektanci mogą sprawdzić, czy każda para kolorów w pliku Figma spełnia wymagany poziom WCAG, zanim przekażą specyfikacje programistom. Naprawianie kontrastu na etapie projektowania jest o wiele tańsze niż poprawianie go po implementacji.
Audyt dostępności
Inżynierowie QA przeprowadzający audyt WCAG mogą wyrywkowo sprawdzać konkretne kombinacje kolorów oznaczone przez automatyczne narzędzia, takie jak Lighthouse lub axe. Narzędzie potwierdza dokładny stosunek i wskazuje, które poziomy są spełnione lub niespełnione.
Tokeny systemu projektowania
Definiując tokeny kolorów dla systemu projektowania, przetestuj każdą parę pierwszego planu i tła, aby upewnić się, że paleta tokenów spełnia co najmniej poziom AA. Udokumentuj stosunki obok tokenów, aby kolejne zespoły mogły ufać tym wyborom.
Testowanie szablonów e-mail
Klienty pocztowe usuwają funkcje CSS, takie jak krycie i tryby mieszania, więc rzeczywiste renderowane kolory mogą różnić się od źródłowych. Przetestuj końcowe wartości pierwszego planu i tła, które trafiają do skrzynki odbiorczej, aby zweryfikować czytelność.
Nauka standardów dostępności
Studenci uczący się WCAG mogą eksperymentować z różnymi parami kolorów i natychmiast obserwować, jak zmienia się stosunek. Dostosowywanie jednego kanału na raz buduje praktyczne rozumienie tego, jak luminancja wpływa na postrzegany kontrast.
Wymagania dotyczące stosunku kontrastu WCAG
Poniższa tabela podsumowuje minimalne stosunki kontrastu wymagane przez WCAG 2.1 dla różnych typów treści i poziomów zgodności. Tekst duży jest definiowany jako 18px (24 piksele CSS) lub więcej przy normalnej grubości, lub 14px (18,66 pikseli CSS) lub więcej przy grubości pogrubionej.
Poziom
Min. stosunek
Dotyczy
Uwaga
AA Normal text
4.5 : 1
Body text, paragraphs, labels
Minimum for most UI text
AA Large text
3.0 : 1
Text >= 18px, or >= 14px bold
Minimum for headings
AA UI components
3.0 : 1
Borders, icons, focus indicators
Non-text contrast (WCAG 1.4.11)
AAA Normal text
7.0 : 1
Body text at highest standard
Enhanced readability
AAA Large text
4.5 : 1
Large text at highest standard
Enhanced for headings
Luminancja, AA i AAA — wyjaśnienie
Obliczanie stosunku kontrastu składa się z trzech etapów: obliczenia luminancji dla każdego koloru, wyprowadzenia stosunku i porównania go z progami WCAG.
Luminancja względna
Pojedyncza liczba od 0 (czarny) do 1 (biały), która reprezentuje postrzeganą jasność koloru. Uwzględnia nieliniową krzywą korekcji gamma sRGB oraz nierównomierną wrażliwość ludzkiego oka na czerwony, zielony i niebieski. Czysty zielony (#00FF00) ma luminancję 0,7152, podczas gdy czysty niebieski (#0000FF) tylko 0,0722.
WCAG AA
Podstawowy poziom dostępności wymagany przez większość standardów prawnych, w tym europejski Akt o dostępności (EAA) i Section 508 w Stanach Zjednoczonych. AA wymaga stosunku 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego. Większość systemów projektowania przyjmuje AA jako minimum dla wszystkich elementów tekstowych.
WCAG AAA
Rozszerzony poziom przeznaczony dla treści, które muszą być czytelne przez możliwie najszerszą grupę odbiorców, w tym użytkowników z poważnym upośledzeniem wzroku. AAA wymaga 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego. Niewiele witryn osiąga AAA na wszystkich stronach, ale kluczowe treści, takie jak powiadomienia prawne i informacje medyczne, często go realizuje.
Przykłady kodu
Oblicz stosunki kontrastu WCAG programowo. Każdy przykład implementuje wzór luminancji względnej z WCAG 2.x oraz obliczanie stosunku kontrastu. Te same pary: czarny na białym i indygo na białym są testowane w celach porównawczych.
/* WCAG-safe color pairs — tested contrast ratios */
/* 12.63:1 — passes AAA normal text */
.high-contrast {
color: #1e293b; /* slate-800 */
background: #f8fafc; /* slate-50 */
}
/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
color: #e2e8f0; /* slate-200 */
background: #0f172a; /* slate-900 */
}
/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
color: #1d4ed8; /* blue-700 */
background: #ffffff;
}
/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
color: #94a3b8; /* slate-400 */
background: #ffffff;
}
Najczęściej zadawane pytania
Jaki stosunek kontrastu jest dobry dla tekstu?
Dla tekstu głównego w internecie cel to co najmniej 4,5:1 (WCAG AA). Stosunki powyżej 7:1 spełniają WCAG AAA i są wygodniejsze przy dłuższym czytaniu. Czarny na białym daje maksymalny stosunek 21:1, ale bardzo ciemna szarość (#1e293b) na białym nadal daje około 12,6:1, czyli znacznie powyżej AAA.
Co liczy się jako duży tekst w WCAG?
WCAG definiuje duży tekst jako 18px (24 piksele CSS) przy normalnej grubości lub 14px (18,66 pikseli CSS) przy grubości pogrubionej. Duży tekst otrzymuje niższy próg kontrastu, ponieważ większe litery są łatwiej postrzegane. W CSS 1px równa się 0,75pt, więc 18pt równa się 24px.
Czy WCAG AA jest wymagane prawnie?
W wielu jurysdykcjach tak. Europejski Akt o dostępności (EAA), który wchodzi w życie w czerwcu 2025 roku, odwołuje się do WCAG 2.1 AA. Section 508 amerykańskiej Ustawy o rehabilitacji wymaga, aby agencje federalne spełniały WCAG 2.0 AA. Americans with Disabilities Act (ADA) był interpretowany przez sądy USA jako wymagający dostępnych witryn internetowych, z WCAG AA jako standardem. Kanada, Australia i Wielka Brytania mają podobne regulacje.
Jak obliczana jest luminancja względna?
Każda wartość kanału sRGB (0–255) jest dzielona przez 255, a następnie linearyzowana: wartości równe lub poniżej 0,04045 są dzielone przez 12,92, a wartości powyżej są przekształcane przez ((c + 0,055) / 1,055) ^ 2,4. Trzy zlinearyzowane kanały są ważone współczynnikami ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) i sumowane. Wynik to liczba z przedziału od 0 do 1.
Dlaczego WCAG używa przesunięcia 0,05 we wzorze na kontrast?
Przesunięcie 0,05 zapobiega dzieleniu przez zero, gdy jeden z kolorów to czysta czerń (luminancja = 0). Uwzględnia również otoczenie świetlne i odbicia od ekranu, które nieznacznie zwiększają postrzeganą luminancję nawet najciemniejszych pikseli. Bez tego przesunięcia czerń na dowolnym ciemnym kolorze dawałaby nieskończony lub mylnie wysoki stosunek.
Czy dwa kolory mogą spełniać AA, a mimo to być trudne do odczytania?
Tak. Stosunki kontrastu WCAG mierzą różnicę luminancji, nie różnicę barwy. Nasycona czerwień na nasyconej zieleni może technicznie spełniać próg stosunku, będąc jednocześnie niekomfortową do odczytu dla niektórych użytkowników — szczególnie tych z zaburzeniami widzenia czerwono-zielonego. Dobieranie kolorów różniących się zarówno luminancją, jak i barwą daje zwykle wygodniejsze rezultaty.
Jaka jest różnica między kontrastem WCAG 2.x a APCA?
WCAG 2.x używa prostego stosunku luminancji, który traktuje symetrycznie pierwszy plan i tło. APCA (Advanced Perceptual Contrast Algorithm), proponowany dla WCAG 3.0, używa modelu postrzeganej jasności uwzględniającego polaryzację: ciemny tekst na jasnym tle ma inny postrzegany kontrast niż jasny tekst na ciemnym tle przy tej samej różnicy luminancji. APCA jest nadal wersją roboczą i nie zastąpił metody WCAG 2.x w żadnych przepisach.