Kalkulator współczynnika kontrastu kolorów WCAG
Zmierz współczynnik kontrastu WCAG między kolorem pierwszego planu a tłem, aby upewnić się, że Twój tekst jest czytelny i dostępny.
Higher is more readable (max 21:1)
- 1
Fg relative luminance
0.2126×0,0103 + 0.7152×0,0103 + 0.0722×0,0103 = 0,0103Each sRGB channel is gamma-linearised (transfer function) then weighted per WCAG - 2
Bg relative luminance
0.2126×1 + 0.7152×1 + 0.0722×1 = 1 - 3
Contrast ratio
(1 + 0.05) ÷ (0,0103 + 0.05) = 17,40
Jak działa ten kalkulator?
Współczynnik kontrastu WCAG to (luminancja jaśniejsza + 0,05) / (luminancja ciemniejsza + 0,05), w zakresie od 1:1 do 21:1. Dąż do co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego, aby spełnić AA, lub 7:1 i 4,5:1 dla AAA. Wprowadź dwa kolory szesnastkowe, aby natychmiast to sprawdzić.
Wzór
How this is calculated
Wprowadź kolor szesnastkowy pierwszego planu (tekstu) i kolor tła. Akceptowane są zarówno formy 3-cyfrowe skrócone (#fff), jak i 6-cyfrowe (#ffffff), z poprzedzającym znakiem "#" lub bez niego.
Każdy kolor jest przeliczany na względną luminancję. 8-bitowa wartość kanału jest dzielona przez 255, a następnie linearyzowana: jeśli wynik s jest mniejszy lub równy 0,03928, dzieli się go przez 12,92, w przeciwnym razie staje się ((s + 0,055) / 1,055) podniesionym do potęgi 2,4. Zlinearyzowane wartości czerwieni, zieleni i błękitu są ważone odpowiednio 0,2126, 0,7152 i 0,0722 i sumowane, dając luminancję L. Współczynnik kontrastu to (Ljaśniejszy + 0,05) / (Lciemniejszy + 0,05), gdzie składnik 0,05 modeluje rozproszenie otoczenia. Współczynniki rozciągają się od 1:1 (identyczne kolory) do 21:1 (czysta czerń na czystej bieli).
Progi WCAG 2.1 określają wyniki zaliczenia: AA wymaga co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego (mniej więcej 18pt lub 14pt pogrubione); AAA wymaga 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego. Obliczenie jest symetryczne, więc zamiana pierwszego planu i tła daje ten sam współczynnik. Ocenia wyłącznie kolor i nie uwzględnia przezroczystości, antyaliasingu ani nakładających się warstw.
Najczęściej zadawane pytania
Co najmniej 4,5:1 dla normalnego tekstu treści i 3:1 dla tekstu dużego (około 18pt zwykłego lub 14pt pogrubionego). Dla surowszego poziomu AAA potrzebujesz 7:1 dla normalnego i 4,5:1 dla dużego.
Nie. Wzór używa luminancji jaśniejszej i ciemniejszej niezależnie od tego, który kolor oznaczysz jako pierwszy plan, więc zamiana obu danych wejściowych daje ten sam współczynnik.
Czysta biel ma względną luminancję 1, a czysta czerń 0. Podstawienie ich do (1 + 0,05) / (0 + 0,05) daje dokładnie 21, najwyższy osiągalny kontrast.
Znany również jako
TG we-Calculate Editorial Team. (2026). Kalkulator współczynnika kontrastu kolorów WCAG [Online calculator]. TG we-Calculate. https://we-calculate.com/pl/calculator/color-contrast-ratio-calculator
TG we-Calculate Editorial Team. "Kalkulator współczynnika kontrastu kolorów WCAG." TG we-Calculate. 2026. https://we-calculate.com/pl/calculator/color-contrast-ratio-calculator.
TG we-Calculate Editorial Team, "Kalkulator współczynnika kontrastu kolorów WCAG," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/pl/calculator/color-contrast-ratio-calculator
@misc{wecalculate_color_contrast_ratio_calculator, title = {Kalkulator współczynnika kontrastu kolorów WCAG}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/pl/calculator/color-contrast-ratio-calculator}}, year = {2026}, note = {TG we-Calculate} }
Czy ten kalkulator Ci pomógł?