Sprawdzanie Kontrastu Kolorów Online
Sprawdź kontrast kolorów zgodnie z WCAG 2.1. Zweryfikuj zgodność z poziomami AA i AAA natychmiastowo.
Sample Text
This is a normal text paragraph to verify readability.
#1a1a1f
#f8f6f3
Dlaczego warto
Dostępność sieci bez zgadywania współczynników kontrastu
Oficjalny WCAG 2.1
Używa dokładnego wzoru W3C względnej luminancji. Precyzyjne, zgodne wyniki.
AA i AAA na pierwszy rzut oka
Natychmiast sprawdź, czy Twoja kombinacja spełnia minimalny poziom wymagany prawnie.
Natychmiastowe
Obliczenia w czasie rzeczywistym podczas zmiany kolorów.
Bez rejestracji
Sprawdzaj swoje kolory bez kont i instalacji.
Jak to działa
Trzy kroki, żadnych komplikacji
Wprowadź swoje kolory
Wybierz kolor tekstu i kolor tła za pomocą selektora kolorów lub wpisując wartości hex, RGB lub HSL bezpośrednio.
Uzyskaj współczynnik kontrastu
Współczynnik kontrastu jest obliczany natychmiastowo według wzoru względnej luminancji WCAG 2.1. Sprawdź, czy spełnia poziomy AA i AAA.
Dostosowuj aż do zgodności
Jeśli kontrast nie spełnia wymagań, dostosuj kolory. Narzędzie informuje, który poziom zgodności osiąga Twoja kombinacja kolorów.
FAQ
Masz pytania?
WCAG (Web Content Accessibility Guidelines) to wytyczne dotyczące dostępności treści internetowych opracowane przez W3C (World Wide Web Consortium). Stanowią one międzynarodowy punkt odniesienia dla zapewniania dostępności treści internetowych osobom z niepełnosprawnościami wzrokowymi, słuchowymi, ruchowymi i poznawczymi. Aktualna wersja to WCAG 2.1 (opublikowana w czerwcu 2018 roku); WCAG 2.2 zostało opublikowane w październiku 2023 roku z dodatkowymi kryteriami sukcesu. WCAG 3.0 jest w opracowaniu i proponuje nowy model kontrastu oparty na APCA (Advanced Perceptual Contrast Algorithm).
WCAG definiuje trzy poziomy zgodności. Poziom A: podstawowe wymagania, których niespełnienie czyni treść niedostępną. Poziom AA: zalecany standard dla większości stron internetowych; wymagany prawnie w wielu krajach. Poziom AAA: najwyższy poziom dostępności, nie zawsze osiągalny dla wszystkich treści. Dla kontrastu kolorów: AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu. Przepisy o dostępności sieci (ADA w USA, EAA w Europie) zazwyczaj wymagają poziomu AA.
Współczynnik kontrastu to liczba od 1:1 (brak kontrastu, identyczne kolory) do 21:1 (maksymalny kontrast, czarny na białym). Obliczany jest jako (L1 + 0,05) / (L2 + 0,05), gdzie L1 to względna luminancja jaśniejszego koloru, a L2 — ciemniejszego. Względna luminancja koloru sRGB jest obliczana przez transformację każdego kanału (R, G, B) z gamma do liniowego: jeśli znormalizowana wartość wynosi ≤ 0,03928, użyj channel/12,92, w przeciwnym razie użyj ((channel+0,055)/1,055)^2,4. Końcowa luminancja wynosi 0,2126×R + 0,7152×G + 0,0722×B.
W Stanach Zjednoczonych ustawa Americans with Disabilities Act (ADA) ma zastosowanie do witryn objętych podmiotów, a sądy ustanowiły WCAG 2.1 poziom AA jako obowiązujący standard. W Europie European Accessibility Act (Dyrektywa 2019/882) weszła w życie 28 czerwca 2025 roku, wymagając od cyfrowych produktów i usług spełniania standardów dostępności równoważnych WCAG 2.1 AA. Ignorowanie tych wymagań może skutkować procesami sądowymi i grzywnami.
WCAG 2.1 definiuje duży tekst jako tekst o rozmiarze co najmniej 18 punktów (ok. 24 px) przy normalnej grubości lub co najmniej 14 punktów (ok. 18,67 px) pogrubiony (font-weight 700 lub wyższy). Taki tekst ma niższe wymagania dotyczące kontrastu (3:1 dla AA zamiast 4,5:1), ponieważ większy rozmiar wspomaga czytelność nawet przy niższym kontraście. Logo i tekst czysto dekoracyjny są zwolnione z wymagań dotyczących kontrastu. Komponenty UI (przyciski, pola) wymagają minimum 3:1 dla ich aktywnych części (kryterium 1.4.11 Non-text Contrast).
Kontrast kolorów WCAG: dostępność sieci, przepisy i algorytmy
Wytyczne dotyczące dostępności treści internetowych (WCAG) wywodzą się z Web Accessibility Initiative (WAI) W3C, uruchomionej w 1997 roku. WCAG 1.0 zostało opublikowane w maju 1999 roku. WCAG 2.0 pojawiło się w grudniu 2008 roku, wprowadzając czterozasadniczy model: Dostrzegalny, Operowalny, Zrozumiały i Solidny (POUR). WCAG 2.1 (czerwiec 2018) dodał 17 nowych kryteriów sukcesu, szczególnie dla użytkowników mobilnych, osób słabowidzących i osób z niepełnosprawnościami poznawczymi. Kryterium 1.4.3 (Minimalny Kontrast) ustanawia wymagania dotyczące współczynnika kontrastu, które sprawiają, że to narzędzie jest niezbędne. Sekcja 508 amerykańskiej ustawy Rehabilitation Act (zaktualizowana w 2017 roku) inkorporuje przez odwołanie WCAG 2.0 poziom AA dla federalnej technologii informacyjnej.
Wzór względnej luminancji WCAG oparty jest na przestrzeni kolorów sRGB (IEC 61966-2-1), standardzie dla monitorów komputerowych od 1999 roku. Transformacja gamma-na-liniową sRGB (operacja ((c+0,055)/1,055)^2,4 dla wartości powyżej 0,03928) przybliża rzeczywistą krzywą gamma standardu sRGB. Współczynniki luminancji (0,2126 dla czerwonego, 0,7152 dla zielonego, 0,0722 dla niebieskiego) odzwierciedlają czułość ludzkiego oka na każdą długość fali, bazując na pracach Międzynarodowej Komisji Oświetleniowej (CIE). Lea Verou, badaczka MIT i członkini CSS Working Group W3C, opracowała powszechnie cytowaną implementację referencyjną i stworzyła narzędzie contrast-ratio.com w 2012 roku.
WCAG 3.0 (obecnie w fazie projektu) proponuje zastąpienie obecnego wzoru kontrastu algorytmem APCA (Advanced Perceptual Contrast Algorithm), opracowanym przez Andrew Somersa. APCA lepiej modeluje ludzką percepcję wzrokową, uwzględniając polaryzację kontrastu (ciemny tekst na jasnym tle a jasny tekst na ciemnym tle są postrzegane inaczej), rozmiar i grubość czcionki oraz adaptację układu wzrokowego. Skala APCA wynosi od 0 do 106 Lc (Lightness Contrast), a jej progi różnią się znacząco od współczynników WCAG 2.x — na przykład czarny tekst na czystej bieli daje 106 Lc, podczas gdy kombinacje spełniające AA w WCAG 2.x mogą nie spełniać wymagań APCA lub odwrotnie. Przejście na WCAG 3.0 będzie stopniowe i ostateczna wersja nie jest oczekiwana przed 2026 rokiem.