Color Contrast Checker

Перевірте співвідношення контрастності WCAG AA та AAA між кольором переднього плану та фону

Спробувати приклад

Колір переднього плану (текст)

Колір фону

Зразок великого тексту (18px жирний)

Зразок звичайного тексту — так виглядатиме ваш основний текст на обраному кольорі фону.

Коефіцієнт контрастності

14.63:1

Відповідність WCAG

Пройдено

Звичайний AA

Пройдено

Звичайний AAA

Пройдено

Великий AA

Пройдено

Великий AAA

WCAG AAЗвичайний текст: 4.5:1, Великий текст (18px+ або 14px жирний): 3:1

WCAG AAAЗвичайний текст: 7:1, Великий текст (18px+ або 14px жирний): 4.5:1

Що таке перевірка контрастності кольорів?

Перевірка контрастності кольорів вимірює різницю яскравості між кольором переднього плану (зазвичай текстом) та кольором фону, а потім виражає результат у вигляді коефіцієнта. Коефіцієнт 1:1 означає, що кольори ідентичні; 21:1 — максимум, що відповідає чорному на білому або навпаки. Посібник з доступності вебвмісту (WCAG), опублікований консорціумом W3C, визначає мінімальні коефіцієнти контрастності, яким має відповідати текст, щоб люди з порушеннями зору або дефектами колірного сприйняття могли його читати.

Формула обчислення коефіцієнта контрастності походить зі специфікації WCAG 2.x і ґрунтується на відносній яскравості — показнику того, наскільки яскравим здається колір людському оку. Відносна яскравість обчислюється шляхом лінеаризації кожного каналу sRGB (видалення гамма-корекції) та зважування каналів відповідно до коефіцієнтів ITU-R BT.709: 0,2126 для червоного, 0,7152 для зеленого та 0,0722 для синього. Зелений колір вносить найбільший внесок, оскільки людський зір найбільш чутливий до нього. Коефіцієнт обчислюється як (L1 + 0,05) / (L2 + 0,05), де L1 — яскравість світлішого кольору.

WCAG визначає два рівні відповідності. Рівень AA вимагає коефіцієнта контрастності не менше 4,5:1 для звичайного тексту та 3:1 для великого тексту (18px або більше, або 14px жирний). Рівень AAA підвищує вимоги до 7:1 та 4,5:1 відповідно. WCAG 2.1 також ввів критерій успішності 1.4.11, який вимагає коефіцієнта 3:1 для нетекстових елементів інтерфейсу, таких як межі, іконки та індикатори фокусу.

Чому варто використовувати цей перевірник контрастності?

Перевірка контрастності на власний погляд ненадійна. Кольори, що виглядають чіткими на вашому відкаліброваному моніторі, можуть зливатися на екрані низькоякісного ноутбука, під прямими сонячними променями або для людини з дейтеранопією. Числовий коефіцієнт усуває здогадки та дає чіткий результат «пройдено/не пройдено» відповідно до стандарту WCAG.

Миттєве обчислення коефіцієнта
Оберіть або введіть два кольори — і коефіцієнт контрастності оновлюється в реальному часі. Без форм для відправлення, без перезавантаження сторінки.
🔒
Обробка без передачі даних
Обчислення яскравості відбувається повністю у вашому браузері. Жодні значення кольорів не покидають ваш пристрій, а файли cookie або аналітика не відстежують ваші вибори.
🎯
Вердикти AA та AAA
Результати показують статус «пройдено/не пройдено» для WCAG AA та AAA, як для звичайного, так і для великого тексту, тому ви точно знаєте, яким порогам відповідаєте.
📋
Без реєстрації
Відкрийте сторінку і розпочніть перевірку. Без реєстрації, без обмежень на кількість запитів. Інструмент працює офлайн після завантаження сторінки.

Випадки використання перевірника контрастності

Фронтенд-розробка
Перед внесенням змін до інтерфейсу вставте колір тексту та фону з вашого CSS у перевірник, щоб переконатися, що пара відповідає WCAG AA. Це дозволяє виявляти проблеми контрастності до перегляду коду або автоматизованих аудитів.
Передача дизайну розробникам
Дизайнери можуть перевірити, що кожна пара кольорів у файлі Figma відповідає потрібному рівню WCAG, перш ніж передавати специфікації інженерам. Виправлення контрастності на етапі дизайну значно дешевше, ніж після реалізації.
Аудит доступності
Інженери з контролю якості, що проводять аудит WCAG, можуть вибірково перевіряти конкретні комбінації кольорів, позначені автоматизованими інструментами, як-от Lighthouse або axe. Перевірник підтверджує точний коефіцієнт та які рівні пройдено або не пройдено.
Токени дизайн-системи
Під час визначення колірних токенів для дизайн-системи перевірте кожну пару «передній план / фон», щоб переконатися, що палітра токенів відповідає мінімуму AA. Задокументуйте коефіцієнти поруч із токенами, щоб команди, що використовують систему, могли довіряти зробленим вибором.
Тестування шаблонів електронної пошти
Поштові клієнти видаляють такі можливості CSS, як прозорість та режими накладання, тому фактичні відтворені кольори можуть відрізнятися від вихідних. Перевіряйте кінцеві значення кольорів переднього плану та фону, що потрапляють у папку вхідних, щоб переконатися у зручності читання.
Вивчення стандартів доступності
Студенти, що вивчають WCAG, можуть експериментувати з різними парами кольорів і одразу бачити, як змінюється коефіцієнт. Змінюючи один канал за раз, можна сформувати практичне розуміння того, як яскравість пов'язана з відчуттям контрастності.

