Dlaczego kontrast ma znaczenie

Okoł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łędy

Najczę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 pracy

  1. Pobierz 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.
  2. Pobierz kolor tekstu w ten sam sposób.
  3. Sprawdź parę w narzędziu do sprawdzania kontrastu — np. WebAIM Contrast Checker, panel Dostępność w DevTools lub wtyczka Contrast w Figmie.
  4. 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 kontrastu

RGB 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ęty

Przycisk 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 APCA

Kolejna 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.