Sprawdzanie kontrastu – Współczynnik kontrastu WCAG

Sprawdź kontrast kolorów pod kątem dostępności

Kontrast kolorów ma kluczowe znaczenie dla czytelności. Gdy tekst pierwszego planu nie ma wystarczającego kontrastu z tłem, staje się trudny do odczytania — szczególnie dla użytkowników z osłabionym wzrokiem lub zaburzeniami widzenia barw.

To narzędzie do sprawdzania kontrastu oblicza współczynnik kontrastu między dwoma dowolnymi kolorami i ocenia go zgodnie z kryteriami sukcesu WCAG 2.1. Wprowadź kolory w formacie HEX, RGB lub HSL i uzyskaj natychmiastowe wyniki.

Zrozumienie poziomów kontrastu WCAG

Wytyczne dotyczące dostępności treści internetowych (WCAG) definiują minimalne współczynniki kontrastu dla czytelności tekstu. Istnieją dwa poziomy zgodności:

• WCAG AA Zwykły tekst — wymaga współczynnika kontrastu co najmniej 4,5:1
• WCAG AA Duży tekst — wymaga współczynnika kontrastu co najmniej 3:1 (duży tekst to 18pt+ lub 14pt+ pogrubiony)
• WCAG AAA Zwykły tekst — wymaga współczynnika kontrastu co najmniej 7:1
• WCAG AAA Duży tekst — wymaga współczynnika kontrastu co najmniej 4,5:1

AA to standardowy poziom, do którego dąży większość stron internetowych i aplikacji. AAA to podwyższony poziom, zalecany tam, gdzie maksymalna czytelność jest ważna.

Jak korzystać z narzędzia do sprawdzania kontrastu

1. Wprowadź kolor pierwszego planu (tekstu) — HEX, RGB lub HSL
2. Wprowadź kolor tła w dowolnym obsługiwanym formacie
3. Zobacz współczynnik kontrastu i podgląd na żywo tekstu na tym tle
4. Sprawdź wyniki pozytywne/negatywne dla poziomów WCAG AA i AAA
5. Użyj przycisku zamiany, aby szybko odwrócić pierwszy plan i tło

Kiedy sprawdzać kontrast kolorów

• Przy wyborze kolorów tekstu i tła dla strony internetowej lub aplikacji
• Przy weryfikacji, czy system projektowy spełnia wymagania dostępności
• Przy testowaniu kolorów przycisków, linków lub ikon na ich tle
• Przy sprawdzaniu kombinacji kolorów w trybie ciemnym
• Przy spełnianiu prawnych standardów dostępności (ADA, EAA, Section 508)

Dokładne, natychmiastowe i bezpłatne

To narzędzie oblicza współczynnik kontrastu WCAG 2.1 przy użyciu standardowej formuły względnej luminancji. Wyniki są obliczane natychmiast w Twojej przeglądarce — żadne dane nie są wysyłane na żaden serwer.

Musisz najpierw znaleźć lub przekonwertować kolor? Użyj Próbnika kolorów, aby wyodrębnić kolory z obrazu, lub Konwertera kolorów, aby konwertować między HEX, RGB i HSL.

Najczęściej zadawane pytania

Jaki jest dobry współczynnik kontrastu dla tekstu?

Dla tekstu podstawowego o normalnym rozmiarze wymagany jest współczynnik kontrastu co najmniej 4,5:1, aby spełnić WCAG AA. Dla dużego tekstu (18pt lub 14pt pogrubiony i większy) minimum to 3:1. Dla najwyższego poziomu dostępności (WCAG AAA) zwykły tekst wymaga co najmniej 7:1.

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

AA to standardowy poziom zgodności, który powinna spełniać większość stron internetowych i aplikacji. AAA to podwyższony poziom z bardziej rygorystycznymi wymaganiami kontrastowymi, zalecany dla treści, gdzie maksymalna czytelność jest kluczowa, takich jak strony rządowe lub medyczne.

Co jest uznawane za duży tekst w WCAG?

Duży tekst to tekst o rozmiarze 18 punktów (24px) lub większy przy normalnej grubości, lub 14 punktów (około 18,66px) lub większy przy pogrubieniu. Duży tekst ma niższe wymagania kontrastowe, ponieważ jego rozmiar sprawia, że jest z natury łatwiejszy do odczytania.

Jakie formaty kolorów obsługuje to narzędzie?

Możesz wprowadzać kolory w formacie HEX (np. #1E293B), RGB (np. rgb(30, 41, 59)) lub HSL (np. hsl(222, 33%, 17%)). Narzędzie automatycznie wykrywa format.

Jak obliczany jest współczynnik kontrastu?

Współczynnik kontrastu jest obliczany przy użyciu formuły WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), gdzie L1 to względna luminancja jaśniejszego koloru, a L2 to względna luminancja ciemniejszego koloru. Wynik mieści się w zakresie od 1:1 (brak kontrastu) do 21:1 (maksymalny kontrast, czarny na białym).

Czy to narzędzie działa na urządzeniach mobilnych?

Tak. Narzędzie do sprawdzania kontrastu działa na każdym urządzeniu z nowoczesną przeglądarką — komputerze, tablecie lub telefonie.

Czy to narzędzie jest bezpłatne?

Tak. ColourPicker.app jest całkowicie bezpłatne, bez konieczności rejestracji.

Czy mogę sprawdzić kontrast dla komponentów UI, nie tylko tekstu?

WCAG 2.1 wymaga również minimalnego współczynnika kontrastu 3:1 dla istotnych komponentów interfejsu użytkownika i obiektów graficznych (kryterium sukcesu 1.4.11). Możesz użyć tego narzędzia do weryfikacji tych kombinacji — obliczenie współczynnika jest takie samo.