Wróć do wszystkich narzędzi

Contrast Grid

Contrast Grid to darmowe narzędzie internetowe, które sprawdza kontrast wszystkich możliwych kombinacji kolorów z podanej palety naraz i przedstawia je w formie macierzy (siatki). Zamiast weryfikować pojedynczą parę „tekst na tle”, wklejasz całą paletę projektu i od razu widzisz, które zestawienia spełniają WCAG, a których nie wolno używać.

Narzędzie jest rozwijane przez Directed Edges (dawniej EightShapes) i jest szeroko stosowane przy budowaniu systemów projektowych (design systems) oraz dokumentowaniu palet barw.

Contrast Grid pełni inną rolę niż wtyczki z pipetą (np. WCAG Color Contrast Checker) czy narzędzia skanujące stronę (WAVE, Lighthouse). Tamte badają gotową, wdrożoną stronę – punkt po punkcie. Contrast Grid działa na poziomie palety, jeszcze przed wdrożeniem: pozwala zaprojektować zestaw kolorów, w którym niedostępne kombinacje są od początku wykluczone. To narzędzie zapobiegania błędom, a nie ich wykrywania.

Skąd pobrać?

Narzędzia nie trzeba pobierać ani instalować – to darmowa aplikacja internetowa działająca w każdej nowoczesnej przeglądarce. Nie wymaga rejestracji ani konta.

Do konkretnie jakich podpunktów WCAG 2.2 na poziomie AA przydaje się to narzędzie w testowaniu?

Contrast Grid oblicza współczynnik kontrastu według wzoru WCAG na podstawie wartości kolorów, dlatego dotyczy wyłącznie kryteriów mierzalnych algorytmicznie. Progi kontrastu dla kryterium 1.4.3 nie zmieniły się od WCAG 2.0, więc wyniki narzędzia pozostają w pełni aktualne dla WCAG 2.2.

Nazwa KryteriumCo weryfikuje Contrast Grid?
1.4.3 Kontrast (minimalny) (Contrast (Minimum))Wszystkie zestawienia tekstu i tła z palety naraz. Oznaczenie AA (4.5+) to zaliczenie dla tekstu o normalnej wielkości, a AA18 – Large Text Only (3+) oznacza kombinację dopuszczalną wyłącznie dla dużego tekstu (min. 18pt lub 14pt pogrubione). DNP (Does Not Pass) to zestawienie niedopuszczalne dla żadnego tekstu.
1.4.11 Kontrast elementów nietekstowych (Non-text Contrast)Kontrast komponentów interfejsu (krawędzie pól formularzy, ramki przycisków, wskaźniki fokusu, ikony funkcjonalne, elementy wykresów) wymaga 3:1 – czyli tego samego progu co kolumna AA18. Narzędzie nie opisuje tego wprost, dlatego trzeba wiedzieć, że każda kombinacja oznaczona AA18 lub wyżej spełnia również 1.4.11.

Dodatkowo narzędzie oznacza poziom AAA (7+), co odpowiada kryterium 1.4.6 Kontrast (wzmocniony) na poziomie AAA – wykraczającemu poza wymagany poziom AA. Jest to przydatne, gdy projekt ma zapas na przyszłe zmiany albo gdy wymagania zamawiającego są ostrzejsze niż AA.

Jak testować?

Cała praca odbywa się na jednej stronie – narzędzie przelicza siatkę na bieżąco, bez przycisku „wyślij”.

  1. Zebranie palety: przygotuj listę wszystkich kolorów używanych w projekcie – z pliku Figma, ze zmiennych CSS, z dokumentacji marki. Uwzględnij nie tylko kolory tekstu i tła, ale też kolory obramowań, stanów (hover, focus, disabled) oraz komunikatów (błąd, sukces, ostrzeżenie).
  2. Wprowadzenie kolorów: w polu Rows wklej paletę – jeden kolor w każdej linii, w zapisie szesnastkowym, z opcjonalną etykietą po przecinku. Instrukcja narzędzia brzmi: „Include one color per line, with an optional comma-separated label”. Przykład: Etykiety warto uzupełniać zawsze – w raporcie z audytu „Tekst główny na Tło sekcji” jest czytelniejsze niż „#404040 na #F2F2F2”. 
    #FFFFFF, Biały
