Sprawdź kontrast kolorów i czytelność tekstu według wytycznych WCAG 2.1 AA i AAA

Ostatnia aktualizacja treści:2026-09-30

Wpisz kolor tekstu i tła, a narzędzie pokaże, czy kontrast między nimi jest wystarczający. Obliczenia opierają się na międzynarodowym standardzie dostępności WCAG 2.1 AA i AAA, który określa minimalne wartości kontrastu. Dzięki temu osoby z różnymi wadami wzroku mogą swobodnie korzystać z treści cyfrowych. Jeśli kontrast jest zbyt niski, funkcja Dopasuj automatycznie znajdzie wariant koloru spełniający wybrany próg.

Współczynnik kontrastu

21.00 : 1

Tekst zwykły

AA (min. 4.5:1)AAA (min. 7:1)

Przykładowy tekst kontrastu WCAG 2.1

Tekst duży / pogrubiony

AA (min. 3:1)AAA (min. 4.5:1)

Przykładowy tekst kontrastu WCAG 2.1

Ikona

AA (min. 3:1)

Dlaczego czytelność kolorów ma znaczenie?

Czytelność to różnica jasności między kolorem tekstu a kolorem tła. Im większa ta różnica, tym łatwiej odczytać tekst. Zbyt niski kontrast sprawia, że treść staje się trudna do przeczytania - szczególnie dla osób z wadami wzroku, osób starszych lub w trudnych warunkach oświetleniowych (np. na telefonie w pełnym słońcu).

Według Światowej Organizacji Zdrowia (WHO), około 2,2 miliarda ludzi na świecie ma różne formy zaburzeń widzenia. Daltonizm czerwono-zielony dotyczy do 8% mężczyzn i 0,5% kobiet pochodzenia północnoeuropejskiego, a widzenie barw słabnie także z wiekiem.

Narzędzie oblicza współczynnik kontrastu według wzoru określonego w standardzie WCAG 2.1 (Web Content Accessibility Guidelines) - międzynarodowych wytycznych dostępności cyfrowej. Wynik pozwala obiektywnie ocenić, czy kolory są wystarczająco czytelne, niezależnie od ustawień monitora czy indywidualnego postrzegania barw.

Jak korzystać z testera kontrastu kolorów?

Sprawdzenie czytelności zajmuje kilka sekund:

