Перейти до вмісту
Pandus
uk Змінити мову
Меню

APCA чи контраст WCAG 2: формула, статус і режим високого контрасту

Оновлено 14 жовтня 2026 · 1 хв читання

Дизайнери, які перевіряють кольори, рано чи пізно зустрічають два числа: коефіцієнт контрасту WCAG (4,5:1, 3:1) і значення APCA, наприклад Lc 75. Вони не завжди збігаються. На цій сторінці пояснено, як працює формула WCAG 2, що таке APCA і який насправді його статус, а також як режим високого контрасту Windows пов'язаний з обома.

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

Формула WCAG 2 крок за кроком

WCAG 2.2 визначає контраст у два кроки, обидва — у своєму глосарії.

1. Відносна яскравість — наскільки яскравий колір: від 0 для найтемнішого чорного до 1 для найсвітлішого білого. Для кожного каналу sRGB:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Вагові коефіцієнти показують, що око значно чутливіше до зеленого, ніж до синього. (До травня 2021 року текст WCAG використовував поріг 0,03928; W3C зазначає, що практичного впливу це не має.)

2. Коефіцієнт контрасту — де L1 є яскравістю світлішого кольору, а L2 — темнішого:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Результат змінюється від 1:1 (той самий колір) до 21:1 (чорне на білому). Приклад: сірий #767676 має яскравість приблизно 0,181, тож на білому досягає (1 + 0,05) / (0,181 + 0,05) ≈ 4,54:1 і проходить мінімум 4,5:1. Один крок світліше, #777777, дає близько 4,48:1 і не проходить — W3C каже, що значення не можна округлювати, тож 4,499:1 не відповідає 4,5:1.

Порогові значення

Критерій Рівень Потрібний коефіцієнт
1.4.3 Контраст (мінімальні вимоги) AA 4,5:1 для тексту, 3:1 для великого тексту
1.4.11 Контраст нетекстових елементів AA 3:1 для іконок, меж полів, індикаторів фокуса та інших частин інтерфейсу
1.4.6 Контраст (покращений) AAA 7:1 для тексту, 4,5:1 для великого тексту

Великий текст — це щонайменше 18 пунктів (24 CSS-пікселі) або 14 пунктів напівжирний (приблизно 18,66 CSS-пікселя). W3C пояснює значення 4,5:1 як компенсацію втрати контрастної чутливості, що супроводжує зір приблизно 20/40. Перевірте будь-яку пару нашим перевірником контрасту.

Відомі обмеження формули WCAG 2

Формула проста й піддається перевірці, тому й годиться для регулювання. Але має обмеження, які згадує власний документ W3C «Understanding»: вона не враховує товщину шрифту, а тонкі чи незвичні шрифти через згладжування можуть виглядати значно блідішими за номінальний колір — «коефіцієнт контрасту, що номінально проходить …, але на практиці має значно нижчий контраст». Там радять використовувати товстіші шрифти або пару кольорів, що перевищує мінімум. Формула також припускає кольори sRGB.

Формула ще й симетрична: якщо поміняти місцями текст і фон, коефіцієнт буде той самий. Проєкт APCA йде далі й стверджує, що математика контрасту WCAG 2 «не моделює точно ні зорове сприйняття людини, ні порушення зору» — це відправна точка для APCA.

Що таке APCA

Accessible Perceptual Contrast Algorithm у своєму офіційному репозиторії описано як метод оцінки для прогнозування сприйнятого контрасту між кольорами sRGB на моніторі, розроблений для робіт W3 «Silver» / WCAG 3. Відмінності від WCAG 2 на практиці:

  • Порядок має значення. Перший колір — це текст, другий — фон; результат має знак, який показує полярність (темне на світлому чи світле на темному).
  • Інша шкала. Результат — значення Lc, приблизно від −108 до 106, а не коефіцієнт.
  • Розмір і товщина — частина відповіді. Функція пошуку повертає для значення Lc розміри шрифту, потрібні для товщин від 100 до 900. У README є правила на кшталт максимуму Lc 90 для шрифтів більших за 24 px з товщиною 300 і вище.
  • Бета. Бібліотека (apca-w3 у npm) перебуває на публічній бета-валідації, а README називає пов'язаний чернетковий критерій незавершеною роботою.

Чи є APCA частиною WCAG 3?

Не як остаточне рішення. Два факти, обидва перевірені за офіційними джерелами:

  1. У репозиторії APCA сказано, що APCA оцінюється як заміна математики контрасту WCAG 2 для майбутніх стандартів.
  2. Актуальна робоча чернетка WCAG 3 від 10 вересня 2026 року каже: «Алгоритм контрасту, що використовується в WCAG 3, ще має бути визначений.» Її вимоги до контрасту тексту мають статус developing, а метод вимірювання залишено відкритим. У чернетці також сказано, що недоречно цитувати її інакше як незавершену роботу.

Отже, APCA — кандидат, WCAG 3 — чернетка, і жодне з них не є нормативним. WCAG 2.2 — чинна рекомендація W3C, а EN 301 549, європейський стандарт, на якому ґрунтується Європейський акт про доступність, посилається на критерії успіху WCAG 2. Пара кольорів, що проходить APCA, але не проходить 4,5:1, усе одно не відповідає вимозі.

