Sprawdzanie kontrastu kolorów WCAG

Oceń współczynnik kontrastu kolorów tekstu i tła zgodnie z wytycznymi WCAG 2.1. Natychmiast generuj dostępne korekty kolorów.

HEX/RGB/HSL
HEX/RGB/HSL
Wszystko działa lokalnie w przeglądarce.

Podgląd tekstu na żywo

Duży nagłówek (18pt pogrubiony / 24pt zwykły)

Jest to wstępny przegląd wielkiego stylu tekstu tytułowego.

Tekst normalny (poniżej 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Współczynnik kontrastu

18.6:1

Status zgodności z WCAG 2.1

Wymagania WCAG AA
Tekst normalny (4.5:1) PASS
Duży tekst (3.0:1) PASS
Wymagania WCAG AAA
Tekst normalny (7.0:1) PASS
Duży tekst (4.5:1) PASS

Wytyczne WCAG 2.1

Łatwo weryfikuj standardy kontrastu, aby tworzyć dostępne interfejsy zgodne z wytycznymi Section 508, ADA oraz WCAG AA lub AAA.

Silnik sugestii

Automatycznie dostosowuje się kolory w sposób nieprzerwany wzdłuż koordynacji HSL, aby znaleźć najbliższe alternatywy spełniające kryteria stosunku kontrastu.

W pełni po stronie klienta

Obliczenia są wykonywane lokalnie w kontekście Twojej przeglądarki. Żadne kolory, pliki ani współrzędne telemetryczne nie są przesyłane na nasze serwery.

Powiązane narzędzia kolorów

Konwerter kolorów HEX RGB HSL
Konwertuj kolory i dostosuj współrzędne jasności.
Próbnik kolorów z obrazu
Wyodrębnij palety kolorów z makiet projektowych.
Konwerter kolorów CSS
Konwersja pomiędzy formaty CMYK, HSV, RGB, HSL i HEX.

Sprawdzanie kontrastu kolorów

Oblicz współczynniki kontrastu WCAG dla kolorów pierwszego planu i tła oraz wyświetl wyniki dla typowych rozmiarów tekstu.

Wejście
2 prawidłowe kolory CSS i opcjonalny tekst podglądu.
Wyjście
Współczynnik kontrastu ze wskaźnikami przejścia/niepowodzenia WCAG AA i AAA.
Prawdziwe ograniczenia
Obliczenie obejmuje tylko kontrast luminancji; nie certyfikuje interfejsu ani nie uwzględnia renderowania czcionek, ruchu, fokusu ani wskazówek innych niż kolory.
Prywatność i przetwarzanie danych
dwa prawidłowe kolory CSS i opcjonalny tekst podglądu są przetwarzane w tej karcie przeglądarki. Convertr nie otrzymuje ani nie przechowuje tych danych; zamknięcie lub ponowne załadowanie strony czyści stan roboczy, chyba że narzędzie wyraźnie oferuje lokalne pobranie.

Jak używać tego narzędzia

  1. Podaj dwa prawidłowe kolory CSS i opcjonalny tekst podglądu w kontrolkach narzędzia.
  2. Wybierz ustawienia, które wpływają na współczynnik kontrastu ze wskaźnikami przejścia lub niepowodzenia WCAG AA i AAA, a następnie uruchom narzędzie.
  3. Przejrzyj współczynnik kontrastu ze wskaźnikami przejścia lub niepowodzenia WCAG AA i AAA przed skopiowaniem lub pobraniem.

Typowe tryby awarii

Nieprawidłowe kolory nie mogą być zmierzone, a przezroczystość bez rozpoznanego tła może sprawić, że współczynnik będzie bez znaczenia.

Przydatny przykład

Porównaj tekst #1f2937 na #ffffff, aby sprawdzić jego stosunek do normalnego i dużego tekstu.