Jak sprawdzić, czy kolory tekstu i tła spełniają wymagania WCAG?

Wpisz kody hex w polach Kolor tekstu i Kolor tła lub użyj próbników kolorów. Współczynnik kontrastu pojawi się z oznaczeniem Zaliczone lub Niezaliczony dla tekstu normalnego i dużego na poziomie AA i AAA oraz dla komponentów UI.

Jaki współczynnik kontrastu jest wymagany dla WCAG AA?

AA wymaga 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego. AAA wymaga 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego. Komponenty UI i obiekty graficzne wymagają 3:1.

Co liczy się jako duży tekst?

Narzędzie traktuje tekst zwykły o rozmiarze 18pt (24px) lub pogrubiony o rozmiarze 14pt (18,66px) jako duży. Mniejszy tekst musi spełniać wyższe progi dla tekstu normalnego.

Moje kolory nie przechodzą AA. Jak je naprawić?

Użyj sugestii jednym kliknięciem: Napraw kolor tekstu lub Napraw tło. Dostosowują one jasność, zachowując ten sam odcień, aż para osiągnie 4,5:1.

Jakie formaty kolorów są akceptowane i czy mogę pobrać kolor z ekranu?

Akceptowane są 3- i 6-cyfrowe wartości hex, takie jak #abc lub #1e293b. Przycisk Wybierz kolor z ekranu pojawia się w przeglądarkach obsługujących API EyeDropper, takich jak Chromium.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek.

🌓

Sprawdzanie kontrastu kolorów WCAG za darmo

Sprawdź, czy dwa kolory spełniają standardy kontrastu WCAG AA i AAA pod kątem dostępności. Podgląd na żywo w wielu rozmiarach tekstu z automatycznymi sugestiami przy zbyt niskim kontraście.

Działa w przeglądarceBez rejestracji, bez wyskakujących okienekLogowanie nie jest wymaganeZa darmo na zawsze

Działa offline po wczytaniu

Kolor tekstu

Kolor tła

Duży nagłówek

Średni tekst podstawowy (18px) do czytania i treści.

Normalny tekst podstawowy (16px) do akapitów.

Mały tekst podstawowy (14px) do podpisów i metadanych.

14,63:1

Współczynnik kontrastu

✓WCAG AA — Tekst normalny

Wymaga 4.5:1 · Masz 14,63:1

✓WCAG AA — Tekst duży

Wymaga 3.0:1 · Masz 14,63:1

✓WCAG AAA — Tekst normalny

Wymaga 7.0:1 · Masz 14,63:1

✓WCAG AAA — Tekst duży

Wymaga 4.5:1 · Masz 14,63:1

✓Komponenty UI / obiekty graficzne

Wymaga 3.0:1 · Masz 14,63:1

Szybkie szablony

Na podstawie wytycznych kontrastu WCAG 2.1. Duży tekst = 18pt (24px) normalny lub 14pt (18,66px) pogrubiony. Kody hex aktualizują się w obu kierunkach: wpisz hex lub wybierz kolor — oba pola pozostają zsynchronizowane.

Typowe zastosowania

Inspekcja Stron Internetowych w Celu Zgodności WCAGSprawdzić, czy kolory tekstu witryny spełniają standardy kontrastu WCAG AA lub AAA dla dostępności.
Zweryfikuj Kombinacje Kolorów MarkiPrzetestuj zestawienia palet kolorów marki, aby upewnić się, że działają w projektach UI dostępnych.
Testuj Palety Kolorów Trybu CiemnegoJasny tekst na ciemnych tłach wciąż może nie mieć wystarczającego kontrastu - sprawdź tutaj zestawienia palet trybu ciemnego.
Kombinacje Kolorów dla Materiałów DrukowanychPlakaty, znaki i materiały drukowane również wymagają czytelnego kontrastu - szczególnie dla starszych czytelników.
Projektuj Dostępne Kolory PrzyciskówUpewnij się, że wezwania do działania, przyciski akcji i linki przechodzą WCAG względem ich tła.

Jak to działa

Sprawdzanie kontrastu działa w całości w przeglądarce według algorytmu luminancji względnej WCAG 2.1 — bez biblioteki i serwera, tylko ręcznie napisana matematyka dokładnie zgodna ze specyfikacją. Każdy wynik aktualizuje się w czasie rzeczywistym podczas wpisywania lub wybierania koloru.

1
Wprowadzanie hex i normalizacja
Akceptowane są wartości hex 3-cyfrowe (#abc) i 6-cyfrowe (#aabbcc), normalizowane do pełnych trójek RGB. Nieprawidłowe dane są od razu odrzucane, a nie po cichu zastępowane czernią, więc zamiast mylącego wyniku pozytywnego pojawia się czerwona ramka.
2
Obliczanie luminancji WCAG
Każdy kolor jest przeliczany na luminancję względną według wzoru WCAG 2.1: wartości kanałów sRGB są linearyzowane odcinkową korekcją gamma (dzielenie przez 12,92 poniżej 0,03928, podnoszenie do potęgi 2,4 powyżej), a następnie ważone jako 0,2126R + 0,7152G + 0,0722B.
3
Współczynnik kontrastu i sprawdzanie zgodności
Współczynnik kontrastu jest obliczany jako (jaśniejszy + 0,05) / (ciemniejszy + 0,05) i sprawdzany względem wszystkich pięciu progów WCAG: AA dla zwykłego tekstu (4,5:1), AA dla dużego tekstu (3:1), AAA dla zwykłego tekstu (7:1), AAA dla dużego tekstu (4,5:1) i komponenty interfejsu (3:1). Wyniki aktualizują się przy każdym naciśnięciu klawisza.
4
Propozycje poprawek z zachowaniem odcienia
Gdy para nie spełnia WCAG AA, narzędzie przeszukuje przestrzeń jasności HSL — oddalając się od pierwotnej jasności w obu kierunkach — aby znaleźć najbliższy wariant każdego koloru, który osiąga 4,5:1 przy zachowaniu tego samego odcienia i nasycenia. Dostępne jest też API EyeDropper (Chromium), aby pobrać dowolny kolor bezpośrednio z ekranu.

Powiązane narzędzia

👁️

Symulator daltonizmu

Sprawdź, jak Twój projekt wygląda dla osób z wadami widzenia barwnego. Symuluje protanopię, deuteranopię, tritanopię, achromatopsję i łagodniejsze anomalie.

WypróbujPliki pozostają lokalnie

📐

Jaka jest moja rozdzielczość ekranu

Zobacz rozdzielczość ekranu w pikselach CSS i rzeczywistych, rozmiar okna, współczynnik pikseli, głębię kolorów, HDR, obsługę dotyku i częstotliwość odświeżania, a następnie skopiuj wszystko.

Wypróbuj

🖥️

Test martwych pikseli

Sprawdź ekran pod kątem martwych lub zaciętych pikseli za pomocą pełnoekranowych kolorów: czarnego, białego, czerwonego, zielonego, niebieskiego i szarego oraz opcjonalnego narzędzia do naprawy zaciętych pikseli.