Калькулятор контрастності кольорів WCAG
Виміряйте коефіцієнт контрастності WCAG між кольором переднього плану і кольором фону, щоб переконатися, що ваш текст є зрозумілим і доступним.
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
Як працює цей калькулятор?
Коефіцієнт контрастності WCAG розраховується як (яскравість світлішого + 0.05) / (яскравість темнішого + 0.05) і змінюється від 1:1 до 21:1. Для звичайного тексту потрібно щонайменше 4.5:1, для великого — 3:1 (рівень AA), або 7:1 та 4.5:1 відповідно для рівня AAA. Введіть два шістнадцяткових кольори для миттєвої перевірки.
Формула
How this is calculated
Введіть шістнадцятковий колір переднього плану (тексту) і шістнадцятковий колір фону. Приймаються як 3-символьний скорочений (#fff), так і 6-символьний (#ffffff) формати, з символом «#» або без нього.
Кожен колір перетворюється на відносну яскравість. Значення 8-бітного каналу ділиться на 255, а потім лінеаризується: якщо результат s менший або рівний 0.03928, він ділиться на 12.92, інакше він підноситься до степеня 2.4 за формулою ((s + 0.055) / 1.055). Лінеаризовані значення червоного, зеленого і синього зважуються коефіцієнтами 0.2126, 0.7152 та 0.0722 відповідно і підсумовуються для отримання яскравості L. Коефіцієнт контрастності дорівнює (Llighter + 0.05) / (Ldarker + 0.05), де член 0.05 моделює розсіяне засвітлення. Значення коефіцієнта варіюються від 1:1 (однакові кольори) до 21:1 (чорний на білому).
Пороги WCAG 2.1 визначають результати перевірки: AA вимагає щонайменше 4.5:1 для звичайного тексту і 3:1 для великого тексту (приблизно 18pt або 14pt жирний); AAA вимагає 7:1 для звичайного тексту і 4.5:1 для великого. Обчислення є симетричним, тому заміна переднього плану та фону місцями дає той самий коефіцієнт. Враховується лише колір; прозорість, згладжування і перекривання шарів до уваги не беруться.
Поширені запитання
Щонайменше 4.5:1 для звичайного основного тексту і 3:1 для великого тексту (приблизно 18pt звичайний або 14pt жирний). Для суворішого рівня AAA потрібно 7:1 для звичайного і 4.5:1 для великого тексту.
Ні. У формулі використовуються яскравість світлішого і темнішого кольору незалежно від того, який із них ви позначили як передній план, тому заміна вхідних даних місцями дає той самий коефіцієнт.
Чистий білий має відносну яскравість 1, а чистий чорний — 0. Підставляючи ці значення у формулу (1 + 0.05) / (0 + 0.05), отримуємо рівно 21 — найвищий досяжний контраст.
Також відомий як
TG we-Calculate Editorial Team. (2026). Калькулятор контрастності кольорів WCAG [Online calculator]. TG we-Calculate. https://we-calculate.com/uk/calculator/color-contrast-ratio-calculator
TG we-Calculate Editorial Team. "Калькулятор контрастності кольорів WCAG." TG we-Calculate. 2026. https://we-calculate.com/uk/calculator/color-contrast-ratio-calculator.
TG we-Calculate Editorial Team, "Калькулятор контрастності кольорів WCAG," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/uk/calculator/color-contrast-ratio-calculator
@misc{wecalculate_color_contrast_ratio_calculator, title = {Калькулятор контрастності кольорів WCAG}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/uk/calculator/color-contrast-ratio-calculator}}, year = {2026}, note = {TG we-Calculate} }
Чи допоміг вам цей калькулятор?