#F2F2F2, Tło sekcji
#404040, Tekst główny
#0F60B6, Link
#398EEA, Link – wariant jasny
  3. Wybór trybu siatki:
    • Pole Columns puste – narzędzie użyje tej samej listy w wierszach i kolumnach, tworząc kwadratową macierz wszystkich kombinacji. To tryb domyślny i najlepszy do audytu całej palety.
    • Pole Columns wypełnione – powstaje siatka prostokątna. Używaj jej, gdy chcesz sprawdzić konkretny scenariusz, np. tylko kolory tekstu (wiersze) na tylko dopuszczonych kolorach tła (kolumny), bez zaśmiecania wyniku kombinacjami, które nigdy nie wystąpią.
  4. Odczyt siatki: każde pole macierzy pokazuje obliczony współczynnik kontrastu oraz jego kwalifikację. Legenda narzędzia:
    • AAA (7+) – kontrast 7:1 lub wyższy (poziom AAA).
    • AA (4.5+) – kontrast 4.5:1 lub wyższy; to jest minimum dla zwykłego tekstu na poziomie AA.
    • AA18 – Large Text Only (3+) – kontrast od 3:1; wyłącznie dla dużego tekstu, a także wystarczający dla elementów nietekstowych (1.4.11).
    • DNP – Does Not Pass – kombinacja niedopuszczalna; nie wolno jej stosować dla treści.
  5. Filtrowanie wyników – najszybsza droga do listy błędów: w opcjach wyświetlania odznacz AAA, AA i AA18, pozostawiając samo DNP. Siatka pokaże wtedy wyłącznie kombinacje niedopuszczalne – to gotowa lista zakazanych par kolorów do przekazania projektantom i deweloperom. Analogicznie, pozostawienie tylko AA18 ujawnia pary, które ktoś może omyłkowo uznać za bezpieczne dla zwykłego tekstu.
  6. Zapisanie i udostępnienie wyniku: narzędzie generuje trwały adres URL (Persistent URL) z przyciskiem Copy to Clipboard – cała konfiguracja siatki (kolory, etykiety, filtry) zapisuje się w adresie. Skopiuj ten link do raportu z audytu, dokumentacji systemu projektowego lub zgłoszenia w systemie zadań. Odbiorca zobaczy dokładnie tę samą siatkę, bez konieczności ponownego wklejania kolorów. Nie twórz adresu ręcznie – zawsze korzystaj z linku wygenerowanego przez narzędzie, ponieważ zestaw parametrów zmienia się między wersjami.
  7. Weryfikacja na wdrożonej stronie: po ustaleniu bezpiecznych par kolorów sprawdź jeszcze rzeczywistą implementację narzędziem badającym stronę (np. WAVE, WCAG Color Contrast Checker, DevTools). Contrast Grid potwierdza, że paleta umożliwia zgodność – nie że kod jej rzeczywiście używa.

Czego to narzędzie nie sprawdza

Contrast Grid porównuje pary jednolitych, nieprzezroczystych kolorów. Poza jego zasięgiem pozostają sytuacje, które w praktyce są najczęstszym źródłem błędów kontrastu:

  • Przezroczystość i nakładanie warstw – kolor z kanałem alfa (np. rgba(), przygaszony stan „disabled”, półprzezroczysta nakładka) daje na ekranie inną wartość niż w palecie. Taki kolor trzeba najpierw obliczyć jako spłaszczony na docelowym tle i tę wartość podać narzędziu.
  • Tekst na zdjęciach, gradientach i wideo – nie ma tu jednego koloru tła, więc kontrast trzeba oceniać ręcznie, w najbardziej niekorzystnym miejscu kadru.
  • Rzeczywisty kod strony – narzędzie nie wie, jakie kolory faktycznie zostały zastosowane w HTML/CSS ani czy tekst jest wystarczająco duży, by skorzystać z progu 3:1.
  • Sposób użycia koloru – nie wykryje sytuacji, w której kolor jest jedynym nośnikiem informacji (kryterium 1.4.1 Użycie koloru). Nawet paleta o doskonałym kontraście nie ratuje komunikatu „pola zaznaczone na czerwono są błędne”.

Pamiętaj: Contrast Grid najlepiej działa na początku projektu i jako stały element dokumentacji systemu projektowego. Umieszczenie linku do siatki w dokumentacji palety sprawia, że projektanci i deweloperzy mają jedno źródło prawdy o dozwolonych zestawieniach – dzięki temu błędy kontrastu nie wracają w kolejnych iteracjach.

Dodatkowe linki

Wróć do wszystkich narzędzi