Sprawdzacz Kontrastu
Check if your text and background colors meet WCAG accessibility standards. Calculates contrast ratio for AA and AAA levels.
Najwazniejsze funkcje
- Obliczanie proporcji kontrastu w czasie rzeczywistym
- Sprawdzanie zgodności z WCAG 2.1 AA i AAA
- Obsługa standardów tekstu normalnego i dużego
- Zamiana kolorów i podgląd na żywo
Guide
Dostępność kontrastu kolorów określa, czy tekst na Twojej stronie internetowej jest czytelny dla wszystkich, w tym dla osób z niedosłuchem wzroku. Web Content Accessibility Guidelines (WCAG) definiują konkretne wskaźniki kontrastu, które tekst musi spełniać, aby był uznawany za dostępny. Niezaspokojenie tych standardów oznacza, że niektórzy odwiedzający nie mogą przeczytać Twoich treści, a w wielu jurysdykcjach oznacza, że Twoja strona nie spełnia prawnych wymogów dostępności. Ten przewodnik wyjaśnia, jak działają wskaźniki kontrastu, czego wymaga WCAG i jak naprawiać problemy z kontrastem bez kompromisów dla Twojego projektu. Wskaźnik kontrastu porównuje względną luminancję dwóch kolorów w skali od 1:1 (brak kontrastu, oba kolory identyczne) do 21:1 (maksymalny kontrast, czysta czerń na czystej bieli). Względna luminancja to miara tego, jak jasny jaw się kolor ludzkiemu oku, obliczana z wartości RGB koloru przy użyciu wzoru uwzględniającego sposób, w jaki ludzki wzrok postrzega różne długości fal. Czerwony, zielony i niebieski wnoszą różny wkład w postrzeganą jasność, przy czym zielony wnosí najwięcej, a niebieski najmniej. Wzór to: L = 0,2126 * R + 0,7152 * G + 0,0722 * B, gdzie R, G i B są liniaryzowane ze swoich wartości sRGB. Krok linearyzacji przekształca wartości sRGB zakodowane gammą na wartości światła liniowego poprzez zastosowanie funkcji transferu. Sam wskaźnik kontrastu oblicza się jako (L1 + 0,05) / (L2 + 0,05), gdzie L1 to względna luminancja jaśniejszego koloru, a L2 to względna luminancja ciemniejszego koloru. Wartość 0,05 uwzględnia światło otoczenia. Ten wzór daje znajomy format wskaźnika. Na przykład czysta biel ma luminancję 1,0, a czysta czerń luminancję 0,0, co daje wskaźnik kontrastu (1,0 + 0,05) / (0,0 + 0,05) = 21:1. WCAG definiuje dwa poziomy zgodności dla kontrastu. Poziom AA to podstawowy wymóg dla większości stron internetowych. Poziom AAA to bardziej rygorystyczny standard zapewniający lepszą czytelność. Dla tekstu normalnej wielkości (poniżej 18pt lub poniżej 14pt pogrubionego) poziom AA wymaga wskaźnika kontrastu co najmniej 4,5:1, a poziom AAA wymaga 7:1. Dla dużego tekstu (18pt i więcej, lub 14pt pogrubiony i więcej) poziom AA wymaga 3:1, a poziom AAA wymaga 4,5:1. Te progi opierają się na badaniach nad czytelnością dla osób z umiarkowaną obniżoną ostrością wzroku, około 20/40, co jest typowym progiem utraty wzroku u osób starszych. Wyjątek dla dużego tekstu istnieje, ponieważ większe litery są z natury łatwiejsze do przeczytania. Przy większych rozmiarach grubsze kreski i szersze przestrzenie czynią znaki bardziej rozpoznawalnymi nawet przy niższym kontraście. Dlatego nagłówki, tekst hero i inne duże teksty ekranowe mogą używać wskaźnika 3:1 przy zgodności AA, podczas gdy tekst treści wymaga 4,5:1. W terminach CSS 18pt równa się 24px przy domyślnych ustawieniach przeglądarki, a 14pt pogrubiony to w przybliżeniu 18,66px pogrubiony. Jeśli nie jesteś pewien, czy Twój tekst kwalifikuje się jako duży, zastosuj bardziej rygorystyczny wskaźnik 4,5:1 dla bezpieczeństwa. Elementy nietekstowe również mają wymagania kontrastu zgodnie z WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast). Komponenty interfejsu użytkownika (przyciski, pola formularza, wskaźniki fokusu) i obiekty graficzne (ikony, elementy wykresów), które są niezbędne do zrozumienia treści, muszą mieć wskaźnik kontrastu co najmniej 3:1 względem sąsiadujących kolorów. Jasnoszare obramowanie przycisku na białym tle, które spada poniżej 3:1, utrudnia rozpoznanie przycisku jako elementu klikalnego, zwłaszcza użytkownikom z obniżonym wzrokiem. Wskaźniki fokusu są szczególnie ważne: użytkownicy klawiatury polegają na widocznych stylach fokusu do nawigacji, a te style fokusu muszą spełniać wskaźnik 3:1 względem otaczającej treści. Daltonizm dotyka około 8% mężczyzn i 0,5% kobiet pochodzenia północnoeuropejskiego, z różną częstością w innych populacjach. Najczęstszą formą jest ślepota barw czerwono-zielonej (deuteranopia i protanopia), gdzie czerwienie i zielenie jawią się podobnie. Ślepota barw niebiesko-żółta (tritanopia) jest rzadsza. Całkowita ślepota barw (achromatopsja) jest rzadka. Obliczenia wskaźnika kontrastu oparte na luminancji działają niezależnie od percepcji barw, ponieważ mierzą różnicę jasności, a nie różnicę odcienia. Jednak poleganie wyłącznie na kolorze do przekazywania informacji (czerwony dla błędu, zielony dla sukcesu) tworzy problemy dla użytkowników daltonistów niezależnie od wskaźnika kontrastu. Zawsze dostarczaj dodatkowe sygnały wizualne, takie jak ikony, etykiety tekstowe lub wzory, obok kodowania kolorami. Tryb ciemny wprowadza dodatkowe rozważania dotyczące kontrastu. Wielu projektantów tworzy ciemne motywy, po prostu odwracając kolory, ale często daje to słabe rezultaty. Czysto biały (#FFFFFF) tekst na czysto czarnym (#000000) tle tworzy maksymalny kontrast (21:1), ale ten poziom kontrastu może powodować zmęczenie wzroku i halację (efekt poświaty wokół jasnego tekstu na ciemnym tle) u niektórych użytkowników. Nieco obniżony kontrast, jak #E0E0E0 na #121212, jest bardziej komfortowy, a jednocześnie przekracza wymagania WCAG AAA. Wytyczne Google Material Design dla ciemnego motywu zalecają użycie #121212 jako koloru powierzchni i obniżenie krycia tekstu zamiast używania czystej bieli. Tekst podstawowy używa krycia 87%, tekst drugorzędny 60%, a tekst wyłączony 38%. Kolory półprzezroczyste komplikują sprawdzanie kontrastu. Gdy używasz kolorów rgba() lub hsla() z wartościami alfa mniejszymi niż 1, rzeczywisty renderowany kolor zależy od tego, co znajduje się za nim. Biały tekst o kryciu 70% na ciemnym tle ma inny efektywny kontrast niż ten sam tekst na jasnym tle. Sprawdzając kontrast półprzezroczystego tekstu, musisz obliczyć kolor kompozytowy (rzeczywisty kolor, jaki widzi użytkownik po nałożeniu przezroczystości na tło). Wzór miesza pierwszy plan i tło na podstawie wartości alfa: composited = foreground * alpha + background * (1 - alpha), zastosowany do każdego kanału. Zawsze sprawdzaj wynik kompozytowy, a nie kolor przezroczysty w izolacji. Tła gradientowe tworzą zmienny kontrast na obszarze tekstu. Jeśli tekst leży na gradiencie przechodzącym od ciemnoniebieskiego do jasnoniebieskiego, wskaźnik kontrastu różni się na lewej i prawej krawędzi tekstu. WCAG wymaga, aby wskaźnik kontrastu był spełniony w każdym punkcie, w którym pojawia się tekst. Sprawdź kontrast w najsłabszym punkcie, czyli tam, gdzie tło jest najbliższe luminancji koloru tekstu. Jeśli gradient obejmuje zakres od #003366 do #6699CC, a Twój tekst jest biały, sprawdź kontrast względem #6699CC, ponieważ tam będzie najniższy. Dla gradientów radialnych sprawdź wiele punktów na obszarze tekstu. Tła obrazowe stanowią najtrudniejsze wyzwanie kontrastowe. Tekst na fotografiach lub wzorzystych tłach będzie miał inny kontrast w każdym pikselu. Rozwiązania to: umieszczenie stałego lub półprzezroczystego nakładki między obrazem i tekstem, użycie cienia tekstu lub konturu dla zapewnienia czytelności, albo ograniczenie tekstu do obszarów obrazu o jednolitym kolorze. Popularnym wzorcem jest ciemna gradientowa nakładka na dole obrazu hero, gdzie pojawia się tekst. Gradient przyciemnia obraz na tyle, by stworzyć wystarczający kontrast z białym tekstem. Dla nakładek rgba(0, 0, 0, 0,5) zazwyczaj doprowadza większość obrazów do zgodności WCAG AA z białym tekstem, ale zweryfikuj to ze swoimi konkretnymi obrazami. Przestrzenie kolorów i obliczenia kontrastu są bardziej złożone, niż przyznaje większość narzędzi. Standardowy wzór kontrastu WCAG używa względnej luminancji w przestrzeni kolorów sRGB. Ten wzór ma znane ograniczenia. Może przeceniac kontrast bardzo ciemnych par kolorów i niedoceniać kontrastu jasnych par kolorów. Badania wykazały, że ciemnoniebieski tekst (#00007E) na czarnym tle technicznie spełnia WCAG AA, ale w praktyce jest niezwykle trudny do przeczytania. APCA (Advanced Perceptual Contrast Algorithm) to nowsze podejście opracowane dla WCAG 3.0, które dokładniej uwzględnia ludzką percepcję wzrokową, w tym efekt polarności (ciemny tekst na jasnym tle jest postrzegany inaczej niż jasny tekst na ciemnym tle). Choć WCAG 2.x i jego wzór oparty na sRGB pozostają aktualnym standardem prawnym, APCA zapewnia dokładniejszą ocenę percepcyjną. Model APCA przypisuje różne wymagania kontrastowe na podstawie rozmiaru i wagi czcionki, tworząc macierz minimalnych wartości kontrastu zamiast podejścia binarnego progu z WCAG 2.x. Na przykład tekst 14px normalnej wagi potrzebuje wyższej wartości kontrastu APCA niż tekst 24px pogrubiony. APCA obsługuje też problem polarności: jasny tekst na ciemnym tle wymaga innych wartości kontrastu niż ciemny tekst na jasnym tle. Choć APCA nie jest jeszcze oficjalnym standardem, zrozumienie go pomaga podejmować lepsze decyzje kontrastowe, zwłaszcza w przypadkach brzegowych, gdzie WCAG 2.x daje wątpliwe wyniki. Naprawa niepowodzeń kontrastu zazwyczaj obejmuje jedno z trzech podejść: przyciemnienie tekstu, rozjaśnienie tła lub oba. Dostosowując kolory, zostań w swojej palecie marki, modyfikując wartość jasności w przestrzeni kolorów HSL, zamiast zmieniać odcień lub nasycenie. Jeśli błękit Twojej marki to hsl(210, 80%, 55%) i nie przechodzi kontrastu względem bieli, obniżenie jasności do hsl(210, 80%, 40%) może przejść, pozostając rozpoznawalnie jako błękit Twojej marki. Małe korekty jasności często rozwiązują problemy z kontrastem bez konieczności pełnego przeprojektowania. W przestrzeni kolorów OKLCH te korekty dają jeszcze bardziej jednolite percepcyjnie rezultaty. Niestandardowe właściwości CSS czynią motywowanie świadome kontrastu praktycznym. Zdefiniuj swoje kolory jako wartości HSL we właściwościach niestandardowych, a następnie utwórz warianty motywu jasnego i ciemnego, które spełniają wymagania kontrastu. Na przykład: --brand-primary: hsl(210, 80%, 40%) dla motywu jasnego i --brand-primary: hsl(210, 80%, 70%) dla motywu ciemnego. Oba używają tego samego odcienia i nasycenia, ale różnych wartości jasności zoptymalizowanych dla swoich odpowiednich teł. To podejście skaluje się do całych systemów projektowych z dziesiątkami tokenów kolorów. Utrzymujesz spójność marki, spełniając jednocześnie wymagania dostępności w każdym motywie. Integracja z systemem projektowym to miejsce, gdzie sprawdzanie kontrastu jest najbardziej wartościowe. Zamiast sprawdzać poszczególne elementy strony, zdefiniuj swoje tokeny kolorów i zweryfikuj, że każda kombinacja tekst-na-tle w Twoim systemie tokenów spełnia wymagania WCAG. Udokumentuj zatwierdzone kombinacje w macierzy kontrastu pokazującej, które kolory tekstu są bezpieczne na których kolorach tła. Następnie, gdy programiści budują komponenty, wybierają z uprzednio zatwierdzanych par kolorów, a zgodność kontrastu jest zagwarantowana przez system zamiast sprawdzana na instancję. W ten sposób duże organizacje takie jak Google, Microsoft i Adobe radzą sobie z kontrastem na dużą skalę. Tworzenie macierzy kontrastu polega na wymienieniu wszystkich kolorów tła w górze i wszystkich kolorów tekstu po boku, a następnie obliczeniu wskaźnika kontrastu dla każdego przecięcia. Oznacz każdą komórkę jako AA pass, AAA pass lub fail. Ta macierz staje się dokumentem odniesienia dla całego Twojego zespołu. Gdy projektant określa kombinację kolorów, może natychmiast sprawdzić macierz. Gdy programista implementuje komponent, macierz mówi mu, które tokeny kolorów są bezpieczne razem. Zautomatyzowane testowanie wyłapuje problemy z kontrastem wcześnie. Narzędzia takie jak axe-core, Lighthouse i Pa11y skanują renderowane strony i flagują elementy, które nie spełniają wymogów kontrastu WCAG. Zintegruj je ze swoim potokiem CI/CD, aby regresje kontrastu były wyłapywane przed wdrożeniem. Ograniczeniem zautomatyzowanych narzędzi jest to, że nie potrafią ocenić tekstu na obrazach, gradientach ani dynamicznie zmieniających się tłach. Ręczne sprawdzanie narzędziem do kontrastu pozostaje niezbędne w tych przypadkach. Kompleksowe podejście używa zautomatyzowanego testowania dla większości przypadków i ręcznego sprawdzania dla przypadków brzegowych, których automatyzacja nie obsługuje. Zgodność prawna napędza większość pilności wokół dostępności kontrastu. Americans with Disabilities Act (ADA) w Stanach Zjednoczonych, European Accessibility Act w UE, Accessibility for Ontarians with Disabilities Act w Kanadzie i podobne ustawy w innych jurysdykcjach albo bezpośrednio wymagają zgodności z WCAG, albo były przez sądy interpretowane tak, że ją wymagają. Pozwy o dostępność stron internetowych rosły z roku na rok, a niepowodzenia kontrastu były jednym z najczęściej cytowanych problemów. Spełnienie WCAG AA to powszechnie akceptowany standard prawny. Organizacje w regulowanych branżach (rząd, ochrona zdrowia, edukacja, finanse) stoją w obliczu bardziej rygorystycznych wymogów i aktywniejszego egzekwowania. Poza zgodnością prawną dobry kontrast to dobry projekt. Tekst łatwy do przeczytania konwertuje lepiej, zatrzymuje odwiedzających dłużej i zmniejsza współczynnik odrzuceń. Użytkownicy czytający na telefonach w ostrym świetle słonecznym, starsi użytkownicy z naturalnie pogarszającym się wzrokiem, użytkownicy na monitorach niskiej jakości ze słabym odwzorowaniem kolorów i użytkownicy, którzy są po prostu zmęczeni — wszyscy korzystają z silnego kontrastu. Projektowanie dla skrajnych możliwości ludzkich (niski wzrok, wymagające środowiska) tworzy projekty, które działają lepiej także dla każdego w centrum. Badania wykazały, że tekst o wyższym kontraście skraca czas czytania i poprawia zrozumienie u wszystkich użytkowników, nie tylko tych z niedosłuchem wzroku. Testowanie wyborów kontrastu w rzeczywistych warunkach oznacza sprawdzanie na wielu urządzeniach, w różnych warunkach oświetleniowych i z rzeczywistą treścią, a nie tekstem zastępczym. Para kolorów, która przechodzi matematyczne sprawdzenie kontrastu, może nadal być trudna do przeczytania, jeśli czcionka jest cienka, tekst mały, a odstępy między literami wąskie. Wskaźnik kontrastu to konieczne minimum, a nie gwarancja czytelności. Połącz odpowiedni kontrast z odpowiednim rozmiarem czcionki (minimum 16px dla tekstu treści), wagą (regular lub medium, nie light ani thin) i odstępami (line-height 1,5 lub więcej), aby uzyskać najlepsze rezultaty. Typowe pułapki kontrastowe obejmują tekst zastępczy w polach formularza (często jasnoszary na białym, nie spełnia wymogów kontrastu), tekst wyłączonych przycisków (nadal musi być rozróżnialny, nawet jeśli nie spełnia pełnych wymogów kontrastu), tekst linków, który polega tylko na kolorze, aby odróżnić go od otaczającego tekstu (WCAG wymaga dodatkowego wskaźnika wizualnego, takiego jak podkreślenie, chyba że kontrast linku względem otaczającego tekstu wynosi co najmniej 3:1), oraz tekst na dekoracyjnych tłach, gdzie kontrast różni się w zależności od pozycji. Dostępność kolorów marki to częste wyzwanie. Zespoły marketingowe wybierają kolory marki pod kątem emocjonalnego oddziaływania i atrakcyjności wizualnej, a nie pod kątem zgodności z WCAG. Jasny pomarańczowy kolor marki (hsl(30, 100%, 50%)) ma wskaźnik kontrastu tylko 2,14:1 względem bieli, znacznie poniżej wymogu 4,5:1 AA dla tekstu normalnego. Rozwiązaniem jest tworzenie dostępnych wariantów kolorów marki. Zachowaj odcień, dostosuj jasność. hsl(30, 100%, 35%) to nadal rozpoznawalny pomarańczowy, ale przechodzi AA względem bieli przy 4,6:1. Utwórz paletę kolorów marki z kolorami podstawowymi dla dużego tekstu i elementów dekoracyjnych (niższy kontrast dopuszczalny) oraz dostosowanymi wariantami dla tekstu treści, linków i komponentów UI (muszą przejść AA). Wizualizacja danych i wykresy stawiają unikalne wyzwania kontrastowe. Każda seria danych na wykresie musi być rozróżnialna od sąsiadujących serii i od tła. Przy pięciu lub więcej seriach danych znalezienie kolorów, które wszystkie wystarczająco kontrastują ze sobą i z tłem, jest trudne. Palety bezpieczne dla daltonistów (jak te z ColorBrewer lub paleta Okabe-Ito) są zaprojektowane specjalnie do tego celu. Oprócz koloru używaj wzorów, tekstur lub bezpośrednich etykiet, aby rozróżnić serie danych. Wykresy liniowe mogą używać różnych wzorów kresek. Wykresy słupkowe mogą używać ukośnego kreskowania. Wykresy punktowe mogą używać różnych kształtów. Kontrast w różnych środowiskach oświetleniowych różni się dramatycznie. Para kolorów, która jest komfortowo czytelna w przyciemnionym biurze, staje się ledwo widoczna w bezpośrednim świetle słonecznym. Użytkownicy mobilni często napotykają jasne warunki zewnętrzne. Wysokie wskaźniki kontrastu zapewniają bufor wobec czynników środowiskowych. Para przy dokładnie 4,5:1 (minimum AA) jest czytelna w kontrolowanych warunkach, ale może zawieść w ostrym świetle słonecznym. Celowanie w 5:1 lub 6:1 zapewnia margines uwzględniający rzeczywiste warunki oglądania. Dla krytycznych elementów UI (nawigacja, wezwania do działania, komunikaty o błędach) skłaniaj się ku wyższemu kontrastowi. Zarządzanie kolorem i różnice urządzeń wpływają na to, jak użytkownicy postrzegają kontrast. Kolor sRGB na ekranie o szerokiej gamie (P3 lub Adobe RGB) może jawić się nieco inaczej, niż zamierzono. Tanie monitory z panelami TN wyświetlają kolory inaczej niż ekrany IPS lub OLED. Ustawienia jasności ekranu zmieniają postrzegany kontrast. Filtry światła niebieskiego i tryb nocny przycieniają ekran ciepłymi tonami, obniżając postrzegany kontrast chłodnych kolorów. Żaden z tych czynników nie zmienia obliczonego wskaźnika WCAG, ale wpływają na rzeczywiste doświadczenie wizualne. Testowanie na wielu urządzeniach i w wielu warunkach wyłapuje problemy, których matematyczne obliczenia nie zauważają. Wymagania kontrastu dla tekstu osadzonego w obrazach są takie same jak dla tekstu na żywo. Jeśli Twój obraz hero zawiera tekst wtopiony w plik obrazu (nie tekst HTML), ten tekst nadal musi spełniać wymagania kontrastu WCAG. Różnica polega na tym, że nie możesz dostosować tekstu obrazu za pomocą CSS, więc kontrast musi zostać zweryfikowany w narzędziu edycji obrazu przed eksportem. Obrazy podglądu mediów społecznościowych (og:image) często zawierają tekst, który powinien być czytelny, choć formalnie nie są objęte WCAG, ponieważ pojawiają się na platformach stron trzecich. Kontrast w typografii wykracza poza same kolory pierwszego planu i tła. Postrzegany kontrast tekstu zależy od wagi czcionki, rozmiaru czcionki, odstępów między literami i wysokości wiersza. Cienkie czcionki (waga 300 i poniżej) potrzebują wyższych wskaźników kontrastu niż ten sam tekst w wadze regularnej lub pogrubionej, ponieważ cieńsze kreski są trudniejsze do odróżnienia od tła. Specyfikacja WCAG nie uwzględnia wagi czcionki w swoich progach (tylko rozmiar), więc technicznie przechodzący wskaźnik może nadal dawać nieczytelny tekst, jeśli czcionka jest zbyt cienka. Dla tekstu treści używaj wagi regular (400) lub medium (500) jako minimum. Rezerwuj wagi light i thin dla dużych nagłówków, gdzie rozmiar rekompensuje zmniejszoną widoczność kresek. Systematyczny audyt kontrastu na dużej stronie internetowej wymaga połączenia zautomatyzowanych narzędzi i ręcznego przeglądu. Uruchom zautomatyzowane skany (axe-core, Lighthouse), aby wyłapać łatwe cele: zakodowane na sztywno kolory, które nie spełniają wskaźników. Następnie ręcznie przejrzyj treści dynamiczne, obszary treści generowanych przez użytkowników, stany interaktywne (hover, focus, active, disabled), komunikaty o błędach i sukcesie, teksty podpowiedzi oraz każdy obszar, gdzie kolor jest ustalany w czasie wykonywania. Utwórz powtarzalny harmonogram audytów: kwartalnie dla dużych stron, miesięcznie w trakcie aktywnego rozwoju. Śledź liczbę problemów kontrastowych w czasie, aby mierzyć postęp. Narzędzie sprawdzania kontrastu pozwala wprowadzić dowolne dwa kolory i natychmiast zobaczyć wskaźnik kontrastu, status pass/fail WCAG AA i AAA zarówno dla tekstu normalnego, jak i dużego, oraz wizualny podgląd kombinacji. Używaj go w fazie projektowania do walidacji wyborów kolorów, zanim trafią one do rozwoju, podczas przeglądu kodu, aby zweryfikować, że zaimplementowane kolory odpowiadają projektowi, oraz podczas audytów dostępności, aby zidentyfikować i naprawić istniejące problemy. Narzędzie akceptuje wartości kolorów hex, RGB i HSL oraz pokazuje obliczoną luminancję dla każdego koloru obok wskaźnika.
Czeste pytania
Jaki kontrast jest wymagany dla WCAG AA?
WCAG AA wymaga minimalnej proporcji kontrastu 4,5:1 dla tekstu normalnego i 3:1 dla dużego tekstu (18px+ lub 14px+ pogrubiony).
Jaka jest różnica między AA a AAA?
AAA jest bardziej rygorystyczny: 7:1 dla tekstu normalnego i 4,5:1 dla dużego. AA to minimalny zalecany standard.
