Sprawdzarka kontrastu
Local only — nothing is uploaded unless you save or share it.
Sprawdzarka kontrastu kolorów dla poziomów dostępności WCAG.
- Podaj kolor swojego tekstu i kolor tła
- Odczytaj współczynnik i to, które poziomy WCAG przechodzi
- Jeśli nie przechodzi, weź podpowiedziany kolor, który przechodzi
Próbka dużego tekstu
Próbka zwykłego tekstu ciągłego — rozmiar, którego naprawdę używa większość twoich treści.
Zapisz to narzędzie
Miej Sprawdzarka kontrastu pod ręką
Użyj menu Udostępnij w przeglądarce, a potem „Dodaj do ekranu głównego”.
O tym narzędziu
Użyj jej jako zwykłej sprawdzarki dwóch kolorów albo jako sprawdzarki kontrastu z przezroczystością: półprzezroczysty pierwszy plan jest składany na tle, zanim policzony zostanie współczynnik, zamiast po cichu pomijać jego alfę. Współczynnik kontrastu kolorów mierzy, jak bardzo tekst odróżnia się od tła za nim, w skali od 1 do 21. Wytyczne dotyczące dostępności treści internetowych ustawiają poprzeczkę na 4,5 do 1 dla zwykłego tekstu ciągłego na poziomie AA, obniżają ją do 3 do 1 dla dużego tekstu i podnoszą do 7 do 1 na surowszym poziomie AAA. Te liczby nie są dowolnymi upodobaniami: niski kontrast to jedna z najczęstszych wad dostępności w sieci i dotyka znacznie więcej osób, niż mogłoby się wydawać — każdego z osłabionym wzrokiem, każdego po czterdziestce i każdego, kto czyta ekran w jasnym słońcu. Ta sprawdzarka liczy współczynnik jak należy, najpierw linearyzując wartości sRGB, co jest krokiem pomijanym przez naiwne kalkulatory i powodem, dla którego ich wyniki kłócą się z prawdziwymi audytami dostępności. Tekst półprzezroczysty składa najpierw na tle, bo kolor z alfą sam w sobie nie ma jednej prawdziwej wartości kontrastu. Gdy para nie wystarcza, podpowiada najbliższy odcień twojego koloru tekstu, który przechodzi.
Najczęstsze pytania
Jaki współczynnik kontrastu jest dobry?
4,5:1 albo lepszy dla zwykłego tekstu ciągłego, czyli poziom AA według WCAG. Duży tekst może zejść do 3:1, a surowszy poziom AAA prosi o 7:1. Wszystko poniżej 3:1 jest dla większości mozołem, a dla niektórych nieczytelne.
Jaki współczynnik kontrastu jest dobry?
4,5:1 albo lepszy dla zwykłego tekstu ciągłego, czyli poziom AA według WCAG. Duży tekst może zejść do 3:1, a surowszy poziom AAA prosi o 7:1. Wszystko poniżej 3:1 jest dla większości mozołem, a dla niektórych nieczytelne.
Co liczy się jako duży tekst?
18 punktów, czyli 24 piksele, albo 14 punktów pogrubione, czyli mniej więcej 18,66 piksela. Wszystko od tej wielkości w górę potrzebuje na poziomie AA tylko współczynnika 3 do 1 zamiast 4,5 do 1. Zastosowanie progu dla dużego tekstu do zwykłego tekstu ciągłego to jeden z najczęstszych sposobów, w jakie audyt oblewa po tym, jak wszyscy uznali go za zaliczony.
Celować w AA czy w AAA?
AA to praktyczny standard i to do niego odwołuje się większość przepisów, w tym Europejski akt o dostępności. AAA jest surowszy i trudny do utrzymania w całym systemie projektowym, więc traktuje się go zwykle jako aspirację dla tekstu ciągłego, a nie jako powszechny wymóg.
Dlaczego wasz współczynnik różni się od kalkulatora, którego użyłem gdzie indziej?
Niemal zawsze dlatego, że tamten uśrednia surowe wartości RGB, zamiast najpierw je linearyzować. sRGB jest zakodowany gammą, więc wzór WCAG stosuje określone przekształcenie na każdym kanale, zanim je zważy. Pominięcie tego daje liczby, które wyglądają wiarygodnie i oblewają prawdziwe audyty.
Jak traktowany jest przezroczysty tekst?
Najpierw jest składany na kolorze tła, a dopiero potem mierzony. Kolor z kanałem alfa sam w sobie nie ma sensownego współczynnika kontrastu, bo to, co naprawdę widzisz, jest mieszanką. Narzędzia pomijające alfę zgłaszają zaliczenie dla tekstu, który w praktyce jest niewidoczny.
Czy kontrast ma znaczenie także dla ikon i obramowań?
Ma. WCAG 2.1 wymaga 3 do 1 dla elementów interfejsu i grafik niosących znaczenie, co obejmuje obramowania pól formularzy, wskaźniki fokusu i przyciski z ikoną. Sprawdzane są tutaj obok poziomów dla tekstu.
Pomóż ulepszyć to narzędzie
Znalazłeś błąd, chcesz zmiany albo brakuje Ci jakiegoś narzędzia?
Masz niewysłaną wiadomość.
Dzięki — mamy to. Odpowiedź znajdziesz w swojej skrzynce.Go to my messages