Próbnik kolorów i sprawdzanie kontrastu
Wybierz kolor próbnikiem lub wpisz go w dowolnym formacie. Zobacz go jako HEX, RGB, HSL, HSV i CMYK, uzyskaj jaśniejsze i ciemniejsze odcienie oraz pasujące kolory i sprawdź, czy tekst w dwóch kolorach spełnia wytyczne kontrastu WCAG dotyczące dostępności.
Kolory
O narzędziu: Próbnik kolorów i sprawdzanie kontrastu
Wybierz kolor próbnikiem lub wpisz go w dowolnym formacie. Zobacz go jako HEX, RGB, HSL, HSV i CMYK, uzyskaj jaśniejsze i ciemniejsze odcienie oraz pasujące kolory i sprawdź, czy tekst w dwóch kolorach spełnia wytyczne kontrastu WCAG dotyczące dostępności.
Część działu „Pliki, obrazy i projektowanie” w SmartCalcy. Działa w przeglądarce bez konta, używa Twojej waluty i jednostek (zmienisz je u góry strony) i podaje szacunki wyłącznie informacyjnie, więc zanim zaufasz wynikowi, sprawdź oficjalne wytyczne.
Jak korzystać z narzędzia: Próbnik kolorów i sprawdzanie kontrastu
Co oblicza i kiedy z niego korzystać
Wybiera i przelicza kolory między HEX, RGB, HSL, HSV i CMYK, podsuwa jaśniejsze i ciemniejsze odcienie oraz pasujące kolory i sprawdza kontrast tekstu według wytycznych dostępności WCAG.
Jak korzystać krok po kroku
- Wybierz kolor próbnikiem lub wpisz go jako HEX, RGB, HSL lub nazwę koloru.
- Wybierz kolor tła, aby sprawdzić kontrast.
- Skopiuj dowolny format jednym kliknięciem.
- Użyj jaśniejszych i ciemniejszych odcieni oraz pasujących kolorów do palety.
Co oznacza każde pole
- Kolor – Domyślnie #2443C8, niebieski SmartCalcy.
- Tło – Domyślnie biały.
Jak czytać wyniki
- Współczynnik kontrastu – Od 1:1 do 21:1, z wynikami AA i AAA dla zwykłego i dużego tekstu.
- Formaty – HEX, RGB, HSL, HSV i CMYK.
- Jaśniejsze i ciemniejsze odcienie – Jaśniejsze i ciemniejsze wersje.
- Pasujące kolory – Dopełniające, analogiczne i triada.
Wzór
Współczynnik kontrastu = (L1 + 0,05) ÷ (L2 + 0,05), gdzie L1 i L2 to względne luminancje jaśniejszego i ciemniejszego koloru. WCAG AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego; AAA wymaga 7:1 i 4,5:1.
Przykład krok po kroku
Przy kolorach domyślnych #2443C8 na białym ma współczynnik kontrastu 7,74:1, co spełnia AAA dla każdego rozmiaru tekstu.
Założenia i ograniczenia
- Wartości CMYK to prosta konwersja, a nie profil druku z zarządzaniem kolorem.
- Wyniki kontrastu są liczone według wzoru WCAG 2.
Częste błędy
- Sprawdzanie kontrastu tylko dla dużego tekstu i używanie koloru dla małego.
- Poleganie wyłącznie na kolorze do przekazywania znaczenia.
Najczęściej zadawane pytania
Jakiego współczynnika kontrastu potrzebuję?
Co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego, aby spełnić WCAG AA.
Czy duży tekst to specjalny rozmiar?
Tak: co najmniej 24 px lub ok. 18,7 px pogrubionym.
Czy mogę wpisać nazwę koloru?
Tak, działa każda nazwa koloru CSS, np. teal lub tomato.
Powiązane narzędzia
| Poziom | Zwykły tekst | Duży tekst |
|---|---|---|
| AA | Zalicza | Zalicza |
| AAA | Zalicza | Zalicza |
Formaty
- HEX
- RGB
- HSL
- HSV
- CMYK