Logo XTools
XTools

Sprawdzanie kontrastu

Sprawdź kontrast tekstu i tła według WCAG AA i AAA
  • Pliki nie opuszczają urządzenia
  • Działa w przeglądarce
  • Za darmo, bez konta, bez znaku wodnego

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Jak używać: Sprawdzanie kontrastu

Sprawdź parę koloru tekstu i tła według WCAG 2 (AA i AAA dla zwykłego tekstu, dużego tekstu i komponentów interfejsu) i zobacz kontrast jasności APCA ze szkicu WCAG 3. Gdy para nie przechodzi, podpowiada najbliższe kolory, które przechodzą.

  1. 1

    Wpisz Kolor tekstu i Kolor tła jako HEX, rgb(), hsl(), oklch() albo nazwę koloru albo kliknij próbkę, aby otworzyć próbnik koloru.

  2. 2

    Odczytaj Współczynnik kontrastu oraz wynik Zalicza albo Nie zalicza dla każdego sprawdzenia AA i AAA.

  3. 3

    Popatrz na Podgląd, wpisz własny Tekst próbny i użyj Zamień kolory, aby sprawdzić odwrotność.

  4. 4

    W Najbliższych kolorach, które przechodzą, kliknij Zastosuj przy podpowiedzi Dostosuj tekst albo Dostosuj tło dla AA (4.5:1) albo AAA (7:1).

  5. 5

    Gdy zmienisz kolor, URL strony trzyma oba kolory, więc możesz go skopiować, aby udostępnić wynik.

Częste pytania

Jakiego współczynnika kontrastu potrzebuję?

WCAG AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (24 px i więcej albo 18,66 px pogrubionego) oraz komponentów interfejsu, takich jak ikony i obramowania pól. AAA wymaga 7:1 i 4.5:1.

Dlaczego 4.497:1 jest pokazane jako 4.49, a nie 4.50?

Współczynnik nigdy nie jest zaokrąglany w górę przez próg, więc para, która ledwo nie osiąga 4.5:1, nie wygląda, jakby przechodziła.

Czy mogę sprawdzić półprzezroczysty tekst?

Tak. Użyj suwaka Krycie tekstu; półprzezroczysty tekst jest mieszany z tłem, zanim zmierzony zostanie współczynnik.

Co to za liczba APCA?

APCA pochodzi ze szkicu WCAG 3 i daje kontrast jasności (Lc), który zależy od tego, który kolor jest tekstem; wartości ujemne oznaczają jasny tekst na ciemnym tle. To nadal szkic, więc współczynniki WCAG 2 pozostają zwykłym celem zgodności.

Jak wybierane są sugerowane kolory?

Zmieniana jest tylko jasność (w OKLCH), więc odcień i charakter koloru zostają. Jeśli żaden kierunek nie osiąga celu, mówi Nieosiągalne samą zmianą jasności; spróbuj dostosować drugi kolor.