1. Podaj kolor tekstu
Wpisz kod koloru (np. #333333) w formacie HEX, RGB lub HSL - albo wybierz barwę z próbnika kolorów.
2. Podaj kolor tła
Wprowadź kolor tła, na którym będzie wyświetlany tekst - może to być kolor sekcji, bloku lub całej strony.
3. Odczytaj wynik
Narzędzie obliczy współczynnik kontrastu i pokaże, czy kolory spełniają wymagania WCAG dla tekstu zwykłego, dużego i ikon.
4. Dopasuj kolory
Jeśli kontrast jest za niski, funkcja Dopasuj automatycznie zaproponuje wariant koloru spełniający wybrany próg.

Jakie formaty kolorów są obsługiwane?

HEX

Format szesnastkowy - zapis używany w CSS i programach graficznych. Kod ma 3 lub 6 znaków (cyfry 0-9 i litery A-F), a 4 lub 8, gdy ostatnie znaki zapisują przezroczystość. Znak # można pominąć, więc kod skopiowany bez niego, np. 1B2632, też zadziała.

#fff - biały (skrócona forma)
#ffffff - biały (pełna forma)
#1a73e8 - niebieski
#00000080 - czarny z 50% krycia

RGB / RGBA

Format oparty na trzech kanałach: czerwony (Red), zielony (Green), niebieski (Blue). Każdy kanał przyjmuje wartość od 0 do 255. Wariant RGBA dodaje czwarty parametr - przezroczystość (alpha) od 0 do 1.

rgb(255, 255, 255) - biały
rgba(0, 0, 0, 0.8) - czarny z 80% krycia

HSL / HSLA

Format oparty na odcieniu (Hue, 0-360°), nasyceniu (Saturation, 0-100%) i jasności (Lightness, 0-100%). Wariant HSLA dodaje przezroczystość. Ten format jest przydatny, gdy chcesz modyfikować jasność lub nasycenie koloru.

hsl(0, 0%, 100%) - biały
hsla(217, 91%, 60%, 0.9) - niebieski z 90% krycia

Jak interpretować wyniki testu czytelności?

Po wprowadzeniu kolorów narzędzie wyświetla wyniki w trzech sekcjach:

Tekst zwykły - wymaga kontrastu 4.5:1 (AA) lub 7:1 (AAA). Dotyczy tekstu poniżej 18pt (24px) lub poniżej 14pt pogrubionego.
Tekst duży / pogrubiony - wymaga kontrastu 3:1 (AA) lub 4.5:1 (AAA). Dotyczy tekstu od 18pt (24px) lub od 14pt (18.5px) pogrubionego, np. dużych nagłówków.
Ikona - wymaga kontrastu 3:1 (AA). Dotyczy ikon i elementów graficznych interfejsu.

Zielony znacznik oznacza spełniony wymóg. Czerwony znacznik oznacza, że kontrast jest za niski i wymaga poprawy.

Co oznaczają wyniki testu czytelności?

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 - np. duże nagłówki.
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 poziom, do którego odwołuje się wiele polityk dostępności instytucji publicznych, dlatego warto traktować go jako punkt wyjścia. Poziom AAA zapewnia lepszą czytelność, ale nie zawsze jest praktyczny do osiągnięcia dla wszystkich elementów.

Automatyczne dopasowanie koloru do wymagań WCAG

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:

Wybierz cel dopasowania z listy - np. AA dla tekstu zwykłego lub AAA dla tekstu dużego.
Uruchom funkcję przyciskiem Dopasuj.
Narzędzie przeszuka warianty jasności koloru tekstu i zaproponuje najbliższy spełniający wymagania.
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.

Co oznaczają poziomy AA i AAA w standardzie WCAG?

	Poziom AA (minimalny)	Poziom AAA (rozszerzony)
Tekst zwykły - min. 4.5:1	✓	✓
Tekst zwykły - min. 7:1	—	✓
Tekst duży / pogrubiony - min. 3:1	✓	✓
Tekst duży / pogrubiony - min. 4.5:1	—	✓
Ikony i elementy interfejsu - min. 3:1	✓	✓
Zalecany dla kluczowych treści	✓	✓

Jakie zapisy koloru obsługuje to narzędzie?

Wklej kolor tak, jak go masz: kod z krzyżykiem albo bez niego, całą linię z arkusza stylów, stałą z kodu Androida, nazwę z CSS albo same trzy liczby. Narzędzie odczyta każdy z tych zapisów samo. Środkowa kolumna pokazuje kolor po odczytaniu, a następna jego kontrast na białym tle — obie wartości wyliczyło narzędzie.

Co wpisujesz	Jak narzędzie odczyta kolor	Kontrast na białym	Jak to czytamy
1B2632	rgb(27, 38, 50)	15.33:1	Krzyżyk nie jest potrzebny, kod bez niego czytamy tak samo
color: #1B2632;	rgb(27, 38, 50)	15.33:1	Wklej całą linię z arkusza stylów albo z narzędzi przeglądarki, sam kolor z niej wyjmiemy
#00000080	rgba(0, 0, 0, 0.502)	4.00:1	W kodzie ośmioznakowym krycie stoi w dwóch ostatnich znakach i bierzemy je pod uwagę przy liczeniu kontrastu
0x80000000	rgba(0, 0, 0, 0.502)	4.00:1	W stałej z kodu Androida i Kotlina krycie stoi w dwóch pierwszych znakach i właśnie tam go szukamy
rgb(59 130 246 / 50%)	rgba(59, 130, 246, 0.5)	1.84:1	Nowszy zapis CSS ze spacjami i kryciem po ukośniku przyjmujemy bez zmian
rgba(0, 0, 0, 0,5)	rgba(0, 0, 0, 0.5)	3.98:1	Krycie zapisane z przecinkiem dziesiętnym działa tak samo jak z kropką
rgba(0, 0, 0, .5)	rgba(0, 0, 0, 0.5)	3.98:1	Zero przed kropką można pominąć — zapis .5 znaczy dla nas to samo co 0.5
59, 130, 246	rgb(59, 130, 246)	3.68:1	Trzy liczby bez rgb() wystarczą, resztę zapisu dopowiadamy sobie sami
RGB(59,130,246)	rgb(59, 130, 246)	3.68:1	Wielkie litery w nazwie funkcji i brak spacji po przecinkach nie przeszkadzają
rgb(300, 0, 0)	rgb(255, 0, 0)	4.00:1	Kanał powyżej 255 przycinamy do 255, tak samo jak robi to przeglądarka
hsl(217 91% 60%)	rgb(60, 131, 246)	3.63:1	Zapis HSL, z przecinkami albo ze spacjami, przeliczamy na RGB sami
navy	rgb(0, 0, 128)	16.01:1	Znamy wszystkie 148 nazw kolorów z CSS, więc wystarczy wpisać samo słowo
transparent	rgba(0, 0, 0, 0)	1.00:1	Tekst całkiem przezroczysty daje kontrast 1:1 na każdym tle i tak go liczymy

Półprzezroczysty tekst narzędzie nakłada na tło przed obliczeniem, a półprzezroczyste tło na biel.

Rozwiązywanie problemów z testerem kontrastu kolorów

Widzę komunikat o błędzie formatu koloru

Sprawdź format koloru. Kod HEX ma 3, 4, 6 lub 8 znaków, ze znakiem # albo bez niego (np. #fff lub 1B2632). Wartości RGB i HSL wpisz w rgb() lub hsl(), oddzielone przecinkami albo spacjami. Pole przyjmuje też nazwy kolorów z CSS, np. navy albo rebeccapurple.

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ść.

Gdzie warto sprawdzać czytelność kolorów?

Czytelność ma znaczenie wszędzie tam, gdzie ktoś musi przeczytać tekst lub rozpoznać element interfejsu:

Strony internetowe
Tekst na stronach, przyciski, linki, formularze. Szczególnie ważne dla stron firmowych, gdzie odwiedzający mają różny wiek i różne możliwości wzrokowe.
Sklepy internetowe
Ceny, przyciski Kup teraz, informacje o produkcie. Niska czytelność może oznaczać utracone zamówienia.
Prezentacje
Projektor może pokazać kolory ze słabszym kontrastem niż monitor. Sprawdź kolory przed prezentacją.
Plakaty i ulotki
Materiały drukowane oglądane w różnych warunkach oświetleniowych wymagają wysokiego kontrastu.
Aplikacje mobilne
Telefony są używane w pełnym słońcu, w nocy, przez osoby w różnym wieku.
Menu restauracji
Często drukowane na kolorowym papierze lub z ozdobnymi czcionkami - łatwo o zbyt niski kontrast.

Czytelność kolorów dla osób z daltonizmem

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

Typy daltonizmu:

Deuteranopia - trudności z rozróżnieniem zieleni i czerwieni
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.

Co wyróżnia tester kontrastu i czytelności kolorów?

Obiektywna ocena oparta na wzorze matematycznym
Współczynnik kontrastu obliczany jest według wzoru z wytycznych WCAG - wynik nie zależy od ustawień monitora ani indywidualnego postrzegania barw.
Zgodność z międzynarodowym standardem WCAG
Wyniki odpowiadają progom WCAG 2.1 - wytycznym W3C, do których odwołuje się wiele polityk dostępności.
Automatyczne dopasowanie koloru do progu
Funkcja Dopasuj znajduje wariant koloru tekstu spełniający wybrany próg kontrastu - zachowuje odcień, zmienia tylko jasność.
Pięć formatów kolorów
Obsługiwane formaty: HEX, RGB, RGBA, HSL i HSLA, a także nazwy kolorów z CSS, np. navy. Kod koloru można wkleić bezpośrednio z Figmy, Photoshopa lub arkusza stylów CSS.
Trzy typy treści w jednym teście
Jedno sprawdzenie pokazuje wynik dla tekstu zwykłego, tekstu dużego (np. dużych nagłówków) i ikon - nie trzeba testować każdego typu osobno.
Podgląd tekstu na żywo
Zmiana koloru tekstu lub tła natychmiast aktualizuje podgląd - widać, jak tekst wygląda na wybranym tle, jeszcze przed wdrożeniem.

Ostatnia aktualizacja treści: 30 września 2026 · przygotował i sprawdził zespół Arteon

Najczęstsze pytania dotyczące testera kontrastu i czytelności kolorów

Co to jest współczynnik kontrastu kolorów?

Współczynnik kontrastu to miara różnicy jasności między dwoma kolorami. Skala rozciąga się od 1:1 (brak różnicy - np. biały tekst na białym tle) do 21:1 (maksymalna różnica - czarny tekst na białym tle). Im wyższy współczynnik, tym łatwiej odróżnić tekst od tła.

Jaki kontrast kolorów jest wystarczający według WCAG?

Dla tekstu zwykłego minimum to 4.5:1 (poziom AA). Dla tekstu dużego - nagłówków od 18pt lub pogrubionego od 14pt - wystarczy 3:1. Dla ikon i elementów interfejsu również 3:1. Te progi zapewniają czytelność dla większości użytkowników, w tym osób z osłabionym wzrokiem.

Czy kontrast kolorów jest ważny dla osób z daltonizmem?

Tester sprawdza kontrast jasności, który jest istotny dla wszystkich użytkowników, w tym osób z daltonizmem. Daltonizm to jednak zaburzenie rozróżniania barw, nie jasności - dlatego oprócz kontrastu warto unikać problematycznych par kolorów (np. czerwony tekst na zielonym tle) i nie polegać wyłącznie na kolorze do przekazywania informacji.

Dlaczego kolor nie spełnia wymagań, mimo że dobrze go widzę?

Osobiste postrzeganie koloru zależy od ustawień monitora, oświetlenia w pomieszczeniu i indywidualnych możliwości wzrokowych. Standard WCAG opiera się na obiektywnym wzorze matematycznym, który uwzględnia różne zaburzenia widzenia. Kolor czytelny na jednym ekranie może być nieczytelny na innym lub dla innej osoby.

Czy muszę spełniać poziom AAA kontrastu?

Nie zawsze. Do poziomu AA (4.5:1 dla tekstu zwykłego) odwołuje się wiele polityk dostępności instytucji publicznych. Poziom AAA (7:1) zapewnia lepszą czytelność, ale jest trudniejszy do osiągnięcia. Dla kluczowych treści - np. ostrzeżeń, instrukcji bezpieczeństwa - warto celować w AAA.

Co to jest standard WCAG?

WCAG (Web Content Accessibility Guidelines) to międzynarodowe wytyczne dostępności treści internetowych, opracowane przez organizację W3C. Określają m.in. minimalne wartości kontrastu kolorów, strukturę nagłówków, obsługę z klawiatury i inne wymagania, które sprawiają, że strony są dostępne dla osób z różnymi niepełnosprawnościami.

Skąd wziąć kody kolorów ze swojej strony internetowej?

W przeglądarce (Chrome, Firefox, Edge) kliknij element prawym przyciskiem i wybierz Zbadaj. W zakładce Styles widoczne są kolory użyte na stronie, część z nich w zapisie rgb() — kod HEX wyliczysz z takiej wartości konwerterem RGB na HEX. Alternatywnie rozszerzenia przeglądarki, np. ColorZilla, pozwalają pobrać kolor dowolnego elementu bez wchodzenia w kod.

Które pary kolorów na stronie warto sprawdzić w pierwszej kolejności?

Najważniejsze do sprawdzenia: tekst na tle głównym, tekst na banerach i sekcjach kolorowych, przyciski (kolor tekstu i tła przycisku względem tła strony), linki oraz ikony. Szczególną uwagę warto zwrócić na elementy, które pojawiają się na różnych tłach w zależności od sekcji.

Czym różnią się wersje WCAG 2.0, 2.1 i 2.2?

WCAG 2.0 (2008) ustaliło podstawowe wymagania kontrastu. WCAG 2.1 (2018) dodało kryteria dla urządzeń mobilnych i osób z zaburzeniami poznawczymi. WCAG 2.2 (2023) wprowadza dodatkowe kryteria, ale progi kontrastu (4.5:1, 3:1, 7:1) pozostają takie same we wszystkich wersjach.

Czy narzędzie działa dla ciemnych motywów stron (dark mode)?

Tak. Narzędzie sprawdza współczynnik kontrastu między dowolnymi dwoma kolorami, niezależnie od tego, który jest jaśniejszy. W ciemnym motywie wpisujesz jasny kolor tekstu i ciemny kolor tła. Obowiązują te same progi WCAG - 4.5:1 dla tekstu zwykłego (AA) i 7:1 (AAA).