Sprawdzanie Kontrastu Kolorów
Pchnąć w tę łódź jeża lub ośm skrzyń fig
Pchnąć w tę łódź jeża lub ośm skrzyń fig
Czym jest Sprawdzanie Kontrastu Kolorów
To narzędzie mierzy stosunek kontrastu między kolorem tekstu a kolorem tła i sprawdza go względem wytycznych dostępności WCAG 2.1. Wyświetla podgląd na żywo obu kolorów razem i informuje, czy para przechodzi AA lub AAA dla tekstu normalnego i dużego — dzięki temu możesz wychwycić problemy z czytelnością zanim trafią na produkcję.
Jak używać
- Wybierz lub wpisz kolor tekstu w pierwszym polu jako kod HEX.
- Wybierz lub wpisz kolor tła w drugim polu.
- Sprawdź stosunek kontrastu i plakietki zaliczony/niezaliczony dla AA i AAA.
- Kliknij przycisk zamiany, aby przetestować kolory w odwrotnej kolejności.
- Skopiuj URL, aby udostępnić dokładną parę kolorów swojemu zespołowi.
Kiedy używać
Wybierasz kolor tekstu do nowego projektu i nie masz pewności, czy jest wystarczająco czytelny? Wpisz kolor tekstu i tła — na przykład #767676 na #FFFFFF — a otrzymasz stosunek 4,54:1: zaliczony dla AA przy zwykłym tekście, ale niezaliczony dla AAA. To różnica między dostępnym produktem a uwagą podczas audytu, niezależnie od tego, czy oceniasz witrynę klienta, czy wdrażasz własną aplikację.
Często zadawane pytania
Jaki stosunek kontrastu jest dobry dla tekstu?
WCAG AA wymaga co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego (18pt lub 14pt pogrubiony i większy). WCAG AAA jest bardziej rygorystyczny: 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego.
Jaki jest maksymalny możliwy stosunek kontrastu?
21:1 — stosunek między czystą czernią (#000000) a czystą bielą (#FFFFFF). Żadna para kolorów nie może go przekroczyć.
Dlaczego moje kolory nie przeszły AA, choć projekt wygląda dla mnie dobrze?
Stosunek kontrastu mierzy dostępność, nie osobiste upodobania. Osoba niedowidząca lub ktoś patrzący na ekran w jasnym słońcu potrzebuje więcej kontrastu niż para, która wygląda dobrze dla typowego wzroku.
Czy to narzędzie sprawdza też daltonizm?
Nie. Narzędzie sprawdza kontrast luminancji zgodnie ze wzorem WCAG, co przynosi korzyść wszystkim użytkownikom, w tym osobom z wieloma formami daltonizmu, ale nie symuluje konkretnych zaburzeń widzenia barw.
Czy mogę udostępnić to narzędzie z wypełnionymi danymi?
Tak. Adres URL aktualizuje się automatycznie podczas wyboru kolorów. Skopiuj link z paska adresu lub użyj przycisku Udostępnij — każdy, kto otworzy link, zobaczy Twoje dokładne kolory już gotowe.
Powiązane narzędzia
Kalkulator Proporcji Obrazu
Oblicz proporcje obrazu, znajdź brakującą szerokość lub wysokość i zmieniaj rozmiar zdjęć oraz filmów bez utraty proporcji. Za darmo.
Dekoder Base64
Dekoduj ciągi Base64 do zwykłego tekstu błyskawicznie w przeglądarce. Obsługuje pełne kodowanie Unicode z emoji. Darmowy dekoder Base64.
Enkoder Base64
Konwertuj dowolny tekst do Base64 błyskawicznie w przeglądarce. Obsługuje Unicode, emoji i znaki specjalne. Darmowy enkoder Base64.