HEX, RGB, HSL, CMYK i sprawdzanie kontrastu tekstu

Kod koloru to jeden kolor zapisany w innym formacie. HEX, RGB i HSL opisują to samo światło na ekranie, więc da się je dokładnie przeliczać między sobą, z zaokrągleniami. CMYK opisuje tusz na papierze, dlatego jego przeliczenie z wartości ekranowych jest tylko szacunkiem. Wskaźnik kontrastu WCAG to osobna liczba, która porównuje jasność dwóch kolorów i decyduje, czy tekst da się czytać. Wklej kolor do konwertera kolorów, aby od razu zobaczyć wszystkie formaty.

Konwerter kolorówPotrzebuję koloru w innym formacieZrób to za darmo

Jeśli potrzebny kolor znajduje się na zdjęciu, logo lub zrzucie ekranu, najpierw odczytaj go z piksela za pomocą pipety do wybierania kolorów z obrazu, a następnie wklej kod HEX tutaj. Jak pobrać dokładny kolor z obrazu opisuje krok po kroku, jak to zrobić.

HEX i RGB to te same liczby

Kod HEX to trzy pary cyfr szesnastkowych. #34D6A0 zawiera wartość czerwieni, zieleni i błękitu. Każda para to liczba od 00 do FF, czyli od 0 do 255 w systemie dziesiętnym. Zatem 34 to 52, D6 to 214, a A0 to 160, a zapis RGB to rgb(52, 214, 160).

Zapis liczby w systemie szesnastkowym zmienia tylko jej wygląd. Skrócony zapis #abc oznacza #aabbcc, czyli każda cyfra jest podwojona. Ośmiocyfrowy kod dodaje na końcu parę kanału alfa, od 00 (w pełni przezroczysty) do FF (w pełni nieprzezroczysty), więc #34D6A080 jest mniej więcej w połowie przezroczysty. RGBA zapisuje tę samą wartość alfa jako liczbę od 0 do 1.

CSS akceptuje też nazwy kolorów. rebeccapurple to #663399. Konwerter odczytuje nazwy przez samą przeglądarkę, więc zadziała każda nazwa, którą przeglądarka zna.

HSL opisuje kolor tak, jak go opisujemy my

HSL to barwa (hue), nasycenie (saturation) i jasność (lightness). Barwa to kąt na kole barw: czerwień to 0 stopni, zieleń 120, a błękit 240. Nasycenie mówi, jak bardzo kolor odbiega od szarości, a jasność, jak bardzo jest oddalony od czerni lub bieli.

Ten sam #34D6A0 to hsl(160, 66%, 52%). Jego barwa leży między zielenią a błękitem, nasycenie jest wysokie, a jasność tuż powyżej połowy skali. HSL najłatwiej edytować ręcznie, bo można zachować barwę i zmieniać tylko jasność, aby uzyskać jaśniejszy lub ciemniejszy odcień.

HSV jest podobny do HSL, ale zamiast jasności używa wartości (value), czyli jasności najmocniejszego kanału. Niektóre pipety kolorów z niego korzystają, więc możesz się z nim spotkać w innych narzędziach. Konwerter pokazuje go obok HSL, abyś mógł porównać oba.

CMYK jest dla tuszu, więc to szacunek

Ekrany dodają światło: czerwień, zieleń i błękit razem dają biel. Drukarki odejmują światło tuszem: cyjan, magentę, żółty i czarny na białym papierze. Oba systemy nie mogą się idealnie pokryć, dlatego wartość CMYK zawsze jest tłumaczeniem.

Konwerter stosuje prosty wzór. Czerń to K, czyli jeden minus największa z wartości czerwieni, zieleni i błękitu w skali od 0 do 1. Cyjan, magenta i żółty są następnie wyliczane z tego, co zostaje po K. Wzór ignoruje tusz, papier i profil kolorów, którego używa drukarnia. Wydruk będzie więc inny, a bardzo jasne kolory mogą w ogóle wykraczać poza to, co da się wydrukować tuszami CMYK. Wartości CMYK użyj, aby zacząć rozmowę z drukarnią, i przed dużym nakładem poproś o próbny wydruk (proof).

Kontrast dotyczy jasności, a nie barwy

