Sprawdź kontrast kolorów i czytelność tekstu według WCAG

Narzędzie pokazuje współczynnik kontrastu w skali od 1:1 (brak kontrastu) do 21:1 (maksymalny kontrast - czarny na białym). Wynik porównywany jest z progami określonymi w standardzie WCAG:

• Tekst zwykły - wymaga kontrastu co najmniej 4.5:1 dla poziomu AA (standard minimalny) lub 7:1 dla poziomu AAA (standard rozszerzony). Dotyczy tekstu o rozmiarze poniżej 18pt (24px) lub poniżej 14pt (18.5px) pogrubionego.
• Tekst duży / pogrubiony - wymaga kontrastu co najmniej 3:1 dla poziomu AA lub 4.5:1 dla poziomu AAA. Dotyczy tekstu od 18pt (24px) lub od 14pt (18.5px) pogrubionego - nagłówki, przyciski, wyróżnienia.
• Ikony i elementy graficzne - wymagają kontrastu co najmniej 3:1 dla poziomu AA. Dotyczy ikon, przycisków, pól formularzy i innych elementów interfejsu, które przekazują informację.

Poziom AA to minimum wymagane przez przepisy dotyczące dostępności cyfrowej w wielu krajach, w tym w dyrektywie UE o dostępności stron internetowych. Poziom AAA zapewnia lepszą czytelność, ale nie zawsze jest praktyczny do osiągnięcia dla wszystkich elementów.

Jeśli kontrast jest za niski, nie trzeba szukać odpowiedniego koloru metodą prób i błędów. Funkcja Dopasuj automatycznie znajduje wariant koloru tekstu, który spełnia wybrany próg kontrastu.

Jak działa dopasowanie:

1. Wybierz cel dopasowania z listy - np. AA dla tekstu zwykłego lub AAA dla tekstu dużego.
2. Uruchom funkcję przyciskiem Dopasuj.
3. Narzędzie przeszuka warianty jasności koloru tekstu i zaproponuje najbliższy spełniający wymagania.
4. Zaproponowany kolor można skopiować do schowka lub od razu ustawić jako nowy kolor tekstu.

Algorytm zachowuje odcień i nasycenie oryginalnego koloru, zmieniając wyłącznie jasność. Proponowana barwa pozostaje więc spójna z identyfikacją wizualną, a jednocześnie spełnia standard dostępności.

Widzę komunikat o błędzie formatu koloru

Sprawdź format koloru. Kod HEX powinien zaczynać się od # i zawierać 3 lub 6 znaków (np. #fff lub #ffffff). Dla formatu RGB sprawdź, czy wartości są oddzielone przecinkami i mieszczą się w zakresie 0-255.

Funkcja Dopasuj nie znajduje odpowiedniego koloru

Gdy tło i tekst mają zbliżoną jasność w tym samym odcieniu, algorytm może nie znaleźć wariantu spełniającego wymagania bez zmiany odcienia. W takim przypadku rozważ zmianę koloru tła lub wybór zupełnie innego koloru tekstu.

Kolor w próbniku nie odpowiada wpisanemu kodowi

Próbnik kolorów w przeglądarce obsługuje tylko format HEX bez przezroczystości. Jeśli wpiszesz kolor w formacie RGBA lub HSLA z przezroczystością, próbnik pokaże tylko część kolorową (bez alpha). Obliczenia kontrastu nadal uwzględniają przezroczystość.

Daltonizm (ślepota barw) to zaburzenie widzenia kolorów, które dotyczy około 8% mężczyzn i 0,5% kobiet. Osoby z daltonizmem mogą mieć trudności z rozróżnieniem niektórych par kolorów, nawet jeśli kontrast jasności jest wystarczający.

Najczęstsze typy daltonizmu:

• Deuteranopia - trudności z rozróżnieniem zieleni i czerwieni (najczęstsza forma)
• Protanopia - trudności z widzeniem czerwieni
• Tritanopia - trudności z widzeniem niebieskiego i żółtego (rzadka)

To narzędzie sprawdza kontrast jasności, który jest ważny dla wszystkich użytkowników. Jednak przy projektowaniu warto dodatkowo unikać problematycznych kombinacji kolorów (np. czerwony tekst na zielonym tle) i nie polegać wyłącznie na kolorze do przekazywania informacji - używaj też kształtów, ikon, tekstu.

W Polsce kontrast kolorów to nie tylko dobra praktyka projektowa - to wymóg prawny. Przepisy nakładają konkretne obowiązki na podmioty publiczne, a od 2025 roku także na sektor prywatny.

Ustawa o dostępności cyfrowej (4 kwietnia 2019)

Nakłada na podmioty publiczne obowiazek zapewnienia dostepnosci stron internetowych i aplikacji mobilnych zgodnie z WCAG 2.1 poziom AA. Dotyczy to m.in. urzedow, szkol, szpitali, jednostek samorzadu terytorialnego i spolek komunalnych. Minimalny kontrast tekstu wynosi 4.5:1 (tekst zwykly) i 3:1 (tekst duzy, ikony).

Ustawa o zapewnianiu dostepnosci osobom ze szczegolnymi potrzebami (19 lipca 2019)

Rozszerza obowiazki dostepnosci na wszystkie podmioty publiczne - nie tylko w zakresie cyfrowym, ale tez architektonicznym i informacyjno-komunikacyjnym. Kazdy obywatel moze zlozyc wniosek o zapewnienie dostepnosci, a podmiot ma 14 dni na odpowiedz.

Europejski Akt Dostepnosci (dyrektywa 2019/882)

Od 28 czerwca 2025 wymogi dostepnosci obejmuja rowniez sektor prywatny: sklepy internetowe, bankowosc online, uslugi transportowe, e-booki i terminale platnicze. Polskie firmy prowadzace sprzedaz online musza zapewnic kontrast kolorow zgodny z WCAG 2.1 AA.

KRI (Krajowe Ramy Interoperacyjnosci)

Rozporzadzenie Rady Ministrow z 2012 r. (nowelizowane w 2017) wymaga, aby systemy teleinformatyczne podmiotow publicznych spelnialy standard WCAG 2.0 poziom AA. W praktyce kontrole prowadzi Ministerstwo Cyfryzacji, a wyniki publikowane sa w corocznych raportach dostepnosci.