Przejdź do treści
HNarzędzia
pl
Kategorie

Kontrast kolorów - sprawdzanie WCAG 2.2 (AA i AAA) online

Wpisz kolor tekstu i tła (HEX, RGB lub HSL), a narzędzie od razu obliczy współczynnik kontrastu, pokaże, czy para spełnia WCAG 2.2 na poziomie AA i AAA, i zaproponuje najbliższy poprawny kolor.

  • Za darmo
  • Bez rejestracji
  • Prywatne
  • Działa lokalnie

HEX, rgb(), hsl() lub oklch(), np. #1a73e8 albo rgb(26, 115, 232)

HEX, rgb(), hsl() lub oklch(), np. #1a73e8 albo rgb(26, 115, 232)

Współczynnik kontrastu
4,48:1
Zakres od 1:1 (brak kontrastu) do 21:1 (czarny na białym)
APCA (informacyjnie)
Lc 71,1
tekst treści od ok. 16 px pogrubionego / 18 px. Projekt metody dla WCAG 3 - nie jest wymagany prawnie.

Podgląd

Duży tekst - nagłówek 24 px

Zwykły tekst akapitu (16 px). Szybki brązowy lis przeskakuje nad leniwym psem - zażółć gęślą jaźń.

Drobny tekst 13 px - przypisy, etykiety formularzy

PrzyciskPole formularza

Wymagania WCAG 2.2

KryteriumWymaganeWynik
AA - zwykły tekst (1.4.3)4,5:1 Nie spełnia
AA - duży tekst (1.4.3)3:1 Spełnia
AAA - zwykły tekst (1.4.6)7:1 Nie spełnia
AAA - duży tekst (1.4.6)4,5:1 Nie spełnia
Elementy interfejsu i grafika (1.4.11)3:1 Spełnia

Duży tekst to co najmniej 24 px (18 pt) zwykłej wagi albo 18,66 px (14 pt) pogrubiony.

Najbliższy kolor spełniający wymaganie

Zmień kolor tekstu
#767676 · przyciemniony · 4,54:1
Zmień kolor tła
#060606 · przyciemniony · 4,52:1

Zmieniamy tylko jasność w przestrzeni OKLCH - odcień i nasycenie zostają (w granicach sRGB).