WCAG чи APCA: практичне правило

  1. Виконуйте коефіцієнт WCAG 2 для кожного тексту й кожного компонента інтерфейсу. Це вимога.
  2. Використовуйте APCA, якщо хочете, як допомогу в дизайні додатково: наприклад, щоб обрати товщу товщину для тонкого тексту або помітити, що пара, яка ледь проходить 4,5:1, усе одно важко читається, коли світлий текст стоїть на темному тлі.
  3. Не видавайте результати APCA за відповідність вимогам. Звіти, заяви й тендери посилаються на WCAG 2.

Режим високого контрасту Windows і примусові кольори

«WCAG high contrast mode» — частий пошуковий запит, але він змішує дві речі.

Що це таке. Windows пропонує теми контрастності (Windows 11; у Windows 10 це називалося режимом високого контрасту). Microsoft документує їх у розділі «Параметри → Спеціальні можливості → Теми контрастності» зі скороченням Left Alt + Left Shift + Print Screen. Потім браузери застосовують до вебсторінок обмежену палітру користувача. У CSS це визначається медіафункцією forced-colors: active означає, що агент користувача примусово застосовує вибрану користувачем обмежену палітру кольорів, а авторові доступні лише системні кольори.

Що каже WCAG. Жоден критерій успіху WCAG 2.2 не вимагає режиму високого контрасту чи підтримки примусових кольорів поіменно, і сайту не потрібно пропонувати власний перемикач високого контрасту, щоб відповідати рівню AA. Але ваш код може зламати сторінку для людей, які використовують такий режим, і тоді не виконуються інші критерії:

  • Фокус. Техніка W3C C40 попереджає, що агенти користувача зазвичай пригнічують box-shadow у режимах примусових кольорів, тож індикатор фокуса, зроблений лише тінню, зникає. C40 радить поєднувати його з outline: 2px transparent solid для сумісності з режимами примусових кольорів — це стосується 2.4.7 Видимий фокус.
  • Іконки й межі. Іконки, намальовані фоновими зображеннями, та елементи, які відрізняються лише кольором фону, можуть зникнути. Це стосується 1.4.11 Контраст нетекстових елементів і 1.4.1 Застосування кольору.
  • Не припускайте більшого контрасту. Специфікація Media Queries зазначає, що примусові кольори не обов'язково означають бажання більшого контрасту; для цього існує prefers-contrast.

Перевіряти кілька ключових сторінок з увімкненою темою контрастності — хороша практика, навіть якщо жоден критерій цього не називає.

Що роблять наші перевірки

Наші перевірки використовують коефіцієнт контрасту WCAG 2, як і самі вимоги: низький контраст тексту на рівні AA (1.4.3) і покращений контраст на рівні AAA (1.4.6), який наші звіти показують окремо від результатів AA. Значень APCA ми не повідомляємо. Запустіть безкоштовний WCAG-чекер на сторінці або перевірте одну пару перевірником контрасту. Наші перевірки — це автоматична перевірка, а не повний аудит і не юридична консультація.

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

Що використовувати для контрасту: WCAG чи APCA?

Для виконання вимог використовуйте коефіцієнт контрасту WCAG 2: саме на нього посилаються WCAG 2.2, EN 301 549 і закони, що на них спираються. APCA може бути корисною другою думкою в дизайні, але сьогодні не входить до жодного нормативного стандарту.

Чи є APCA частиною WCAG 3?

Не як ухвалене рішення. APCA розроблено як метод-кандидат для WCAG 3, і він перебуває в публічній бета-версії. Актуальна робоча чернетка WCAG 3 від вересня 2026 року каже, що алгоритм контрасту ще має бути визначено, а сам WCAG 3 — це чернетка, а не стандарт.

Як обчислюється коефіцієнт контрасту WCAG?

Перетворіть обидва кольори на відносну яскравість: лінеаризуйте кожен канал sRGB, потім L = 0,2126 R + 0,7152 G + 0,0722 B. Коефіцієнт дорівнює (L1 + 0,05) / (L2 + 0,05), де L1 — світліший колір. Він змінюється від 1:1 до 21:1 і не округлюється.

Чи вимагає WCAG підтримки режиму високого контрасту Windows?

Жоден критерій WCAG не називає режим високого контрасту чи примусових кольорів. Але ваш власний CSS може зламати сторінку в цьому режимі, наприклад кільце фокуса, зроблене лише через box-shadow, яке браузери там зазвичай прибирають. Тестувати в режимі примусових кольорів — хороша практика.

Чи може пара кольорів пройти WCAG і все одно бути важкою для читання?

Так. Формула WCAG не враховує товщину шрифту, а тонкі шрифти зі згладжуванням можуть виглядати блідішими, ніж свідчить їхній колір. У такому разі W3C радить товстіші шрифти або більший контраст, ніж мінімум.

Джерела

  • W3C, WCAG 2.2 (definitions of relative luminance and contrast ratio): https://www.w3.org/TR/WCAG22/
  • W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
  • W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
  • APCA, apca-w3 repository: https://github.com/Myndex/apca-w3
  • W3C, Technique C40, two-colour focus indicator: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
  • W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
  • Microsoft, Change color contrast in Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696