Sprawdzacz Kontrastu Kolorow

Sprawdzaj wspolczynnik kontrastu kolorow pod katem zgodnosci z WCAG AA/AAA z natychmiastowym podgladem, sugestiami poprawek i sprawdzeniami do udostepnienia.

WCAG AA: 4,5:1 (tekst normalny) i 3:1 (tekst duzy). WCAG AAA: 7:1 (tekst normalny) i 4,5:1 (tekst duzy). Duzy tekst to 18pt+ (24px) lub 14pt+ pogrubiony.

Kolor pierwszego planu (tekst)

Kolor tla

Podglad na zywo

Zawiera probki tekstu normalnego i duzego
Tekst na tle

Tekst przykladowy (normalny)

Tekst przykladowy (duzy)

Tekst przykladowy (pogrubiony duzy)

Tlo na tekscie

Tekst przykladowy (normalny)

Tekst przykladowy (duzy)

Tekst przykladowy (pogrubiony duzy)

Wspolczynnik kontrastu i WCAG

Co oznacza AA i AAA?

AA to minimalny wymog kontrastu dla wiekszosci tekstu (4,5:1 dla tekstu normalnego, 3:1 dla duzego).

AAA to podwyzszony poziom dostepnosci (7:1 dla tekstu normalnego, 4,5:1 dla duzego).

Duzy tekst to 18pt (24px) lub wiecej, albo 14pt (18,66px) pogrubiony.

Wspolczynnik kontrastu
—
Dostosuj kolory, aby zobaczyc wyniki.

WCAG AA

Tekst normalny (≥4.5:1) —
Duzy tekst (≥3:1) —

Poziom WCAG AAA

Tekst normalny (≥7:1) —
Duzy tekst (≥4.5:1) —

Ostatnio sprawdzane

Brak ostatnich par kolorow.

Zastosowania

Typowe sposoby, w jakie programisci i projektanci korzystaja ze sprawdzacza kontrastu.

  • Sprawdz kontrast tekstu przyciskow

    Szybko potwierdz, ze etykiety przyciskow sa czytelne i spelniaja wymagania WCAG.

  • Napraw niepoprawna kombinacje

    Dostosuj jasnosc i zastosuj sugestie, aby osiagnac AA/AAA, zachowujac podobny kolor.

  • Audyt kolorow systemu

    Sprawdz czeste pary w systemie projektowym i udokumentuj, ktore spelniaja AA/AAA dla roznych rozmiarow tekstu.

  • Porownaj opcje tla marki

    Porownaj tla marki z czarnym/bialym tekstem, aby wybrac najbardziej czytelna opcje.

  • Zweryfikuj zgodnosc dla duzego tekstu

    Sprawdz, kiedy para jest akceptowalna dla duzego tekstu, nawet jesli nie przechodzi dla normalnego.

FAQ sprawdzacza kontrastu kolorow

Jak uzywac sprawdzacza kontrastu kolorow?
Wpisz lub wybierz kolor tekstu i kolor tla, sprawdz na zywo wspolczynnik kontrastu oraz wyniki AA/AAA i uzyj suwakow lub sugestii, jesli para nie przechodzi. Uzyj Resetuj, aby wrocic do domyslnego przykladu czarny na bialym.
Czy ten sprawdzacz kontrastu jest darmowy?
Tak. Aplikacja jest darmowa i nie wymaga konta.
Czy sprawdzacz zapisuje lub udostepnia moje kolory?
Sprawdzacz dziala w Twojej przegladarce. Ostatnie pary sa zapisywane tylko w lokalnym magazynie tej przegladarki, aby mozna bylo otworzyc je ponownie, a biezaca para jest tez zapisywana w adresie URL strony, aby mozna bylo udostepnic wynik. Na stronie produkcyjnej moga nadal ladowac sie standardowe analityki serwisu.
Dlaczego widze blad koloru lub nieoczekiwany wynik?
Sprawdz, czy kazda wartosc jest poprawnym HEX, RGB lub HSL. Jesli para nadal nie przechodzi, uzyj Resetuj, Losowa dostepna para albo przyciskow sugestii, aby znalezc lepsza kombinacje.
Gdzie znajde wskazowki WCAG i skroty klawiszowe?
Skorzystaj z panelu pomocy w aplikacji. Wyjasnia on obslugiwane formaty, progi AA/AAA, skroty, lokalna historie i zamykanie okien klawiszem Escape.