Вимоги WCAG до коефіцієнта контрастності

Таблиця нижче узагальнює мінімальні коефіцієнти контрастності, що вимагаються WCAG 2.1 для різних типів вмісту та рівнів відповідності. Великий текст визначається як 18px (24 CSS пікселі) або більше при звичайному насиченні, або 14px (18,66 CSS пікселів) або більше при жирному насиченні.

РівеньМін. коефіцієнтЗастосовується доПримітка
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Пояснення яскравості, AA та AAA

Обчислення коефіцієнта контрастності складається з трьох етапів: обчислення яскравості для кожного кольору, визначення коефіцієнта та порівняння його з порогами WCAG.

Відносна яскравість
Єдине число від 0 (чорний) до 1 (білий), що показує, наскільки яскравим здається колір. Воно враховує нелінійну гамма-криву sRGB та нерівну чутливість людського зору до червоного, зеленого та синього. Чистий зелений (#00FF00) має яскравість 0,7152, тоді як чистий синій (#0000FF) — лише 0,0722.
WCAG AA
Базовий рівень доступності, що вимагається більшістю правових стандартів, зокрема Європейським законом про доступність (EAA) та Розділом 508 у США. AA вимагає коефіцієнта 4,5:1 для звичайного тексту та 3:1 для великого тексту. Більшість дизайн-систем встановлює AA як мінімум для всіх текстових елементів.
WCAG AAA
Розширений рівень, призначений для вмісту, що має бути доступним для якнайширшої аудиторії, включно з користувачами зі значними порушеннями зору. AAA вимагає 7:1 для звичайного тексту та 4,5:1 для великого тексту. Небагато сайтів загалом досягають AAA на всіх сторінках, але критично важливий вміст, як-от юридичні повідомлення та медична інформація, часто орієнтується на цей рівень.

Приклади коду

Обчислення коефіцієнтів контрастності WCAG програмним шляхом. Кожен приклад реалізує формулу відносної яскравості зі специфікації WCAG 2.x та обчислення коефіцієнта контрастності. Для порівняння тестуються ті самі пари чорного на білому та індиго на білому.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Часті запитання

Який коефіцієнт контрастності вважається добрим для тексту?
Для основного тексту в інтернеті прагніть до мінімуму 4,5:1 (WCAG AA). Коефіцієнти вище 7:1 відповідають WCAG AAA і більш комфортні для тривалого читання. Чорний на білому дає максимальний коефіцієнт 21:1, але дуже темно-сірий (#1e293b) на білому все одно дає близько 12,6:1, що значно перевищує AAA.
Що вважається великим текстом у WCAG?
WCAG визначає великий текст як 18px (24 CSS пікселі) при звичайному насиченні або 14px (18,66 CSS пікселів) при жирному насиченні. Великий текст отримує нижчий поріг контрастності, оскільки більші літери легше сприймати. У CSS 1px дорівнює 0,75pt, тому 18pt дорівнює 24px.
Чи є WCAG AA юридично обов'язковим?
У багатьох юрисдикціях — так. Європейський закон про доступність (EAA), що набув чинності у червні 2025 року, посилається на WCAG 2.1 AA. Розділ 508 Закону США про реабілітацію зобов'язує федеральні установи відповідати WCAG 2.0 AA. Американський закон про інвалідів (ADA) тлумачиться судами США як такий, що вимагає доступних вебсайтів, із WCAG AA як стандартом. Схожі вимоги існують у Канаді, Австралії та Великій Британії.
Як обчислюється відносна яскравість?
Кожне значення каналу sRGB (0–255) ділиться на 255, а потім лінеаризується: значення не більше 0,04045 діляться на 12,92, а значення вище перетворюються за формулою ((c + 0,055) / 1,055) ^ 2,4. Три лінеаризовані канали зважуються за коефіцієнтами ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) та підсумовуються. Результат — число від 0 до 1.
Навіщо у формулі контрастності WCAG використовується зсув 0,05?
Зсув 0,05 запобігає діленню на нуль, коли один з кольорів є чистим чорним (яскравість = 0). Він також враховує навколишнє освітлення та відбиття від екрана, які дещо підвищують відчутну яскравість навіть найтемніших пікселів. Без цього зсуву чорний на будь-якому темному кольорі давав би нескінченний або оманливо високий коефіцієнт.
Чи можуть два кольори пройти AA, але все одно бути важкими для читання?
Так. Коефіцієнти контрастності WCAG вимірюють різницю яскравості, а не різницю відтінку. Насичений червоний на насиченому зеленому може технічно пройти поріг коефіцієнта, але бути некомфортним для читання деяким користувачам, особливо тим, хто має порушення колірного зору червоно-зеленого типу. Поєднання кольорів, що відрізняються як за яскравістю, так і за відтінком, як правило, дає більш комфортні результати.
У чому різниця між контрастністю WCAG 2.x та APCA?
WCAG 2.x використовує простий коефіцієнт яскравості, що симетрично враховує передній план і фон. APCA (Advanced Perceptual Contrast Algorithm), запропонований для WCAG 3.0, використовує модель перцептивної світлоти, яка враховує полярність: темний текст на світлому фоні має інше відчуття контрастності, ніж світлий текст на темному фоні за однакової різниці яскравості. APCA все ще є робочим проєктом і не замінив метод WCAG 2.x у жодному нормативному документі.