Sprawdzanie kontrastu kolorów
Wpisz kolor pierwszego planu i tła, a narzędzie zwróci współczynnik kontrastu WCAG (od 1:1 do 21:1) oraz werdykty zaliczenia/niezaliczenia względem progów WCAG 2.1 AA i AAA dla zwykłego tekstu, dużego tekstu i elementów nietekstowych. Pod maską używa wzoru luminancji WCAG, prosta matematyka, ale kluczowa dla dostępności. Napraw niezaliczenia, regulując jasność, aż współczynnik przekroczy próg, którego potrzebujesz.
Jak obliczany jest współczynnik kontrastu
-
1
Wpisz dwa kolory
Hex, 3 lub 6 cyfr, dla obu kolorów. Dla każdego dostępny jest próbnik kolorów.
-
2
Obliczenie luminancji względnej dla każdego
L = 0,2126·R + 0,7152·G + 0,0722·B, gdzie każdy kanał jest linearyzowany z sRGB.
-
3
Współczynnik kontrastu
(L_jaśniejszy + 0,05) / (L_ciemniejszy + 0,05). Współczynniki od 1:1 do 21:1.
-
4
Plakietki zaliczenia / niezaliczenia
AA (4,5:1 dla zwykłego, 3:1 dla dużego/UI), AAA (7:1 dla zwykłego, 4,5:1 dla dużego). Duży tekst = ≥18pt zwykły albo ≥14pt pogrubiony.
Progi kontrastu WCAG
| Typ treści | Próg AA | Próg AAA |
|---|---|---|
| Zwykły tekst | 4.5:1 | 7:1 |
| Duży tekst (≥18pt zwykły albo ≥14pt pogrubiony) | 3:1 | 4.5:1 |
| Nietekstowe (komponenty UI, obwódki fokusu) | 3:1 | - |
| Tekst incydentalny (dekoracyjny, wyłączony, logo) | zwolniony | zwolniony |
„Duży tekst” oznacza wagę zwykłą 18pt+ (~24px w CSS) albo pogrubienie 14pt+ (~19px pogrubione).
Przykładowe kontrasty
| Para | Współczynnik | AA zwykły | AA duży | AAA zwykły |
|---|---|---|---|---|
| Czarny na białym | 21:1 | Zaliczony | Zaliczony | Zaliczony |
| #333 na białym | 12.6:1 | Zaliczony | Zaliczony | Zaliczony |
| #666 na białym | 5.7:1 | Zaliczony | Zaliczony | Niezaliczony |
| #888 na białym | 3.5:1 | Niezaliczony | Zaliczony | Niezaliczony |
| #AAA na białym | 2.3:1 | Niezaliczony | Niezaliczony | Niezaliczony |
| Biały na #1976D2 (Material blue 700) | 4.6:1 | Niezaliczony | Zaliczony | Niezaliczony |
| Biały na #2196F3 (Material blue 500) | 3.1:1 | Niezaliczony (zwykły) | Zaliczony | Niezaliczony |
Częste pułapki dostępności
- Szary tekst zasadniczy na białym w #999 lub jaśniejszy, nie spełnia AA. Użyj #767676 lub ciemniejszego dla tekstu zasadniczego na białym.
- Niebieski link na szarym: często nie spełnia, bo oba kolory mają średnią luminancję.
- Biały tekst na kolorze marki: spełnia na ciemniejszych odcieniach (≥ 4,5:1), nie spełnia na kolorach marki w średnim tonie. Użyj większego tekstu albo ciemniejszej marki.
- Tekst zastępczy często ma niski kontrast „dla podpowiedzi”, WCAG nadal obowiązuje, jeśli użytkownicy muszą go przeczytać.
- Stan wyłączony: WCAG 2.2 wymaga 3:1 dla wyłączonego tekstu względem tła kontrolki, chyba że sam stan jest komunikowany w inny sposób.
Czego WCAG ci nie mówi
- WCAG 2.x używa wzoru z 1988 roku. Nowoczesny APCA (zaawansowany percepcyjny algorytm kontrastu) lepiej oddaje postrzeganą czytelność, ale nie jest jeszcze podstawą prawną. Podbij liczby nieco ponad minima WCAG, by obsłużyć APCA i przypadki brzegowe.
- Kontrast to nie jedyny wymiar dostępności. Współczynnik 21:1 nic nie znaczy, jeśli font ma 9px, interlinia jest ściśnięta, a kolor znaczenia to czerwono-zielony.
Poprawa niezaliczonej pary
- Jaśniejszy pierwszy plan na ciemnym tle albo ciemniejszy pierwszy plan na jasnym.
- Zwiększ rozmiar lub wagę fontu, próg dużego tekstu jest niższy.
- Dodaj tło za tekstem na grafice (nakładka, gradient).
- Nigdy nie naprawiaj kontrastu, przygaszając do szarości, która nadal nie spełnia, napieraj, aż osiągniesz AA.
Sprawdzaj po każdej zmianie, narzędzie przelicza współczynnik na żywo, a niewielka zmiana jasności może szybko odwrócić werdykt.
Najczęściej zadawane pytania
AA to podstawa prawna w większości jurysdykcji (Section 508 w USA, EN 301 549 w UE) i to, co oznacza większość narzędzi audytowych. AAA jest aspiracyjne, wymagane tylko w konkretnych kontekstach dostępności (treści edukacyjne dla użytkowników z niedowidzeniem). Dąż do AA i traktuj AAA jako bonus.
Nie, przyjmuje wyłącznie nieprzezroczyste kolory hex, 3 lub 6 cyfr. Najpierw przelicz RGB lub HSL na hex albo skorzystaj z próbnika kolorów, który zawsze zwraca hex.
WCAG 2.1 SC 1.4.11 wymaga kontrastu 3:1 dla nietekstowych komponentów UI i obiektów graficznych. Dotyczy to wskaźników fokusu, obramowań pól, przycisków tylko z ikoną oraz stanów (hover, active). Sprawdź zarówno stan domyślny, jak i fokus.
Testuj każdy tryb osobno, współczynniki kontrastu w motywie jasnym i ciemnym są niezależne. Wiele palet zaliczających w trybie jasnym nie spełnia wymogów w trybie ciemnym przy tej samej względnej jasności.
Powiązane narzędzia
Tabela ASCII
Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.
Referencja znaków HTML
Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.
Generator losowych liter
Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.
Konwerter ASCII na binarny
Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.
Konwerter binarnego na ósemkowy
Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.
Próbnik kolorów HEX
Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.