Tester schematów kolorów strony

Tester schematów kolorów UI – aplikuj paletę na makietę strony

Wybranie pięknej palety kolorów to jedno – zobaczenie jak wygląda na rzeczywistej stronie to drugie. Narzędzie nakłada twoją paletę (primary, secondary, background, text, accent) na responsywną makietę strony z nagłówkiem, kartami, formularzem i stopką.

Jak tester przelicza paletę na makietę

Narzędzie działa w trzech krokach: normalizacja kolorów, obliczenie kontrastu i przypisanie tokenów do elementów makiety. Każdy kolor z palety jest najpierw sprowadzany do jednej przestrzeni, czyli sRGB, niezależnie od tego, czy wpiszesz go jako HEX, RGB, HSL czy OKLCH. Dzięki temu ta sama barwa zapisana dwiema notacjami daje identyczny wynik, a nie dwie różne oceny.

Kontrast liczony jest według wzoru WCAG. Najpierw każdy kanał barwy przechodzi linearyzację: jeśli wartość kanału podzielona przez 255 wynosi nie więcej niż 0,04045, dzielimy ją przez 12,92, w przeciwnym razie podnosimy wyrażenie ((c + 0,055) / 1,055) do potęgi 2,4. Z tak otrzymanych składowych powstaje luminancja względna L = 0,2126·R + 0,7152·G + 0,0722·B. Wynikowy kontrast dwóch kolorów to iloraz (L jaśniejszego + 0,05) / (L ciemniejszego + 0,05), więc zawsze mieści się w przedziale od 1:1 do 21:1.

Ostatni krok to mapowanie tokenów na makietę. Primary trafia na tło przycisku CTA i akcenty, Secondary na badge, Background na tło sekcji, Surface na karty i pola formularza, Text oraz Muted na typografię, a kolory stanów na komunikaty walidacji. Makieta zbudowana jest na zmiennych CSS, dlatego podmiana jednego tokenu odświeża jednocześnie wszystkie elementy, które go używają. Każda para typu kolor treści kontra kolor tła trafia na listę kontrolną i dostaje ocenę zgodną z progami AA i AAA.

Przykład krok po kroku: paleta jasna przeniesiona do dark mode

1. Punkt wyjścia: masz sprawdzoną paletę jasnego motywu — białe tło strony, czarny tekst, primary jako kolor przycisków. Włączasz w testerze podgląd trybu ciemnego.
2. Podmieniasz Background na #1a1a1a, a Surface, czyli tło kart, na wartość nieco jaśniejszą od tła strony, żeby karty nie zlewały się z podłożem.
3. Dla tekstu ustawiasz biel #ffffff i sprawdzasz parę text/background. Luminancja względna #1a1a1a wynosi około 0,0103, a biel ma 1,0, więc kontrast to (1,0 + 0,05) / (0,0103 + 0,05) ≈ 17,4:1. Taki wynik przechodzi AA i AAA dla tekstu normalnego, bo próg AAA to 7:1.
4. Ten sam biały tekst zostaje na przycisku CTA, którego tłem jest primary. Tester liczy tę parę osobno i tu pojawia się problem: biel na jasnym primary często spada poniżej 4,5:1, mimo że na ciemnym tle wypadała wzorowo. Kontrast zawsze dotyczy konkretnej pary, nigdy pojedynczego koloru.
5. Poprawiasz przycisk: albo ciemniejszy wariant primary, albo ciemny tekst na jasnym przycisku. Sprawdzasz dodatkowo focus ring i obramowania pól formularza, gdzie próg wynosi 3:1, bo to elementy interfejsu, a nie tekst.
6. Na koniec porównujesz obie wersje makiety obok siebie — ten sam układ, inny zestaw tokenów — i wychwytujesz elementy, które w trybie ciemnym straciły czytelność.

Progi kontrastu dla poszczególnych elementów makiety

Jak korzystać z testera, żeby wyłapać realne problemy

• Zacznij od tła, nie od akcentu — ustaw najpierw Background i Surface, bo od nich zależy kontrast wszystkich tekstów. Kolor marki dopasowujesz później, już w kontekście konkretnego podłoża.
• Testuj pary, nie pojedyncze kolory — ta sama barwa może być poprawna na karcie i nieczytelna na przycisku. Przechodź przez makietę element po elemencie i sprawdzaj każdą kombinację treści z tłem.
• Nie pomijaj stanów interaktywnych — hover, focus, disabled oraz komunikaty error, success i warning to miejsca, w których paleta najczęściej się rozjeżdża. Focus ring musi być widoczny na tle karty i przycisku jednocześnie.
• Traktuj dark mode jako drugi, pełny zestaw tokenów — odwrócenie tła i tekstu to za mało. Osobno ustawiasz Surface, obramowania, muted i kolory stanów, bo ciemne podłoże zmienia odbiór nasycenia.
• Liczba to próg, nie gwarancja — wynik powyżej 4,5:1 nie czyni cienkiego, małego tekstu automatycznie czytelnym. Zestaw go z rozmiarem i grubością pisma, a przy tekstach pomocniczych zostaw sobie margines zapasu.

Czego tester nie sprawdzi

• Gradienty i przezroczystość — przy tle gradientowym oceniany jest jeden reprezentatywny kolor, więc kontrast w skrajnych punktach przejścia może różnić się od pokazanego wyniku. Podobnie jest z kolorami z kanałem alfa nakładanymi na siebie.
• Tekst na zdjęciu lub wideo — makieta korzysta z kolorów zastępczych, nie analizuje fotografii w tle. Jeśli docelowo napis leży na obrazie, wynik z testera dotyczy tylko sytuacji, w której tło jest jednolite.
• Font, grubość i rozmiar pisma — sam kontrast pozostaje ten sam niezależnie od kroju, ale czytelność już nie. Cienki krój przy progu 4,5:1 wypada w praktyce słabiej niż pogrubiony, a antyaliasing dodatkowo zmienia odbiór krawędzi liter.
• Warunki po stronie użytkownika — jasność i temperatura ekranu, systemowy tryb nocny, filtry światła niebieskiego oraz oświetlenie w pomieszczeniu wpływają na to, jak paleta jest postrzegana. Test daje policzalny punkt odniesienia, ale nie zastępuje sprawdzenia na docelowych urządzeniach.

Najczęstsze pytania

Powiązane narzędzia: sprawdzanie kontrastu kolorów, generator triadycznych schematów i blender kolorów HEX.