WCAG kontrast kolorowy

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

Sprawdzanie Kontrastu Kolorów

Oblicz stosunki kontrastu WCAG dla kolorów przedniej i tła oraz wyświetl wyniki ogólnej wielkości tekstu.

Wejście
2 ważne kolory CSS i opcjonalny tekst przeglądu.
Wyjście
Stosunek kontrastu z wskaźnikami WCAG AA i AAA przechodzącymi lub nieprzyjaźnianymi.
Prawdziwe ograniczenia
Obliczanie obejmuje tylko kontrast światła; nie certyfikuje interfejsu ani konta na renderowanie czcionek, ruch, skupienie lub nie-kolorowe związek.
Prywatność i przetwarzanie danych
dwa ważne kolory CSS i opcjonalny tekst przeglądarki są przetwarzane w tej karcie przeglądania. konwerter nie otrzymuje ani nie przechowuje; zamknięcie lub ponowne pobieranie strony wyjaśnia stan pracy, chyba że narzędzie wyraźnie oferuje lokalne pobranie.

Jak wykorzystać ten narzędzie

  1. Dostarcz dwa ważne kolory CSS i opcjonalny tekst przeglądu w kontrolkach narzędzi.
  2. Wybierz ustawienia, które wpływają na stosunek kontrastu z WCAG AA i AAA przejść lub niepowodzenia wskaźników, a następnie uruchomić narzędzie.
  3. Przegląd stosunku kontrastu z WCAG AA i AAA przejść lub nie wskazywać przed kopiowaniem lub pobieraniem.

Wspólne tryby niepowodzenia

Nieprawidłowe kolory nie mogą być mierzone, a przejrzystość bez rozłożonego tła może sprawić, że stosunek jest bezsensowny.

Przykład przydatny

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