Kontroler kontrastu kolorów

Wszystkie narzędzia

Sprawdź współczynnik kontrastu WCAG między kolorem tekstu a tłem — zobacz oceny pass/fail AA/AAA dla tekstu normalnego, dużego i elementów UI, z podglądem na żywo i sugestiami dostępnych kolorów.

Kolor tekstu
Tint
Kolor tła
Tint
Współczynnik kontrastu
--:1
Tekst normalny
Tekst akapitu poniżej 18px (lub poniżej 14px pogrubiony)
AA AAA
Tekst duży
18px+ zwykły lub 14px+ pogrubiony
AA AAA
Elementy UI
Ikony, ramki, kontrolki formularzy i grafika
AA AAA
Podgląd na żywo

Zwinny brązowy lis

Duży tekst czyta się wygodnie, gdy kontrast jest wystarczający.

To jest przykładowy akapit normalnego tekstu. Dobry kontrast kolorów sprawia, że treść jest czytelna dla wszystkich, w tym osób z słabym wzrokiem lub daltonizmem. przykładowy link.

Drobny druk i podpisy są najtrudniejsze do czytania — wymagają największego kontrastu.
Przykładowy przycisk Przykładowy przycisk
Sugestia

Wszystko jest obliczane na żywo w Twojej przeglądarce przy użyciu formuły względnej luminancji WCAG 2.x — bez przesyłania, bez rejestracji, całkowicie bezpłatnie.

O Kontroler kontrastu kolorów

Sprawdzacz kontrastu kolorów mierzy współczynnik kontrastu WCAG między kolorem tekstu a kolorem tła, a następnie ocenia parę pod kątem poziomów dostępności AA i AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu. Współczynnik i każdy werdykt zaliczenia/niezaliczenia aktualizują się na bieżąco przy zmianie dowolnego koloru.

Realistyczny panel podglądu renderuje nagłówki, tekst główny, drobny druk, przycisk i link w wybranej przez Ciebie kombinacji, dzięki czemu możesz ocenić czytelność na prawdziwej treści zamiast abstrakcyjnych próbek. Gdy para nie przechodzi testu, narzędzie sugeruje najbliższy dostępny kolor tekstu, który osiąga próg AA wynoszący 4,5:1, gotowy do zastosowania jednym kliknięciem.

Obliczenia opierają się na wzorze względnej luminancji WCAG 2.x i działają w całości w Twojej przeglądarce — nic nie jest przesyłane, a kontrole są darmowe. Możesz też skopiować zwięzły raport tekstowy współczynnika i ocen, aby wkleić go do przeglądu dostępności lub pull requesta.

Jak korzystać z Kontroler kontrastu kolorów

  1. Ustaw kolor tekstu i kolor tła za pomocą selektorów lub wpisując wartości.
  2. Odczytaj współczynnik kontrastu oraz wyniki AA/AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu.
  3. Sprawdź podgląd na żywo, aby zobaczyć prawdziwe nagłówki, akapity, przyciski i linki w Twoich kolorach.
  4. Jeśli para nie przechodzi testu, zastosuj sugerowany dostępny kolor tekstu lub zamień oba kolory miejscami.
  5. Kliknij „Kopiuj raport”, aby udostępnić współczynnik i wyniki zgodności.

Najczęściej zadawane pytania

WCAG AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu, takich jak ikony i obramowania formularzy. Bardziej rygorystyczny poziom AAA wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu.

Tekst o rozmiarze 18px lub większym o normalnej grubości, lub 14px i większy przy pogrubieniu. Ponieważ duże znaki są łatwiejsze do odczytania, WCAG dopuszcza dla nich niższy współczynnik kontrastu 3:1 na poziomie AA.

Tak. Każda kontrola jest obliczana natychmiast w Twojej przeglądarce przy użyciu wzoru względnej luminancji WCAG, bez rejestracji, bez limitu użycia i bez kosztów.

Skorzystaj z wbudowanej sugestii: narzędzie znajduje najbliższy wariant koloru tekstu, który przechodzi AA na tle bieżącego koloru tła, i pozwala go zastosować bezpośrednio. Jeśli żaden wariant koloru tekstu nie przejdzie testu, dostosuj zamiast tego tło.

Obejmuje on kryteria kontrastu kolorów, które są jedną z najczęstszych przyczyn niedostępności, ale nie wszystko. Powinieneś nadal sprawdzić stany fokusu, niezależność informacji od koloru, rozmiary czcionek oraz jak paleta wypada w symulacji ślepoty barw.

Nie. Oba kolory, współczynnik i sugestie są obliczane lokalnie w Twojej przeglądarce — strona nie wykonuje żadnych zapytań do serwera podczas Twojej pracy.
Udostępnij
Powiązane narzędzia
Symulator daltonizmu Zobacz swój obraz lub paletę tak, jak widzą je osoby z protanopią, deuteranopią, tritanopią lub achromatopsją — działa całkowicie w Twojej przeglądarce, nic nie jest przesyłane. Bezpłatnie
Eksporter palet Wklej lub zaimportuj zestaw kolorów i eksportuj je natychmiast do zmiennych CSS, SCSS, konfiguracji Tailwind, JSON lub próbek SVG — ostatni krok dla każdej palety. Bezpłatnie
Dobór czcionek i katalog Google Fonts Przeglądaj wyselekcjonowany katalog popularnych czcionek Google Fonts z podglądem na żywo, filtruj według kategorii i wyszukuj po nazwie, a następnie kopiuj gotowy do wklejenia CSS i odkrywaj sugerowane pary czcionek — wszystko w przeglądarce. Bezpłatnie
Ekstraktor kolorów z obrazu Wyodrębnij dopracowaną, gotową do kopiowania paletę kolorów z dowolnego obrazu. Bezpłatnie
Pełny zielony ekran Wypełnij cały ekran czystą zielenią, aby przetestować kanał zielonego sub-pixela, ujawnić martwe piksele lub użyć jako szybkie tło chroma-key. Za darmo. Bezpłatnie
Paleta kolorów bezpiecznych dla sieci Przeglądaj klasyczne 216 kolorów bezpiecznych dla sieci jako klikalną siatkę próbek — sortuj według barwy lub kolejności kostki, filtruj według hex i kopiuj dowolną wartość HEX lub rgb() natychmiast. Bezpłatnie
Popularne wyszukiwania
sprawdzanie kontrastu kolorów współczynnik kontrastu wcag kontrola dostępności kontrastu sprawdzanie kontrastu tekstu test kontrastu aa aaa sprawdź kontrast kolorów online
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.