appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/plJak sprawdzić kontrast tekstu wybranego koloru przed użyciem go w interfejsieLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Naucz się sprawdzać współczynnik kontrastu WCAG i dostosowywać kolory w HSL, aby Twój interfejs był zawsze dostępny i czytelny.
ProjektowaniearticleAppStoryoDlaczego kontrast ma znaczenieOkoło 300 milionów ludzi na świecie ma jakąś formę zaburzenia widzenia barw. Projektowanie z dobrym kontrastem to nie tylko kwestia estetyki — w wielu regionach jest to wymóg prawny. Standardem odniesienia jest WCAG 2.1, który definiuje dwa główne poziomy:
Poziom AA: współczynnik kontrastu 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (18px lub 14px pogrubiony).
Poziom AAA: 7:1 dla normalnego tekstu.
Typowe błędyNajczęstsze problemy to: jasny szary na białym tle (może wynosić zaledwie 1,5:1), kolorowe przyciski z białym tekstem, które wyglądają czytelnie, ale nie przechodzą AA, oraz kolory, które przechodzą w trybie jasnym, ale zawodzą w trybie ciemnym.
Praktyczny przepływ pracyPobierz kolor tła. Otwórz Color Picker Camera: HEX RGB, skieruj kamerę na powierzchnię i dotknij, aby natychmiast uzyskać wartość HEX. Aplikacja wyświetla też HSL.
Pobierz kolor tekstu w ten sam sposób.
Sprawdź parę w narzędziu do sprawdzania kontrastu — np. WebAIM Contrast Checker, panel Dostępność w DevTools lub wtyczka Contrast w Figmie.
Dostosuj jasność w HSL, aż stosunek przejdzie. Zachowaj H i S, obniż L, aby przyciemnić kolor bez zmiany jego wizualnej tożsamości.
Dlaczego HSL jest idealny do dostosowywania kontrastuRGB i HEX nie dają intuicyjnej kontroli nad jasnością. HSL rozdziela odcień, nasycenie i jasność. Color Picker Camera: HEX RGB wyświetla HEX, RGB, HSL i CMYK jednocześnie — bez ręcznych konwersji.
Przykład z życia wziętyPrzycisk w średnim niebieskim (#4A90E2) z białym tekstem ma kontrast około 3,1:1 — nie przechodzi AA. Zmiana na ciemny granatowy (#1A3A6B) podnosi stosunek do 9,4:1, przekraczając nawet AAA.
Uwaga o WCAG 3.0 i APCAKolejna generacja wytycznych wprowadza APCA — bardziej szczegółowy model kontrastu percepcyjnego. WCAG 2.1 AA pozostaje dziś obowiązującym standardem, ale testowanie pod kątem APCA warto rozważyć dla długoterminowych projektów.
Pobierz Color Picker Camera: HEX RGB za darmo na iOS lub Android — bez reklam, bez śledzenia i działa całkowicie offline.