1. Wpisz kolor tekstu
Wpisz kod koloru (np. #333333) w pole tekstowe lub kliknij próbnik kolorów i wybierz kolor wizualnie.
Jak sprawdzić czytelność kolorów?
Instrukcja korzystania z narzędzia do sprawdzania czytelności kolorów. Dowiesz się, jak wpisać kolory, jak interpretować wyniki i jak użyć funkcji Dopasuj do automatycznej korekty.
Jak sprawdzić czytelność kolorów?
Sprawdzenie zajmuje kilka sekund:
2. Wpisz kolor tła
Analogicznie wprowadź kolor tła. Może to być kolor sekcji, bloku lub całej strony.3. Sprawdź wynik
Narzędzie obliczy współczynnik kontrastu i pokaże, czy spełniasz wymagania dla tekstu zwykłego, dużego i ikon.4. Dostosuj kolory
Jeśli kontrast jest za niski — użyj funkcji Dopasuj, żeby narzędzie zaproponowało poprawiony kolor.
Jakie formaty kolorów są obsługiwane?
Narzędzie obsługuje wszystkie popularne formaty zapisu kolorów w CSS:
HEX
Format szesnastkowy — najpopularniejszy w projektowaniu stron. Zaczyna się od znaku # i zawiera 3 lub 6 znaków (cyfry 0-9 i litery A-F).
#fff— biały (skrócona forma)#ffffff— biały (pełna forma)#1a73e8— niebieski
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łyrgba(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 — każdy parametr jest niezależny.
hsl(0, 0%, 100%)— białyhsla(217, 91%, 60%, 0.9)— niebieski z 90% krycia
Wskazówka: Jeśli pracujesz w programie graficznym (Figma, Adobe XD, Photoshop), możesz skopiować kolor w dowolnym z tych formatów i wkleić bezpośrednio do narzędzia.
Współczynnik kontrastu
8.59:1
Tekst zwykły
AA (min. 4.5:1)AAA (min. 7:1)
Przykładowy tekst zwykły
Tekst duży
AA (min. 3:1)AAA (min. 4.5:1)
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 nagłówków, przycisków, wyróżnień.
- Ikona — wymaga kontrastu 3:1 (AA). Dotyczy ikon i elementów graficznych interfejsu.
Zielony badge oznacza spełniony wymóg. Czerwony badge oznacza, że kontrast jest za niski i wymaga poprawy.
Jak działa funkcja Dopasuj?
Funkcja Dopasuj automatycznie szuka wariantu koloru tekstu, który spełni wybrany próg kontrastu:
- Wybierz cel dopasowania — z listy rozwijanej wybierz, jaki poziom kontrastu chcesz osiągnąć (np. AA dla tekstu zwykłego wymaga 4.5:1, AAA dla tekstu dużego wymaga 4.5:1).
- Kliknij przycisk Dopasuj — narzędzie przeszuka warianty jasności koloru tekstu.
- Sprawdź propozycję — jeśli narzędzie znajdzie odpowiedni wariant, wyświetli go wraz z obliczonym współczynnikiem kontrastu.
- Zastosuj lub skopiuj — kliknij Ustaw, żeby użyć zaproponowanego koloru jako nowego koloru tekstu, lub skopiuj kod koloru do schowka.
Algorytm zachowuje odcień (hue) i nasycenie (saturation) oryginalnego koloru, zmieniając tylko jasność (lightness). Dzięki temu proponowany kolor jest jak najbardziej zbliżony do oryginału, ale już zgodny z wybranym poziomem WCAG.
Uwaga: Nie zawsze możliwe jest znalezienie odpowiedniego wariantu — np. gdy tło jest bardzo jasne, a kolor tekstu również jasny w tym samym odcieniu, może nie istnieć wariant spełniający wymagania bez zmiany odcienia.
Co oznaczają poziomy AA i AAA w standardzie WCAG?
WCAG (Web Content Accessibility Guidelines) definiuje dwa główne poziomy zgodności dla kontrastu kolorów:
Poziom AA — standard minimalny
Poziom AA jest uznawany za minimalny akceptowalny standard dostępności. Większość przepisów prawnych dotyczących dostępności (np. dyrektywa UE o dostępności stron internetowych) wymaga właśnie tego poziomu.
- Tekst zwykły: kontrast co najmniej 4.5:1
- Tekst duży (18pt+ lub 14pt pogrubiony): kontrast co najmniej 3:1
- Elementy graficzne UI (ikony, przyciski): kontrast co najmniej 3:1
Poziom AAA — standard rozszerzony
Poziom AAA zapewnia lepszą czytelność dla osób z poważniejszymi wadami wzroku. Nie jest wymagany prawnie, ale zalecany dla kluczowych treści.
- Tekst zwykły: kontrast co najmniej 7:1
- Tekst duży: kontrast co najmniej 4.5:1
Która wartość oznacza lepszy kontrast? Wyższa. Skala idzie od 1:1 (brak kontrastu — np. biały tekst na białym tle) do 21:1 (maksymalny kontrast — czarny tekst na białym tle lub odwrotnie).
Najczęstsze problemy i rozwiązania
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ść.
Najczęstsze pytania o sprawdzanie czytelności kolorów
Wypróbuj narzędzie do sprawdzania czytelności kolorów
Teraz, gdy wiesz jak korzystać z narzędzia, możesz sprawdzić kolory na swojej stronie. Jeśli potrzebujesz pomocy z dostępnością i optymalizacją strony — skontaktuj się z nami. Zajmujemy się tworzeniem stron internetowych zgodnych ze standardami dostępności.
Sprawdź inne darmowe narzędzia online
Konwerter JPG/PNG na WebP
Zmniejsz wagę zdjęć bez utraty jakości. Konwertuj JPG i PNG do WebP i przyspiesz ładowanie strony.
Edytor zdjęć online
Przygotuj idealny kadr pod social media lub stronę WWW. Wybierz gotowy format lub wpisz własne wymiary.
Generator favicon
Z jednego obrazu wygeneruj favicon.ico oraz ikony PNG zgodne z wymaganiami przeglądarek i Lighthouse.
Licznik meta title i description
Sprawdź liczbę znaków i podgląd wyniku w Google. Uniknij uciętych tytułów i opisów w wynikach wyszukiwania.
Licznik słów i znaków
Sprawdź długość tekstu i oceń, czy jest odpowiednia dla strony głównej, opisu usługi, artykułu czy opisu produktu.
Generator stopki mailowej
Zbuduj profesjonalny podpis e-mail w kilka minut. Skopiuj gotowy kod HTML do Gmaila lub Outlooka.
Sprawdź czytelność kolorów
Sprawdź czy kolory tekstu i tła są czytelne. Narzędzie oblicza kontrast według WCAG i pomoże dobrać odpowiedni kolor.
Ekstraktor kolorów z obrazu
Wgraj zdjęcie lub logo, a narzędzie wyciągnie dominujące kolory. Skopiuj kody wygenerowanych kolorów jednym kliknięciem.
Generator palet kolorów
Wybierz jeden kolor i wygeneruj 9 palet kolorów: monochromatyczną, komplementarną, triadyczną i inne.
Darmowy generator kodów QR
Stwórz kod QR do strony, wizytówki vCard, menu lub ulotki. Eksport PNG i SVG, bez logowania, bez limitu.
Potrzebujesz strony zgodnej ze standardami dostępności?
Sprawdzimy czytelność kolorów, hierarchię treści i inne elementy dostępności na Twojej stronie. Tworzymy strony, które są czytelne dla wszystkich użytkowników.