Narzędzie do sprawdzania kontrastu oblicza współczynnik kontrastu WCAG 2.1 między dwoma kolorami i ocenia je pod kątem progów AA/AAA zarówno dla tekstu normalnego, jak i dużego. Podgląd na żywo pokazuje tekst wyrenderowany w wybranych kolorach, a przycisk „pobierz tło strony” pozwala pobrać próbkę z bieżącej strony.
Dostępność cyfrowa staje się coraz częściej wymogiem — zgodność z WCAG jest prawnie wymagana w wielu jurysdykcjach, a nawet tam, gdzie nie jest, słaby kontrast zniechęca użytkowników. Narzędzie do sprawdzania kontrastu natychmiast informuje, czy dowolne dwa kolory spełniają standardy WCAG. Wybierz kolor pierwszego planu i tła za pomocą próbnika lub wklej wartości hex; narzędzie oblicza współczynnik kontrastu przy użyciu oficjalnej formuły luminancji WCAG i ocenia go według czterech progów: AA normalny (≥4,5:1), AA duży (≥3:1), AAA normalny (≥7:1) oraz AAA duży (≥4,5:1). Każdy próg jest opatrzony jasną plakietką Zaliczone/Niezaliczone. Podgląd na żywo renderuje duży i normalny tekst w wybranych kolorach, pozwalając zobaczyć rzeczywisty efekt wizualny. Wygodny przycisk pobiera próbkę koloru tła bieżącej strony — przydatne przy sprawdzaniu kombinacji kolorów w działającej witrynie. Wszystko działa lokalnie w przeglądarce, bez przesyłania danych.
Używa oficjalnej formuły luminancji WCAG do obliczenia współczynnika kontrastu. Wynik jest dokładny i zgodny z każdym certyfikowanym testerem dostępności.
Wynik zaliczony/niezaliczony dla AA normalnego (≥4,5:1), AA dużego (≥3:1), AAA normalnego (≥7:1) i AAA dużego (≥4,5:1) — wszystko widoczne w jednej tabeli.
Renderuje rzeczywisty duży i normalny tekst w wybranych kolorach, dzięki czemu widzisz efekt wizualny obok wyniku liczbowego.
Jednym kliknięciem pobiera próbkę obliczonego koloru tła (body) bieżącej strony — przydatne do testowania rzeczywistych kombinacji.
Wpisz wartość hex lub użyj natywnego próbnika kolorów. Wartości synchronizują się dwukierunkowo podczas edycji.
Jedno kliknięcie zamienia kolor pierwszego planu z tłem — przydatne przy sprawdzaniu odwróconych motywów lub stanów najechania (hover).
Przed zatwierdzeniem palety kolorów sprawdź każdy kolor tekstu względem tła, aby zapewnić zgodność z WCAG AA — unikniesz poprawek na etapie produkcji.
Użyj funkcji „pobierz tło strony” na żywej witrynie, a następnie wklej faktyczny kolor tekstu — znajdź naruszenia dostępności w kilka minut bez otwierania Lighthouse.
Gdy marka wybierze kolor, który może nie spełniać wymogów dostępności, użyj testera, aby znaleźć najbliższy zgodny wariant (ciemniejszy/jaśniejszy odcień).
Upewnij się, że kolory stanów najechania, aktywności i wyłączenia (disabled) nadal spełniają wymogi kontrastu, a nie tylko kolory domyślne.
Ciemne motywy często zawodzą przy szarym tekście na szarym tle. Sprawdź swoje najciemniejsze szarości względem tła, aby wyłapać te błędy.
Kliknij ikonę kontrastu w panelu DevSuite Pro. Otworzy się panel z polami koloru pierwszego planu i tła.
Użyj próbnika kolorów lub wklej wartość hex dla każdego pola. Podgląd na żywo aktualizuje się przy każdej zmianie.
Duża liczba (np. 4,8:1) to współczynnik kontrastu. Im wyższy, tym lepiej. 3 to absolutne minimum; 4,5 to cel dla normalnego tekstu.
Plakietki Zaliczone/Niezaliczone dla standardów AA i AAA oraz rozmiarów tekstu pokazują na pierwszy rzut oka, jakie wymagania spełnia Twoja kombinacja.
Jeśli test nie przechodzi, zmodyfikuj kolory. Przyciemnij pierwszy plan lub rozjaśnij tło (lub odwrotnie), aż wybrany poziom pokaże status Zaliczone.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
