Potem sprawdź dwa kolory względem WCAG AA i AAA i zobacz tekst na ekranie. Przeliczaj kolor między HEX, RGB, HSL, HSV i OKLCH i sprawdzaj, czy tekst jest czytelny na swoim tle. Jest darmowe i działa w przeglądarce.
Jak przekonwertować kolor
- Użyj Wybierz, aby wybrać kolor, albo wpisz lub wklej wartość w Dowolny kolor.
- Przeczytaj ten sam kolor jako HEX, RGB, HSL, HSV, OKLCH i jego nazwę CSS, jeśli istnieje.
- Naciśnij Kopiuj obok potrzebnego formatu albo Kopiuj HEX.
Jak sprawdzić kontrast
- Wybierz Kolor tekstu i Kolor tła albo użyj Użyj głównego koloru jako tekstu lub Użyj jako tła.
- Przeczytaj współczynnik kontrastu i czy spełnia AA i AAA dla zwykłego tekstu, Dużego tekstu 24 px, Pogrubionego tekstu 19 px i Konturu przycisku.
- Jeśli para nie przechodzi, użyj sugerowanego pobliskiego koloru, który przechodzi.
Którego formatu użyć
HEX i RGB opisują czerwone, zielone i niebieskie światło w kolorze i działają wszędzie. HSL i HSV opisują odcień, nasycenie i jasność, co ułatwia ręczne korygowanie koloru. OKLCH to najnowszy format CSS: jego jasność odpowiada temu, jak jasne wydają się kolory ludziom, więc dwa kolory z tym samym L naprawdę wyglądają równie jasno, co świetnie nadaje się do palet i motywów. Wszystkie nowoczesne przeglądarki obsługują oklch() w CSS.
Jak działa współczynnik kontrastu
Współczynnik porównuje względną luminancję dwóch kolorów, od 1:1 dla identycznych kolorów do 21:1 dla czerni na bieli. Wyniki nigdy nie są zaokrąglane w górę, więc 4,49:1 nie spełnia AA. Jeśli kolor tekstu jest przezroczysty, jest najpierw mieszany z tłem. Gdy para nie przechodzi, dla którejkolwiek strony sugerowany jest pobliski kolor, który przechodzi.
WCAG AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego. Spełnienie tego pomaga osobom niedowidzącym i każdemu, kto czyta na jasnym ekranie.
Dane, które to narzędzie rozumie
Trzy-, cztero-, sześcio- i ośmiocyfrowe HEX z # lub bez, rgb() i rgba() z przecinkami lub spacjami, hsl() z deg, turn lub rad, hsv(), oklch() i oklab(), 148 nazw kolorów CSS i zwykłe liczby jak 59, 130, 246. Alfa po ukośniku lub jako czwarta wartość jest zachowywana.
Kto z tego korzysta
Projektanci i programiści stron budujący motyw, właściciele małych firm sprawdzający czytelność kolorów marki, uczniowie robiący slajdy i każdy, kto ma kolor w jednym formacie, a potrzebuje innego. Aby znaleźć kolor ze zdjęcia, użyj wybieranie kolorów z obrazu.
Pytania
Jaki jest dobry współczynnik kontrastu?
Celuj w co najmniej 4,5:1 dla zwykłego tekstu. Im więcej, tym lepiej, a 7:1 spełnia AAA.
Dlaczego te same wartości kolorów wyglądają na ekranach nieco inaczej?
Ekrany różnią się jasnością i kolorem. Liczby są te same, ale wyświetlacz zmienia to, jak wyglądają.
Czy cokolwiek jest przesyłane?
Nie. Konwersja odbywa się w Twojej przeglądarce.