Sprawdzarka Kontrastu Kolorów

Sprawdza stosunek kontrastu kolorów zgodnie z wytycznymi dostępności WCAG 2.1. Natychmiastowe wyniki AA/AAA.

Kolor pierwszego planu

Kolor tła

Podgląd dużego tekstu (18pt pogrubiony)

Podgląd normalnego tekstu — The quick brown fox jumps over the lazy dog.

14.05:1stosunek kontrastu

AA — Normalny tekst (≥ 4,5:1)Zaliczono

AA — Duży tekst (≥ 3:1)Zaliczono

AAA — Normalny tekst (≥ 7:1)Zaliczono

AAA — Duży tekst (≥ 4,5:1)Zaliczono

O tym narzędziu

Sprawdzarka kontrastu kolorów oblicza stosunek kontrastu między kolorem pierwszego planu (tekst) a tłem za pomocą formuły względnej luminancji WCAG 2.1.

WCAG 2.1 definiuje dwa poziomy: AA wymaga 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. AAA wymaga 7:1 i 4,5:1.

Jak używać

Wybierz kolor pierwszego planu i tła za pomocą selektorów lub wpisz kody hex.
Podgląd pokazuje jak tekst wygląda w normalnym i dużym rozmiarze.
Stosunek kontrastu i wyniki WCAG aktualizują się natychmiast.
Użyj przykładowych par, aby poznać typowe wzorce dostępności.

Przypadki użycia

Projektanci UI sprawdzają czy etykiety przycisków i tekst spełniają standardy WCAG. Deweloperzy frontend sprawdzają kombinacje tekst-tło w systemach projektowych.

Często zadawane pytania

Co liczy się jako "duży tekst"? — WCAG definiuje duży tekst jako co najmniej 18pt (24px) normalny lub 14pt (~18.67px) pogrubiony.
Czy obsługuje przezroczystość lub rgba? — Nie, to narzędzie działa tylko ze stałymi kolorami hex.
Jaki poziom WCAG powinienem osiągnąć? — AA to zalecane minimum dla większości publicznych stron. AAA zapewnia lepszą czytelność.
Czy 4,5:1 zawsze wystarcza? — 4,5:1 spełnia WCAG AA, ale użytkownicy z poważniejszymi wadami wzroku mogą skorzystać z wyższych stosunków.