UI – czym jest i czym różni się od UX?

UI to nie estetyka, tylko zbiór elementów sterujących

Ta definicja przesuwa rozmowę o UI z gustu na sprawdzalność. Jeśli przycisk jest elementem sterującym, to musi być rozpoznawalny jako przycisk, a nie tylko ładny. A rozpoznawalność ma własną, liczbową miarę.

Interfejs ma inny próg kontrastu niż tekst

Powszechnie cytowany próg kontrastu dotyczy tekstu: co najmniej 4,5:1 wobec tła, a dla dużego tekstu 3:1.1 Znacznie rzadziej mówi się o tym, że interfejs ma osobne kryterium i osobny próg. Wymaga ono, żeby „the visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components: Visual information required to identify user interface components and states”.3

Różnica jest istotna, bo dotyczy czego innego. Pierwsze kryterium pilnuje, żeby dało się przeczytać napis na przycisku. Drugie pilnuje, żeby dało się w ogóle zobaczyć, gdzie ten przycisk się zaczyna i kończy. Dotyczy więc obramowań pól, tła przycisków, wskaźnika zaznaczenia. Napis może spełniać próg 4,5:1, a otaczająca go ramka i tak zniknąć na tle strony.

Kryterium obejmuje też stany, nie tylko elementy w spoczynku. Pole zaznaczone, przycisk wyłączony, checkbox odhaczony: jeśli różnicę widać wyłącznie przez zmianę koloru poniżej progu, informacja o stanie przepada.

Kolor nie może być jedynym nośnikiem informacji

Drugie kryterium, o którym w praktyce zapomina się jeszcze częściej, brzmi: „Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element”.2 Nie jest to zakaz kolorowania. Dokument wyjaśnia wprost, że nie chodzi o zniechęcanie do koloru ani nawet do kodowania kolorem, o ile towarzyszy mu inne oznaczenie wizualne.2

Praktyczna konsekwencja dotyczy formularzy. Czerwony może zawsze oznaczać błąd, ale sam czerwony nie może być jedynym komunikatem. Pole z czerwoną ramką i bez zdania wyjaśniającego nie mówi nic osobie, która tej czerwieni nie rozróżnia, a reszcie też nie mówi, co konkretnie poprawić. Rozwiązanie jest tanie: kolor, ikona i krótkie zdanie.

Nasz pomiar: 11 komponentów poniżej progu, prawie same przyciski

Zmierzyliśmy to u siebie 2 września 2026 roku. Skrypt uruchamiał serwis w przeglądarce bez interfejsu, odczytywał wyliczone style 124 elementów sterujących na dziewięciu stronach różnych szablonów i liczył kontrast wobec faktycznego tła pod spodem, a nie wobec zadeklarowanego w arkuszu stylów.

Widoczną ramkę ma 81 z tych elementów. Jedenaście, czyli 14%, nie dobija do progu 3:1, a dziewięć z nich to przyciski. Rozkład jest przy tym dwubiegunowy: mediana wynosi 19,11:1 i jest jednocześnie wartością najwyższą, czyli ponad połowa komponentów ma identyczny, bardzo dobry kontrast. Nie mamy więc stopniowego pogorszenia, tylko jednolity standard i garść elementów, które z niego wypadły. To dobra wiadomość, bo takie odchylenia poprawia się punktowo, a nie przez przeprojektowanie serwisu.

Przy okazji policzyliśmy pola formularzy: na 153 pola trzynaście nie ma powiązanej etykiety ani opisu dla czytnika ekranu. To osobna usterka od kontrastu i osobna do naprawy.

Pomiar miał kontrolę wpisaną przed uruchomieniem. Na każdą stronę skrypt wstrzykiwał dwa własne pola: jedno z czarną ramką na białym tle, drugie z ramką prawie niewidoczną. Dopóki narzędzie nie policzyło pierwszego na około 21:1, a drugiego na 1,15:1, wynik na realnych elementach nie był brany pod uwagę. Bez takiej kontroli równie dobrze wyglądałby wynik zerowy z zepsutego selektora.

Co z tego wynika przy projektowaniu

Pierwszy wniosek dotyczy kolejności. Kontrast komponentów sprawdza się miarą, nie okiem. Na dobrym monitorze w zaciemnionym pokoju ramka o kontraście 1,2:1 bywa widoczna, a próg i tak jest niespełniony.

Drugi dotyczy tego, gdzie szukać odchyleń. U nas wypadły z normy głównie przyciski, czyli elementy stylowane najczęściej indywidualnie, poza wspólnym arkuszem, podobnie jak elementy CTA. Spójność UX psuje się zwykle nie tam, gdzie ktoś zapomniał o standardzie, tylko tam, gdzie ktoś świadomie zrobił wyjątek.

Trzeci dotyczy zakresu. Kontrast, etykiety pól i oznaczanie stanów to trzy różne rzeczy, mierzone osobno i naprawiane osobno. Dlatego ocena interfejsu należy do audytu UX, a nie do wrażenia z pierwszego spojrzenia.

Najczęstsze pytania

Czym różni się kontrast tekstu od kontrastu interfejsu?
To dwa osobne kryteria. Tekst wymaga 4,5:1, a duży tekst 3:1 wobec tła.1 Elementy sterujące i ich stany wymagają 3:1 wobec sąsiadującego koloru.3

Czy przycisk bez ramki spełnia wymagania?
Tak, o ile coś innego pozwala go rozpoznać, na przykład tło o kontraście co najmniej 3:1 wobec otoczenia. Kryterium mówi o informacji wizualnej potrzebnej do identyfikacji elementu, nie o samej ramce.3

Czy można oznaczać błędy samym kolorem?
Nie. Kolor nie może być jedynym nośnikiem informacji, ale wolno go używać razem z ikoną, podpisem lub komunikatem.2

Czym UI różni się od UX?
UI to zbiór elementów sterujących i ich wygląd, UX to ścieżka, którą użytkownik przez nie przechodzi. UI da się zmierzyć progami kontrastu, UX ocenia się badaniem zachowań.

Źródła

1. W3C, „Understanding SC 1.4.3: Contrast (Minimum)” (WCAG 2.2, poziom AA): próg 4,5:1 dla tekstu i 3:1 dla tekstu dużego. Zobacz kryterium kontrastu tekstu →

2. W3C, „Understanding SC 1.4.1: Use of Color” (WCAG 2.2, poziom A): zakaz przekazywania informacji wyłącznie kolorem wraz z wyjaśnieniem, że samo kodowanie kolorem nie jest zabronione. Zobacz kryterium użycia koloru →

3. W3C, „Understanding SC 1.4.11: Non-text Contrast” (WCAG 2.2, poziom AA): próg 3:1 dla elementów sterujących i ich stanów oraz definicja komponentu interfejsu. Zobacz kryterium kontrastu komponentów →