ImageColorPicker.com

Sprawdzanie kontrastu kolorów

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

Sprawdź swoje kolory

Testuj kombinacje kolorów, aby upewnić się, że spełniają standardy dostępności WCAG dla czytelności tekstu.

9.39 do 1
Kontrast
AAA
Wynik dla tekstu
Bardzo dobry

Porównane: #000000 na #D69FA9

Tekst

16px, Regular (400)

Liczy się jako zwykły tekst.

  • AA (WCAG 1.4.3): co najmniej 4.5:1

    Zaliczone

  • AAA (WCAG 1.4.6): co najmniej 7:1

    Zaliczone

Elementy interfejsu i grafiki

Ikony, obramowania pól, wskaźniki fokusu i inne elementy, które musisz widzieć, aby korzystać z interfejsu.

  • AA (WCAG 1.4.11): co najmniej 3:1

    Zaliczone
9.39 do 1. Tekst: spełnia AA, spełnia AAA. Komponenty UI: spełnia.
Jak to jest sprawdzane
Porównane kolory (po mieszaniu)
Tekst #000000 na tle #D69FA9
Luminancja względna
Tekst 0.0000, tło 0.4195
Wzór
(L1 + 0.05) / (L2 + 0.05) gdzie L1 to luminancja jaśniejszego koloru, a L2 ciemniejszego.
Dokładny stosunek
9.3913 do 1, pokazany jako 9.39 do 1. Pokazywana wartość jest odcięta, nie zaokrąglona, więc nigdy nie wygląda lepiej niż jest. Dokładna wartość to ta porównywana z wymaganiem.

Rozmiar tekstu: 16px, Regular (400)

Liczy się jako zwykły tekst. Duży tekst to co najmniej 24px (18pt) albo co najmniej 18.67px (14pt) gdy jest pogrubiony (grubość 700 lub więcej). Rozmiary są obcinane, nie zaokrąglane.

Liczy się jako zwykły tekst. Duży tekst to co najmniej 24px (18pt) albo co najmniej 18.67px (14pt) gdy jest pogrubiony (grubość 700 lub więcej). Rozmiary są obcinane, nie zaokrąglane.

Aa
Tytuł podglądu

Szybki brązowy lis przeskakuje nad leniwym psem

Przykład małego tekstu (12px)

Tekst
#000000
Tło
#d69fa9

Standardy WCAG

Poziom 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.

Poziom 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.

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

Najczęściej zadawane pytania

Dla zgodności z WCAG AA zwykły tekst wymaga minimalnego współczynnika kontrastu 4,5:1, a duży tekst (18pt lub 14pt pogrubiony) wymaga 3:1.

WCAG AAA wymaga wyższych współczynników kontrastu: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu, w porównaniu z odpowiednio 4,5:1 i 3:1 dla AA.

Skorzystaj z funkcji automatycznej naprawy, aby dopasować kolor tekstu lub tła, zachowując zamysł projektu, albo ręcznie dostosuj kolory suwakami HSL ze wskaźnikami wizualnymi, które pokazują optymalne strefy dla zgodności z AA/AAA.

Zielone strefy i znaczniki AA/AAA pokazują optymalne zakresy, aby osiągnąć zgodność z WCAG. Podpowiedzi kierunku (Jaśniej/Ciemniej) wskazują, w którą stronę zmienić kolor, aby poprawić kontrast dla twojej kombinacji.

Tak, możesz wpisać dowolne kody HEX albo wybrać własne kolory w selektorze kolorów. Adres URL aktualizuje się automatycznie, dzięki czemu możesz udostępnić konkretną kombinację kolorów.