QuickATools

Narzędzia deweloperskie · Free browser tool

Checker kontrastu kolorów WCAG

Sprawdzaj na żywo współczynniki kontrastu tekstu względem tła. Natychmiast weryfikuj zgodność z WCAG 2.1 AA i AAA dla dostępnego projektowania stron.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

Jakich współczynników kontrastu faktycznie wymaga WCAG 2.1?

Kryterium sukcesu WCAG 2.1 1.4.3 (Contrast Minimum) wymaga współczynnika kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu na poziomie AA. Poziom AAA (1.4.6 Contrast Enhanced) podnosi te progi do 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. Współczynniki liczy się z względnej luminancji każdego koloru i mieszczą się w zakresie od 1:1 (identyczne kolory) do 21:1 (czysta czerń na czystej bieli).

Jaka jest praktyczna różnica między AA a AAA?

AA to najczęstszy cel zgodności dla publicznych stron, usług rządowych i produktów komercyjnych — równoważy czytelność z elastycznością designu. AAA to surowszy poziom wzmocniony, gdy potrzebujesz maksymalnej czytelności (np. długie formy czytania lub odbiorcy ze znaczną słabą wzrokiem). Spełnienie AAA dla każdego elementu UI bywa niepraktyczne, więc wiele zespołów celuje w AA globalnie, a AAA dla kluczowego tekstu treści.

Co według WCAG liczy się jako „duży tekst”?

Duży tekst to co najmniej 18 punktów (zazwyczaj ~24px) zwykłej grubości albo co najmniej 14 punktów (zazwyczaj ~18.66px) pogrubienia. Nagłówki i hero copy często się kwalifikują; akapity body zwykle nie. Duży tekst ma niższy próg kontrastu, bo większe glify pozostają czytelne przy słabszym kontraście — ale i tak warto sprawdzić realny rozmiar w CSS, a nie tylko w pliku projektowym.

Dlaczego kontrast kolorów jest tak ważny dla dostępności?

Niski kontrast to jedna z najczęstszych awarii dostępności. Użytkownicy ze słabym wzrokiem, osoby starsze, ludzie na przyciemnionych lub oświetlonych słońcem ekranach oraz wielu z zaburzeniami widzenia barw polega na wystarczającej różnicy luminancji — nie tylko odcieniu — by czytać tekst. Sprawdzanie kontrastu wcześnie zapobiega wypuszczaniu interfejsów, które wyglądają dopracowanie w idealnych warunkach, ale stają się nieużywalne dla dużej części realnych odwiedzających.

Narzędzia, które też mogą się przydać

Odkryj inne darmowe narzędzia w przeglądarce dla sprzedawców, twórców i profesjonalistów.

Dlaczego kontrast kolorów jest nie do pominięcia w dostępnych interfejsach

Projektowanie bez barier to nie opcjonalny poler — to sposób, w jaki osoby ze słabym wzrokiem, zaburzeniami widzenia barw lub ostrym blaskiem na zewnątrz nadal czytają Twoje UI. WCAG 2.1 definiuje minimalne współczynniki kontrastu między tekstem a tłem, żeby treść pozostała czytelna dla znacznie szerszego grona użytkowników. Niespełnienie tych progów po cichu wyklucza ludzi z formularzy, dokumentacji, dashboardów i stron marketingowych, które designerom na skalibrowanych monitorach wyglądają dobrze.

Od stron rządowych, produktów enterprise i wielu globalnych aplikacji konsumenckich oczekuje się co najmniej WCAG AA. Sprawdzanie kontrastu w przeglądarce — tą samą formułą względnej luminancji, której używa specyfikacja — pozwala walidować decyzje palety przed wdrożeniem, bez wysyłania kolorów marki do zewnętrznej usługi. Zamień tekst i tło, podejrzyj duży vs zwykły tekst i udostępnij link do palety zespołowi, gdy kombinacja przechodzi.

AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego; AAA podnosi te poprzeczki do 7:1 i 4.5:1. Duży tekst to zwykle 18pt (ok. 24px) regular lub 14pt (ok. 18.66px) bold. Używaj tego narzędzia jako szybkiej bramki w review designu, a potem potwierdź finalne UI w kontekście — ikony, gradienty i nakładki mogą zmienić efektywny kontrast nawet gdy dwa płaskie hexy przechodzą.

Więcej narzędzi deweloperskich na tej stronie: waliduj wzorce formularzy w Regex Tester, sprawdzaj tokeny auth w JWT Decoder, uporządkuj design tokens jako JSON w JSON Formatter & Validator albo koduj assety przez Base64 Encode/Decode. Do zdjęć produktowych na marketplace Product Photo Background Checker używa tej samej matematyki luminancji na prawdziwych obrazach.