Jak sprawdzić kontrast kolorów?

  1. 1.

    Podaj kolor tekstu

    Wpisz kolor w formacie HEX (np. #777777), rgb() lub hsl() albo wybierz go z palety.

  2. 2.

    Podaj kolor tła

    W ten sam sposób ustaw kolor tła. Przyciskiem ze strzałkami zamienisz kolory miejscami.

  3. 3.

    Odczytaj wynik

    Współczynnik kontrastu i tabela pokażą, czy para spełnia AA i AAA dla zwykłego i dużego tekstu oraz próg 3:1 dla elementów interfejsu.

  4. 4.

    Popraw kolor

    Jeśli kontrast jest za niski, wybierz cel (AA, AAA lub 3:1) i kliknij „Użyj” przy proponowanym, najbliższym kolorze tekstu lub tła.

Wymagania kontrastu WCAG 2.2 - tabela progów

WCAG 2.2 (tak samo jak 2.1) wymaga minimalnego współczynnika kontrastu między tekstem a tłem. Współczynnik przyjmuje wartości od 1:1 (ten sam kolor) do 21:1 (czarny na białym).

ElementAAAAA
Zwykły tekst4,5:1 (1.4.3)7:1 (1.4.6)
Duży tekst (od 24 px lub od 18,66 px pogrubiony)3:14,5:1
Ikony, obramowania pól, wykresy, stan fokusu3:1 (1.4.11)-

Progi nie podlegają zaokrąglaniu: para o kontraście 4,48:1 nie spełnia AA, mimo że po zaokrągleniu wyglądałaby na 4,5:1. Dlatego wynik tuż pod progiem (np. 4,499:1) narzędzie pokazuje jako 4,49:1, a nie 4,50:1. Wymaganie nie dotyczy logotypów, elementów nieaktywnych (disabled) i czysto dekoracyjnych.

Jak oblicza się kontrast? Wzór z przykładem

Kontrast to (L1 + 0,05) / (L2 + 0,05), gdzie L1 i L2 to luminancja względna jaśniejszego i ciemniejszego koloru. Luminancję liczy się z kanałów sRGB po linearyzacji: L = 0,2126·R + 0,7152·G + 0,0722·B - zieleń ma największy wpływ na postrzeganą jasność, niebieski najmniejszy.

Przykład: szary #777777 ma kanał 119/255 = 0,467, po linearyzacji 0,184, więc L = 0,184. Biel ma L = 1. Kontrast = (1 + 0,05) / (0,184 + 0,05) = 4,48:1 - za mało dla zwykłego tekstu w AA. Najjaśniejszy szary, który na białym tle spełnia 4,5:1, to #767676 (4,54:1).

Kogo w Polsce obowiązuje kontrast WCAG?

Podmioty publiczne (urzędy, szkoły, szpitale) muszą spełniać WCAG 2.1 na poziomie AA na mocy ustawy z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Od 28 czerwca 2025 r. wymagania dostępności - w praktyce również WCAG na poziomie AA przez normę EN 301 549 - obejmują też wiele firm prywatnych: sklepy internetowe, banki, przewoźników i dostawców e-booków. Podstawą jest ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (wdrożenie Europejskiego Aktu o Dostępności). Mikroprzedsiębiorstwa świadczące usługi są z niej zwolnione.

WCAG 2.2 nie zmieniło progów kontrastu względem 2.1, więc para kolorów zgodna z 2.2 spełnia też 2.1.

Najczęstsze błędy z kontrastem

  • Jasnoszary tekst na białym - modne #999 lub #aaa dają tylko 2,85:1 i 2,32:1.
  • Placeholder jako etykieta - domyślny szary tekst podpowiedzi w polach często ma kontrast poniżej 4,5:1.
  • Biały tekst na kolorowym przycisku - np. biały na #4A90E2 to ok. 3,3:1, wystarczy tylko dla dużego tekstu.
  • Obramowania pól formularza - ramka #ddd na białym (1,36:1) nie spełnia 3:1 z kryterium 1.4.11.
  • Tekst na zdjęciu - kontrast trzeba sprawdzić w najjaśniejszym miejscu tła; pomaga półprzezroczysta nakładka.

Podpowiedź koloru zmienia tylko jasność w przestrzeni OKLCH, więc niebieski przycisk pozostaje niebieski - jest tylko ciemniejszy lub jaśniejszy. Kolory do kodu przeliczysz w konwerterze kolorów.

APCA - nowa metoda z projektu WCAG 3

APCA (Accessible Perceptual Contrast Algorithm) lepiej niż wzór z WCAG 2 oddaje to, jak widzimy jasny tekst na ciemnym tle i cienkie fonty. Wynik podaje się jako Lc od ok. −108 do 106: około 75 wystarcza dla tekstu ciągłego, 60 dla treści, 45 dla dużych nagłówków. Znak minus oznacza jasny tekst na ciemnym tle. APCA jest wciąż projektem i nie jest wymagana prawnie - zgodność ocenia się według WCAG 2.x, a Lc pokazujemy wyłącznie informacyjnie.

Najczęściej zadawane pytania

Jaki kontrast jest wymagany przez WCAG?

+
Na poziomie AA zwykły tekst wymaga co najmniej 4,5:1, duży tekst (od 24 px lub 18,66 px pogrubiony) 3:1, a ikony i obramowania elementów interfejsu 3:1. Poziom AAA wymaga 7:1 dla zwykłego i 4,5:1 dla dużego tekstu.

Czy #777 na białym tle spełnia WCAG?

+
Nie dla zwykłego tekstu - kontrast wynosi 4,48:1, a wymagane jest 4,5:1. Wystarczy przyciemnić kolor do #767676 (4,54:1). Dla dużego tekstu i ikon #777 jest wystarczający.

Czy można zaokrąglić 4,48 do 4,5?

+
Nie. Progi WCAG są wartościami minimalnymi bez zaokrąglania, więc 4,499:1 nadal nie spełnia wymogu 4,5:1.

Co to jest duży tekst według WCAG?

+
Tekst o rozmiarze co najmniej 18 pt (24 px) zwykłej wagi albo 14 pt (ok. 18,66 px) pogrubiony. Dla takiego tekstu wystarczy kontrast 3:1 (AA) lub 4,5:1 (AAA).

Czy kontrast dotyczy logo i nieaktywnych przycisków?

+
Nie. WCAG zwalnia z wymogu kontrastu logotypy, tekst będący częścią dekoracji oraz elementy nieaktywne (disabled). Aktywne przyciski, ikony i ramki pól muszą mieć co najmniej 3:1.

Czym różni się WCAG 2.2 od 2.1 w kwestii kontrastu?

+
Niczym - progi 4,5:1, 3:1 i 7:1 są identyczne. WCAG 2.2 dodało inne kryteria, m.in. dotyczące widoczności fokusu i wielkości celu dotyku.

Jak sprawdzić kontrast koloru z przezroczystością?

+
Wpisz kolor jako rgba() lub #RRGGBBAA. Narzędzie nałoży go na kolor tła (a przezroczyste tło na biel) i policzy kontrast dla koloru wynikowego, tak jak zobaczy go użytkownik.

Aktualizacja: