Sprawdzanie kontrastu kolorów

Szary napis na białym tle wygląda elegancko na dużym monitorze, ale na telefonie w słońcu znika. Sprawdzanie kontrastu kolorów pozwala przed publikacją ocenić, czy tekst na stronie, grafice, okładce rolki albo miniaturze YouTube da się wygodnie przeczytać. Narzędzie liczy współczynnik kontrastu według WCAG 2.2, pokazuje progi AA i AAA, proponuje najbliższy kolor, który je spełnia, i sprawdza napis na prawdziwym zdjęciu.

Jak sprawdzić kontrast tekstu

1. Wpisz kolor tekstu i kolor tła (HEX albo RGB) lub wybierz je z próbnika.
2. Odczytaj współczynnik kontrastu i sprawdź w tabeli, które kryteria WCAG spełnia para kolorów.
3. Zobacz podgląd zwykłego, dużego i pogrubionego tekstu oraz przycisku z obramowaniem.
4. Jeśli kontrast jest za niski, kliknij „Użyj” przy propozycji - narzędzie zmieni jasność koloru tak mało, jak się da.
5. Dodaj miniaturę albo zdjęcie, wpisz napis i sprawdź, jak wypada w najsłabszym miejscu.

Sprawdzanie kontrastu kolorów według WCAG

Duży tekst to według WCAG co najmniej 18 punktów albo 14 punktów pogrubionych, czyli w przybliżeniu 24 px i 18,7 px na stronie. Wymagania nie dotyczą logotypów, napisów czysto dekoracyjnych i elementów nieaktywnych. Wynik zaokrąglamy w dół, bo tak każe definicja progu: para o kontraście 4,49:1 nie spełnia AA, nawet jeśli po zaokrągleniu wyglądałaby na 4,5.

Jak liczy się kontrast

Dla każdego koloru liczymy luminancję względną - jasność odczuwaną przez oko. Wartości R, G i B zamieniamy na liniowe (wartość/255; do 0,04045 dzielimy przez 12,92, powyżej stosujemy wzór ((c + 0,055) / 1,055)^2,4), a potem sumujemy z wagami 0,2126 R + 0,7152 G + 0,0722 B. Zieleń ma największą wagę, bo oko jest na nią najbardziej czułe. Kontrast to (L1 + 0,05) / (L2 + 0,05), gdzie L1 jest jaśniejszym kolorem. Wynik mieści się od 1:1 (ten sam kolor) do 21:1 (czarny na białym). Popularny szary #777777 na białym daje 4,478:1, czyli tuż poniżej progu (narzędzie pokaże 4,47:1) - wystarczy #767676, żeby było 4,54:1.

Wzór WCAG 2 ma znane słabości: zawyża kontrast ciemnych par i nie uwzględnia grubości ani wielkości czcionki. Dlatego jako możliwy następca proponowany jest model APCA, brany pod uwagę przy pracach nad WCAG 3. Nie jest jednak częścią żadnego obowiązującego standardu - punktem odniesienia w przepisach i normach jest WCAG 2.

Napis na zdjęciu i miniaturze

Na zdjęciu tło ma setki kolorów, więc jeden współczynnik nie wystarczy. Narzędzie porównuje kolor napisu z każdym pikselem pod nim i pokazuje najsłabsze miejsce oraz wartość, którą osiąga 90% powierzchni. Miniaturę na YouTube czy okładkę rolki ogląda się w małym rozmiarze, często w ruchu, więc warto celować w 4,5:1 nawet przy dużym napisie. Jeśli kontrast spada, pomaga półprzezroczysty pasek pod napisem, obrys liter, cień albo przesunięcie napisu na spokojniejszy fragment zdjęcia. Kolory do wypróbowania znajdziesz w palecie kolorów ze zdjęcia, a gotową miniaturę obejrzysz w podglądzie miniatury YouTube.

Kontrast ma też znaczenie prawne. Od 28 czerwca 2025 roku wiele sklepów internetowych i usług cyfrowych w Unii Europejskiej musi spełniać wymagania dostępności (Europejski akt o dostępności, w Polsce ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze). W praktyce punktem odniesienia jest norma EN 301 549, oparta na WCAG 2.1 na poziomie AA. Mikroprzedsiębiorcy świadczący usługi są z tego obowiązku zwolnieni. To ogólna informacja, nie porada prawna.

Najczęstsze pytania

Źródła

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2 - kryteria 1.4.3, 1.4.6 i 1.4.11 oraz definicje „luminancja względna”, „współczynnik kontrastu” i „duży tekst”.
• W3C: Understanding Success Criterion 1.4.3: Contrast (Minimum).
• Dyrektywa (UE) 2019/882 (Europejski akt o dostępności) i ustawa z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.
• W3C: WCAG 3 Introduction (status prac, październik 2026) oraz opis APCA w repozytorium autora (Myndex, SAPC-APCA).