Tester kontrastu
Sprawdź czytelność tekstu na tle zgodnie z międzynarodowymi standardami dostępności WCAG 2.1.
Przykładowy nagłówek główny
Este párrafo demuestra cómo se percibe el texto corriente bajo la combinación de color seleccionada. Una buena relación de contraste evita la fatiga visual y permite que los usuarios lean con claridad en cualquier dispositivo.
Jak sprawdzić kontrast kolorów zgodnie z normą WCAG 2.1
Dostępność cyfrowa (a11y) to fundamentalny standard współczesnego projektowania stron i aplikacji. Niedostateczny kontrast między tekstem a tłem uniemożliwia czytanie treści osobom słabowidzącym, a w jasnym świetle słonecznym utrudnia odbiór każdemu użytkownikowi.
Nasz tester kontrastu WCAG oblicza precyzyjny stosunek luminancji względnej między dwoma kolorami i natychmiast weryfikuje spełnienie kryteriów sukcesu na poziomach AA i AAA dla tekstu zwykłego, nagłówków oraz elementów interfejsu.
Porównanie przed i po
Sprawdź różnicę w rozmiarze pliku, ostrości i szybkości działania.
Ryzyko odrzucenia
Niepewna czytelność i potencjalne kary za brak dostępności
- •Tekst wygląda czytelnie tylko na skalibrowanym monitorze projektanta.
- •Brak zgodności z europejskimi normami dostępności cyfrowej (EAA).
- •Trudności w czytaniu na ekranach smartfonów w pełnym słońcu.
Oficjalny wskaźnik
Certyfikowana czytelność na każdym typie ekranu
- ✓Dokładne obliczenie współczynnika kontrastu (np. 7.5:1).
- ✓Natychmiastowy podgląd dla małego tekstu, dużych nagłówków i ikon.
- ✓Automatyczna propozycja korekty odcienia dla uzyskania wymaganego progu.
Kiedy przeprowadzać audyt kontrastu
Tworzenie Design Systemu
Zdefiniuj bezpieczne pary kolorów dla przycisków, komunikatów o błędach i badge'y przed wdrożeniem do kodu.
Audyty dostępności stron www
Przygotuj serwis internetowy do wymogów Europejskiego Aktu o Dostępności (EAA) i norm WCAG.
Etykiety i formularze
Zadbaj, aby szare teksty pomocnicze i placeholdery w formularzach nie znikały użytkownikom z oczu.
Często zadawane pytania o kontrast WCAG
Dla zwykłego tekstu poziom WCAG AA wymaga współczynnika co najmniej 4.5:1. Dla dużego tekstu (od 18pt lub 14pt pogrubionego) minimum wynosi 3:1. Poziom AAA wymaga 7:1.
Tak, możesz zweryfikować kontrast obramowań pól formularzy, ikon nawigacyjnych i przełączników zgodnie z wytyczną WCAG 1.4.11 (minimum 3:1).