Sprawdzanie kontrastu kolorów

Testuj 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)
White
#ffffff
Rose of Sharon
#bf5500

Szybkie poprawki

Aa

Tytuł podglądu

Szybki brązowy lis przeskakuje nad leniwym psem

Przykład małego tekstu (12px)

Tekst
#ffffff
Tło
#bf5500

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.

Narzędzie do sprawdzania kontrastu kolorów

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

Wybierz kolor za pomocą selektora 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 w sieci (WCAG) zawierają szczegółowe wytyczne, które pomagają określić, czy tekst jest czytelny dla osób widzących. Kryteria te wykorzystują określony algorytm do mapowania kombinacji kolorów na porównywalne współczynniki. Zgodnie z tą formułą, WCAG stwierdza, że współczynnik kontrastu 4.5:1 między tekstem a jego tłem jest wystarczający dla zwykłego tekstu (treść), a duży tekst (18+ pt zwykły lub 14+ pt pogrubiony) powinien mieć co najmniej współczynnik kontrastu 3:1.

Kluczowe funkcje

  • 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

Zaawansowane narzędzia

  • Automatyczna naprawa kolorów
  • Próbki tekstu i tła
  • Wykrywanie nazw kolorów
  • Eksport wyników