Konwerter kolorów i kontrast WCAG w jednym miejscu
Jasnoszary tekst zastępczy #999999 na białym tle wygląda elegancko, a daje kontrast tylko 2.85 : 1. Konwerter kolorów zamienia kod HEX na RGB, HSL i CMYK. Na starcie pokazuje #3b82f6, średni niebieski, czyli rgb(59, 130, 246), hsl(217, 91%, 60%) i cmyk(76%, 47%, 0%, 4%). Obok działa test kontrastu WCAG 2.1 dla koloru tekstu i tła.
Cztery kroki od próbki do współczynnika
- Kliknij próbkę koloru, aby otworzyć selektor przeglądarki, albo wklej kod w pole HEX. Działa sześć cyfr i krótka forma z trzech (#0af), z # lub bez.
- Odczytaj pola RGB, HSL i CMYK (druk). Przycisk kopiowania nad polem wysyła jego wartość do schowka.
- Po prawej ustaw Kolor tekstu i Tło.
- Współczynnik i cztery oznaczenia (AA Normalny, AAA Normalny, AA Duży, AAA Duży) zmieniają się przy każdym wyborze.
Granatowy znak firmowy i biały na #2563eb
Firmowy granat #003366 w CSS potrzebuje jaśniejszych i ciemniejszych wariantów. W HSL jest to proste: narzędzie podaje hsl(210, 100%, 20%), więc zmieniasz tylko ostatnią liczbę. Do ulotki ten sam kolor to cmyk(100%, 50%, 0%, 60%), pierwsza wartość dla drukarni. Biały tekst na domyślnym #2563eb daje 4.68 : 1, co spełnia AA dla zwykłego tekstu, ale nie AAA.
Co przyjmuje pole HEX, a czego nie
Konwersją sterują tylko pole HEX i selektor. Pola RGB i HSL wyglądają na edytowalne, ale wpisywanie w nich niczego nie zmienia. CMYK jest tylko do odczytu.
Pole HEX przepisuje się samo, gdy tylko jego treść jest poprawnym kodem. Wpisz #ff0 w drodze do #ff0000, a pole skoczy na #ffff00, więc wklej cały kod. Kody ośmiocyfrowe (z alfą), nazwy kolorów takie jak „tomato” oraz zapisy typu OKLCH czy HSV nie są obsługiwane. Błędne dane są ignorowane bez komunikatu.
Zaokrąglenia, CMYK bez profilu i dane w przeglądarce
Współczynnik jest pokazany z dwoma miejscami po przecinku, ale test zaliczenia używa dokładnej wartości. Dlatego 4.496 wyświetla się jako 4.50 : 1 i mimo to nie spełnia AA. HSL i CMYK są zaokrąglane do liczb całkowitych. CMYK to zwykłe przeliczenie matematyczne z RGB, bez profilu ICC, więc drukarnia może uzyskać inny wynik.
Dwa selektory kontrastu działają osobno od konwertera i przyjmują tylko kolory z selektora. Narzędzie nie zna rozmiaru twojego tekstu. WCAG uznaje tekst za duży od 18 pt, albo od 14 pt pogrubionego.
Konwersja i obliczenie kontrastu działają jako JavaScript w twojej przeglądarce. Wybór lub wpisanie koloru nie wysyła żadnego żądania, co potwierdzi zakładka Sieć w narzędziach deweloperskich. Przyciski kopiowania zapisują do schowka. Kod narzędzia nie przechowuje twoich kolorów.