Wskaźnik kontrastu WCAG porównuje dwa kolory na podstawie ich jasności względnej (luminancji). Luminancja jest obliczana z wartości czerwieni, zieleni i błękitu po korekcji gamma, a zieleń ma największe znaczenie, ponieważ ludzkie oko najbardziej na nią reaguje. Każdy kanał najpierw przelicza się ze skali 0–255, a luminancja to 0,2126 × czerwień + 0,7152 × zieleń + 0,0722 × błękit.

Wskaźnik to jaśniejsza luminancja plus 0,05, podzielona przez ciemniejszą luminancję plus 0,05. Czarny tekst na białym tle daje 21 do 1, czyli maksymalną możliwą wartość. Dwa kolory mogą różnić się barwą, a mimo to mieć niski wskaźnik, jeśli mają podobną jasność, i właśnie ten przypadek ma wyłapywać sprawdzenie. Ten sam niski kontrast sprawia, że kody QR nie dają się zeskanować.

Progi

WCAG 2.x wyznacza dwa poziomy, a wymagany wskaźnik zależy od rozmiaru tekstu.

• Poziom AA: 4,5 do 1 dla zwykłego tekstu i 3 do 1 dla dużego tekstu.
• Poziom AAA: 7 do 1 dla zwykłego tekstu i 4,5 do 1 dla dużego tekstu.

Duży tekst to 24 piksele lub więcej albo 18,66 piksela pogrubionego. Wszystko mniejsze uznaje się za zwykły tekst. Częstym błędem jest szary tekst na białym tle. Średnio szary, taki jak #777777 na bieli, ma około 4,48 do 1. Nie przechodzi poziomu AA dla zwykłego tekstu o niewielki margines, ale przechodzi go dla dużych nagłówków.

Konwerter pokazuje wskaźnik zaokrąglony do dwóch miejsc po przecinku, ale każde zaliczenie lub niezaliczenie opiera się na dokładnej wartości. Wynik wyświetlany jako 4,50 może więc nie przejść testu, jeśli jest odrobinę niższy. Sprawdzenie mierzy tylko jedną rzecz. Nie obejmuje grubości czcionki, odstępów między wierszami ani tego, jak osoby z daltonizmem widzą projekt, dlatego przetestuj też rzeczywistą stronę w jej rzeczywistych rozmiarach.

Odcienie i cienie

Pasek pod konwerterem pokazuje dziewięć odcieni wokół koloru: cztery jaśniejsze, mieszane z bielą, sam kolor oraz cztery ciemniejsze, mieszane z czernią. Kliknięcie w jeden z nich kopiuje jego kod HEX. Jest to przydatne, gdy potrzebujesz zestawu powiązanych kolorów, na przykład jasnego tła, stanu najechania kursorem i ciemnego koloru tekstu, wszystkich wziętych z jednej wartości marki. Każdą wybraną parę sprawdź w sekcji kontrastu, zanim jej użyjesz.

Jak to zrobić w fixmint

1. Wklej kolor do pola Color jako HEX, RGB, HSL lub nazwę CSS, na przykład rebeccapurple.
2. Odczytaj wiersze HEX, RGB, HSL, HSV i CMYK. Obok potrzebnego naciśnij Copy. CMYK jest oznaczony jako przybliżony.
3. Wpisz kolor tła w polu Background albo wybierz go z próbki i odczytaj wskaźnik pod On white, On black i On your background.
4. Sprawdź cztery znaczniki pod każdym wskaźnikiem: AA i AAA, osobno dla zwykłego i dużego tekstu.
5. W sekcji Tints and shades kliknij próbkę, aby ją skopiować.

Szybkie odpowiedzi

Czy wartość CMYK jest dokładna?

Nie. To zwykłe przeliczenie arytmetyczne, które ignoruje drukarnię, papier i profil kolorów. Traktuj je jako punkt wyjścia i poproś o próbny wydruk.

Czy zaliczony wskaźnik kontrastu oznacza, że projekt jest dostępny?

Oznacza, że kolory tekstu spełniają jeden mierzalny próg. Dostępność zależy też od rozmiaru, odstępów, animacji i sposobu budowy strony, więc wskaźnik jest wskazówką, a nie pełnym przeglądem.

Jaki format zapisać w arkuszu stylów?

Ten, który najłatwiej czytasz i edytujesz. HEX jest zwarty i powszechny. HSL łatwiej dostosować ręcznie, bo zmieniasz jasność bez zmiany barwy.