Kontroler Kontrastu Kolorów

Przetestuj współczynnik kontrastu między kolorami pierwszego planu i tła, aby zapewnić dostępność.

1.00:1
Kontrast
Fail
Bardzo słaby

Normalny tekst

AA (4.5:1)
AAA (7:1)

Duży tekst

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#0088cc

Szybkie poprawki

Aa

Tytuł podglądu

Szybki brązowy lis przeskakuje nad leniwym psem

Przykład małego tekstu (12px)

Tekst
#000000
Kontekst
#0088cc

Standardy WCAG

Level AA

Minimalny współczynnik kontrastu 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. Wymagane dla większości stron internetowych.

Level AAA

Zwiększony współczynnik kontrastu 7:1 dla normalnego tekstu i 4,5:1 dla dużego tekstu. Zalecane dla optymalnej dostępności.

Niewystarczający kontrast dla wszystkich rozmiarów tekstu - nie spełnia standardów WCAG.

Kontroler Kontrastu Kolorów

Oblicz współczynnik kontrastu kolorów tekstu i tła.

Wybierz kolor za pomocą próbnika kolorów dla tekstu i tła lub wprowadź kolor w formacie szesnastkowym RGB (np. #259 lub #2596BE). Możesz dostosować suwak, aby wybrać kolor. Wytyczne dotyczące Dostępności Treści Internetowych (WCAG) zawierają specjalne kryteria, które pomagają ustalić, czy tekst jest czytelny dla użytkowników. Kryteria te wykorzystują algorytm do mapowania kombinacji kolorów na porównywalne proporcje. Korzystając z tej formuły, WCAG stwierdza, że współczynnik kontrastu 4.5:1 między tekstem a tłem jest odpowiedni dla zwykłego tekstu, a duży tekst (18pt lub większy, lub 14pt lub większy i pogrubiony) powinien mieć współczynnik kontrastu co najmniej 3:1.

Kluczowe cechy

  • Obliczanie współczynnika kontrastu w czasie rzeczywistym
  • Sprawdzanie zgodności z WCAG AA i AAA
  • Suwaki HSL do precyzyjnego dostrajania
  • Wiele formatów podglądu

Narzędzia zaawansowane

  • Automatyczne ustalanie kolorów
  • Próbki tekstu i tła
  • Wykrywanie nazwy koloru
  • Wyniki eksportu