Studio iFOX · seria „Z warsztatu", odc. 1
Zaczyna się zawsze tak samo. Klient przysyła logo, wyciągamy z niego kolor marki, wrzucamy do generatora palet, klikamy „dopełniający". Wychodzi kolor, który zgadza się co do liczby i nie zgadza się co do niczego innego. Na ekranie leżą obok siebie dwa pola: jedno świeci, drugie wygląda jak dziura. Technicznie to jest dopełnienie. Wizualnie to jest wypadek.
Przez lata odruch był taki, żeby to poprawić ręcznie i pojechać dalej. Kiedy zabraliśmy się za własne narzędzie, musieliśmy w końcu odpowiedzieć, skąd to się właściwie bierze.
Litera „L" w HSL nie oznacza jasności
To jest cały sekret i jest rozczarowująco prosty.
HSL opisuje kolor trzema liczbami: odcień, nasycenie i coś, co nazywa się lightness. Ta trzecia liczba brzmi jak jasność, ale nią nie jest — to współrzędna geometryczna w bryle, którą monitor układa sobie z czerwonego, zielonego i niebieskiego. Z tym, co widzi oko, ma tyle wspólnego, co numer piętra z widokiem z okna.
Weźmy cztery czyste barwy. Każda ma w HSL dokładnie tę samą jasność — 50%:
| kolor | HSL | jak jasny jest naprawdę |
|---|---|---|
żółty #FFFF00 | L = 50% | 97% |
cyjan #00FFFF | L = 50% | 91% |
czerwony #FF0000 | L = 50% | 63% |
niebieski #0000FF | L = 50% | 45% |
Żółty jest ponad dwa razy jaśniejszy od niebieskiego. HSL twierdzi, że są identyczne.
A teraz to, co się dzieje, kiedy na tej podstawie liczy się dopełnienie. Bierzemy złoty #F5C518 — kolor, jakich w polskich logotypach są setki. Obracamy odcień o 180 stopni, tak jak każe podręcznik:
- dopełnienie liczone w HSL →
#1848F5, granat, który spada o 34 punkty jasności - dopełnienie liczone w OKLCH →
#B8C9FF, błękit, który zostaje na tym samym poziomie
Pierwsza para to złoty nagłówek i przycisk, który obok niego wygląda jak wyrwa w stronie. Druga to dwa kolory, które się słyszą.
OKLCH to zapis zbudowany na pomiarach tego, jak ludzie faktycznie widzą, a nie na geometrii sześcianu RGB. Kiedy każesz mu obrócić odcień, jasność i nasycenie zostają tam, gdzie były.
Uczciwie: nie na każdym kolorze różnica jest dramatyczna. Na pomarańczu #E8622A rozjazd wynosi 6 punktów i większość ludzi go nie zauważy. Na złotym, limonkowym i turkusowym — od 20 do 37 punktów, i tego nie da się nie zauważyć. Problem w tym, że nikt nie wie z góry, w którą stronę pójdzie kolor klienta.
Pięć ładnych kwadratów to nie jest paleta
Druga rzecz wyszła nam dopiero przy projektowaniu tego, co narzędzie ma właściwie oddawać.
Typowy generator kończy pracę na pasku pięciu prostokątów z kodami pod spodem. Wygląda to świetnie w portfolio i jest bezużyteczne przy wdrożeniu, bo projektant nie ma pytania „jakie pięć ładnych kolorów". Ma pytania: który jest tłem, który jest tekstem, który jest przyciskiem, a który tylko kreską między sekcjami.
To nie są te same pytania i nie mają tych samych odpowiedzi. Kolor, który świetnie wygląda jako wypełnienie przycisku, prawie nigdy nie nadaje się na link w akapicie — bo przycisk ma pod spodem swoje tło, a link leży na białym. To jedno rozróżnienie robi więcej dla spójności strony niż cała reszta palety.
Dlatego nasze narzędzie oddaje szesnaście nazwanych ról zamiast pięciu próbek. Tło, powierzchnia karty, obramowanie dekoracyjne, obramowanie nośne, tekst, tekst drugorzędny, kolor główny osobno jako wypełnienie i osobno jako link, stany, akcenty. Brzmi jak dużo. Przy wdrożeniu okazuje się, że to jest minimum.
4,5:1 zna każdy, ale prawie nikt nie wie, gdzie to obowiązuje
Tu jest miejsce, w którym najczęściej widzimy dobre intencje kończące się brzydką stroną.
Próg 4,5:1 z WCAG wszedł do obiegu i żyje własnym życiem. Ludzie wklepują go wszędzie, bo brzmi bezpiecznie. Efekt jest taki, że projekt robi się agresywny i ciężki, a to wcale nie znaczy, że jest bardziej dostępny.
Kreska między sekcjami nie jest komponentem interfejsu. Popularne szare obramowania mają na bieli około 1,2–1,4:1 i to jest poprawne — ich zadaniem jest delikatnie rozdzielić, nie krzyczeć. Ale ramka pola formularza, która jako jedyna pokazuje, gdzie to pole się kończy, jest już elementem funkcjonalnym i musi mieć 3:1. Dwie różne kreski, dwie różne reguły, a w większości systemów jedna nazwa i jeden kolor.
Najlepiej widać to na żółtym. Ostrzeżenie przy L = 70% to ciepły bursztyn — na bieli daje 2,73:1. Dociągnięcie go do 4,5:1 wymaga zejścia do #986600, czyli do oliwkowego brązu, który nikomu już nie kojarzy się z ostrzeżeniem. I nie trzeba tego robić, bo plakietka statusu to komponent, a nie tekst — obowiązuje ją 3:1, które łapiemy przy L = 62% i kolorze, który nadal wygląda jak ostrzeżenie.
Dostępność to nie jeden próg. To wiedza, który próg gdzie obowiązuje.
Cztery progi, których nie przeszliśmy
Kiedy silnik był gotowy, puściliśmy go przez własny test: osiem rodzajów harmonii, dwa motywy, cztery poziomy nasycenia, trzy poziomy podbarwienia neutralnych, dwa tryby kontrastu i pełne koło odcieni. 129 024 sprawdzone pary kolorów.
Nie przeszedł czterech.
Zielony „sukces" wypadał na 4,20 zamiast 4,5. Osiemnaście setnych. Na oko nie do wyłapania, a jednak formalnie poniżej progu — i to na wszystkich odcieniach bazowych, czyli za każdym razem.
Linki gubiły kontrast na kartach. Kolor linku był policzony względem tła strony i tam działał. Na karcie, która jest odrobinę ciemniejsza od tła, spadał poniżej progu. Klasyczny błąd „sprawdziliśmy w jednym miejscu".
Kolor główny nie zawsze udźwigał tekst na sobie. Przy części odcieni ani biel, ani czerń nie dawały na nim wymaganych 4,5:1.
Czwarty przypadek był nasz własny. Test krzyczał, że obramowanie nie ma 3:1 — na wszystkich paletach, zawsze. Po sprawdzeniu okazało się, że to nie kolor jest zły, tylko nasz próg. Wymagaliśmy 3:1 od zwykłej kreski dekoracyjnej, która tego nie potrzebuje. Poprawiliśmy założenie, nie kolor, i rozbiliśmy obramowanie na dwie osobne role.
Po poprawkach: zero niespełnionych progów w całej przestrzeni parametrów. Ale gdybyśmy tego testu nie napisali, wypuścilibyśmy narzędzie, które sprzedaje dostępność i samo jej nie spełnia — z naszym logo pod spodem.
Co z tego wynika dla Twojej strony
Trzy rzeczy, niezależnie od tego, kto Ci ją robi.
Jeśli paleta wygląda na rozjechaną mimo że „kolory są dobrane według zasad", to prawdopodobnie zasady policzono w przestrzeni, która nie ma nic wspólnego z widzeniem. To się naprawia przeliczeniem, nie przemalowaniem.
Jeśli dostajesz paletę jako pasek próbek bez opisu, to nie jest jeszcze robota skończona. Kolor bez przypisanej roli będzie za miesiąc użyty w trzech różnych znaczeniach przez trzy różne osoby.
I jeśli ktoś dociąga Ci każdy element do 4,5:1, to niekoniecznie dba o dostępność — może po prostu znać tylko jedną liczbę.
Warsztat Barw jest darmowy i nie wymaga logowania: wygeneruj paletę — z rolami, macierzą kontrastu, symulacją daltonizmu i eksportem do CSS, Tailwinda i Divi 5.
Znajdziesz go w menu, po rozwinięciu części "Baza wiedzy".
W następnym odcinku: dlaczego podgląd fontu kłamie po polsku, jak przeglądarka po cichu podmienia literę „ł" i dlaczego nikt Ci tego nie zgłosi.