Artykuł
Wyodrębnianie dostępnej palety kolorów z obrazu
Zdjęcie lub zasób marki często zawiera zalążek pełnego systemu kolorów. Wyodrębnienie tego zalążka, ukształtowanie go w użyteczną paletę, a następnie weryfikacja według standardów dostępności wymaga trzech odrębnych kroków. Ten artykuł omawia każdy z nich po kolei: jak działa ekstrakcja palety pod spodem, jak wybierać i dostosowywać kolory do praktycznego użytku, jak sprawdzać kontrast względem progów WCAG i jak wykryć pary, które zlewają się dla użytkowników z daltonizmem.
Jak wyodrębniana jest paleta: próbkowanie pikseli i kwantyzacja kolorów
Każdy obraz cyfrowy to siatka pikseli, z których każdy niesie wartość koloru w przestrzeni takiej jak RGB. Ekstraktor palety nie sprawdza każdego piksela indywidualnie: zdjęcie o rozdzielczości 2 megapikseli zawiera 2 miliony punktów danych, których przetwarzanie byłoby powolne i zwróciłoby tysiące nieznacznie różnych odcieni zamiast użytecznego zestawu. Zamiast tego narzędzie próbkuje siatkę pikseli w regularnych odstępach, zbierając reprezentatywny podzbiór. Ten podzbiór jest następnie przekazywany do algorytmu kwantyzacji kolorów. Najczęstszym podejściem jest grupowanie podobnych kolorów metodą klastrowania, czasami nazywaną podziałem mediany lub partycjonowaniem w stylu k-means. Algorytm przypisuje każdy próbkowany piksel do jednego z ustalonej liczby koszyków na podstawie podobieństwa kolorów, a następnie oblicza średni kolor każdego koszyka. Wynikiem jest mała lista, zazwyczaj 4 do 16 kolorów, które razem odpowiadają za dominujące tony wizualne na obrazie. Kolory pojawiające się tylko w małych izolowanych obszarach mogą zostać pominięte, co jest oczekiwanym zachowaniem, a nie wadą.
Od surowych kolorów dominujących do użytecznej palety
Surowy wynik ekstraktora palety to lista kolorów uszeregowana według częstotliwości, ale sama częstotliwość nie tworzy palety. Zdjęcie lasu zwróci kilka odcieni zieleni, które są zbyt podobne, aby używać ich w interfejsie jako oddzielne akcenty. Praktyczna praca polega na selekcji i dostosowaniu. Zacznij od zidentyfikowania jednego koloru jako podstawowego: tego, który jest najbardziej charakterystyczny i najmniej neutralny. Spośród pozostałych kolorów poszukaj co najwyżej dwóch, które kontrastują z podstawowym i ze sobą nawzajem. Te stają się Twoimi akcentami. Wszystko inne, w tym odcienie odbarwione, które ekstraktor często zwraca z cieni i półtonów, może służyć jako neutralne tła i obramowania. Po ustaleniu tej ogólnej struktury prawie na pewno będziesz musiał dostosować poszczególne wartości. Narzędzie color-converter pozwala sprawdzić każdy kolor w hex, RGB i HSL. HSL jest tu szczególnie przydatne: możesz utrzymywać stały odcień i zmieniać jasność lub nasycenie, aby tworzyć bardziej ścisłą lub luźną rodzinę bez opuszczania tej samej rodziny kolorów.
Sprawdzanie kontrastu: progi WCAG dla czytelnego tekstu
Po wybraniu kolorów kandydatów na tekst i tło musisz sprawdzić, czy kombinacja jest czytelna. Wytyczne dostępności treści internetowych (WCAG) definiują w tym celu współczynnik kontrastu. Współczynnik porównuje względną luminancję dwóch kolorów: wartość 1:1 oznacza brak kontrastu (ten sam kolor na tym samym kolorze), a 21:1 to maksimum (czarny na białym). WCAG 2.1 Poziom AA wymaga współczynnika co najmniej 4,5:1 dla tekstu głównego normalnej wielkości i 3:1 dla dużego tekstu (18pt lub 14pt pogrubiony). Poziom AAA ustawia wyższe progi wynoszące odpowiednio 7:1 i 4,5:1. Nie musisz obliczać luminancji ręcznie. Kluczowa obserwacja jest taka, że para kolorów, która dobrze wygląda przy dobrym oświetleniu, może spaść poniżej 4,5:1 na ekranie, a wytyczna istnieje właśnie dla takiego przypadku. Po wyodrębnieniu i dostosowaniu kolorów przetestuj każdą parę tekst-na-tle, którą planujesz użyć. Neutralna szarość o średnim tonie, która dobrze czyta się na białym tle, może całkowicie nie spełniać wymagań na jasnobeżowym tle z wyodrębnionej palety.
Daltonizm: symulowanie wyglądu par dla dotkniętych użytkowników
Mniej więcej 1 na 12 mężczyzn i 1 na 200 kobiet ma jakąś formę zaburzenia widzenia kolorów. Najczęstszym typem jest deuteranopia (zmniejszona wrażliwość na zielony), po niej następuje protanopia (zmniejszona wrażliwość na czerwony). Tritanopia (zmniejszona wrażliwość na niebiesko-żółty) jest rzadsza. W każdym typie układ wzrokowy mapuje pewne długości fal na ten sam postrzegany kolor, który osoby bez zaburzeń widzą jako oddzielny. Praktycznym problemem dla palety jest to, że dwa kolory, które wyglądają wyraźnie odmiennie przy normalnym widzeniu, mogą zlać się w ten sam ton dla użytkownika z daltonizmem, czyniąc je bezużytecznymi do sygnalizowania różnicy, na przykład używanie tylko czerwonego i zielonego do sygnalizowania sukcesu i błędu. Uruchomienie symulacji daltonizmu pokazuje, jak paleta wygląda, gdy dotknięte kanały są skompresowane. Pary, które zlewają się w niemal identyczną szarość lub brąz, to te do ponownego rozważenia: albo zwiększ różnicę jasności między nimi, aby kontrast pozostał nawet bez rozróżnienia odcieni, albo dodaj dodatkową wskazówkę (kształt, etykieta, wzór), aby kolor nie był jedynym sygnałem.
Lokalnie: color-palette, color-blindness i color-converter
Wszystkie trzy kroki opisane w tym artykule można wykonać bez wysyłania obrazu lub kolorów marki na jakikolwiek serwer. Narzędzie color-palette działa w całości w przeglądarce: upuszczasz obraz, próbkuje ono piksele lokalnie i zwraca dominujące kolory jako wartości hex. Żaden plik nie jest przesyłany. Narzędzie color-converter przyjmuje kod hex i pokazuje ten sam kolor w RGB i HSL, dzięki czemu możesz dokonywać ukierunkowanych korekt jasności lub nasycenia, pozostając w tej samej rodzinie odcieni. Zarówno wartości hex, jak i przekonwertowane istnieją tylko na stronie. Narzędzie color-blindness działa w drugą stronę: upuszczasz obraz, a ono renderuje symulacje deuteranopii, protanopii i tritanopii tego obrazu, obliczone w przeglądarce. Aby sprawdzić paletę zamiast zdjęcia, najpierw wyeksportuj lub zrzuć ekran ze swoimi próbkami kolorów jako obraz, a następnie upuść go do symulatora. Używając trzech narzędzi po kolei: wyodrębnij z obrazu, dostosuj w color-converter, a następnie wyeksportuj obraz próbki i zweryfikuj go w color-blindness, obejmujesz pełny przepływ pracy opisany powyżej. Twój obraz pozostaje na urządzeniu przez cały czas, co ma znaczenie, jeśli zdjęcie źródłowe zawiera nieopublikowaną identyfikację wizualną lub tożsamość klienta przed premierą.
Narzędzia w tym artykule
- Ekstraktor palety kolorówWyodrębnij dominujące kolory z obrazu jako próbki HEX. Kopiuj dowolny kolor. Bez przesyłania.
- Symulator ślepoty barwSymuluj protanopię, deuteranopię, tritanopię i achromatopsję na obrazie. Bez przesyłania.
- Konwerter kolorówKonwertuj kolory między HEX, RGB, HSL, HSV i CMYK. Narzędzie sprawdzania kontrastu WCAG dołączone. Bez przesyłania.
- Generator schematów kolorówGeneruj palety komplementarne, analogiczne, triadyczne, tetradyczne i monochromatyczne z koloru bazowego. Bez przesyłania.
Najczęściej zadawane pytania
Ile kolorów zazwyczaj zwraca ekstraktor palety?
Większość narzędzi domyślnie zwraca od 5 do 16 kolorów, choć wiele pozwala ustawić liczbę. Zwracanie mniejszej liczby kolorów oznacza, że algorytm musi grupować więcej pikseli razem, co może łączyć oddzielne, ale podobne tony. Zwracanie większej liczby kolorów może tworzyć bliźniacze kolory trudne do odróżnienia w praktycznym użyciu. W przypadku palety interfejsu 6 do 8 kolorów jest zazwyczaj praktycznym punktem wyjścia.
Czy paleta wyodrębniona z obrazu może automatycznie spełniać wymagania kontrastu WCAG?
Nie automatycznie. Dominujące kolory na fotografii często są półtonami o umiarkowanej luminancji, które zazwyczaj dają współczynniki w zakresie 2:1 do 3:1 względem siebie. Osiągnięcie progu 4,5:1 dla tekstu głównego zazwyczaj wymaga rozjaśnienia wartości tła lub przyciemnienia wartości tekstu poza to, co zapewnia surowa ekstrakcja. Ekstrakcja daje punkt wyjścia; sprawdzenie kontrastu mówi, ile dostosowania jest potrzebne.
Czy współczynnik kontrastu WCAG uwzględnia daltonizm?
Częściowo. Wzór luminancji WCAG opiera się na względnej jasności, a nie odcieniu, więc para o wysokim kontraście spełniająca wymagania 4,5:1 będzie generalnie pozostawać rozróżnialna nawet dla użytkowników z daltonizmem, ponieważ zachowywana jest różnica jasności. Jednak dwa kolory o podobnej luminancji, ale różnych odcieniach, takie jak czerwony i zielony przy tej samej jasności, mogą przejść kontrolę kontrastu opartą na luminancji, pozostając jednocześnie nierozróżnialne dla deuteranopów. Uruchomienie symulacji daltonizmu jest właściwym sposobem sprawdzania różnicowania na poziomie odcieni oddzielnie od współczynnika kontrastu.