Kontroler kontrastu kolorów

Sprawdź kontrast pierwszego planu/tła względem WCAG AA i AAA. Zobacz aktualizację proporcji podczas wybierania kolorów.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Sprawdź kontrast pierwszego planu/tła zgodnie z wytycznymi WCAG AA i AAA.
Działa w Twojej przeglądarce
Bezpłatne

Jak używać

Wybierz kolory tekstu (pierwszego planu) i tła.
Przeczytaj współczynnik kontrastu i wyniki AA/AAA.
Dostosuj, aż przekroczysz poziom docelowy.

How this tool works

Wybierz kolory tekstu (pierwszego planu) i tła.
Przeczytaj współczynnik kontrastu i wyniki AA/AAA.
Dostosuj, aż przekroczysz poziom docelowy.

Recommended settings

Najpierw użyj opcji domyślnych, a następnie dostosuj je w razie potrzeby

Supported formats

Text / on-page input

File size and limits

Bardzo złożone wielowarstwowe podglądy mogą działać wolniej na starszych telefonach.

Privacy

Generatory kolorów i CSS działają całkowicie w przeglądarce. Podglądy i konwersje nigdy nie przesyłają Twoich stylów.

Common use cases

Używaj modułu sprawdzania kontrastu kolorów, kiedy tylko potrzebujesz: Sprawdź kontrast pierwszego planu/tła zgodnie z wytycznymi WCAG AA i AAA.

Troubleshooting

Podgląd wygląda inaczej po wklejeniu

Sprawdź, czy na Twojej stronie nie ma konkurencyjnych CSS (resetowanie, dziedziczone kolory). Najpierw skopiuj wygenerowaną regułę do izolowanego arkusza stylów.

FAQ

Czy to przesyła mój CSS?

Nie. Generatory i konwertery działają w Twojej przeglądarce z podglądem na żywo.

Czy potrzebuję konta?

Nie. Otwórz narzędzie, dostosuj elementy sterujące i skopiuj CSS.