Перевірка контрастності кольорів
Перевірте контраст між кольором тексту та фону відповідно до WCAG 2 і APCA. Засіб перевірки обчислює коефіцієнт контрастності WCAG 2 на основі відносної яскравості, повідомляє, чи відповідає контраст рівням AA і AAA для звичайного та великого тексту й UI графіки, а також показує значення контрасту світлоти APCA та пояснює, для чого воно підходить. Для дизайнерів і розробників, які створюють доступні інтерфейси.
Поширені запитання
Що означають рівні WCAG?
Рівень AA вимагає 4.5:1 для звичайного тексту та 3:1 для великого тексту (критерій успіху 1.4.3); рівень AAA вимагає 7:1 і 4.5:1 (1.4.6). Елементи інтерфейсу та змістовна графіка мають мати контраст 3:1 із прилеглими кольорами (1.4.11). Засіб перевірки повідомляє, чи відповідає контраст кожному з цих п’яти порогових значень.
Що вважається великим текстом?
За визначенням WCAG, великий текст має розмір щонайменше 18 пунктів звичайного накреслення — приблизно 24 CSS пікселі — або щонайменше 14 пунктів жирного накреслення — приблизно 18.66 CSS пікселів. Увесь менший текст вважається звичайним і потребує вищого коефіцієнта контрастності.
Чому коефіцієнт 4.499:1 не відповідає рівню AA?
Порогові значення WCAG точні, тому коефіцієнт, який округлився б до 4.5, але насправді нижчий, не відповідає вимогам. Засіб перевірки порівнює неокруглене значення та показує його з точністю до двох десяткових знаків, не округлюючи вгору, тож число на екрані не виглядає кращим за справжнє.
Що таке APCA?
Accessible Perceptual Contrast Algorithm — це метод оцінювання контрастності, розроблений для проєктів WCAG 3. Він моделює сприйманий контраст світлоти, по-різному враховує текст і фон та повертає значення контрасту світлоти Lc приблизно від -108 до 106. Цей метод ще не входить до жодного опублікованого стандарту WCAG, тому для перевірки відповідності використовуйте результати WCAG 2, а APCA — як додаткову перевірку.
Чому значення APCA іноді від’ємне?
APCA враховує полярність: додатні значення відповідають темному тексту на світлому фоні, від’ємні — світлому тексту на темному фоні. У рекомендаціях використовується абсолютне значення, тому Lc -75 і Lc 75 належать до того самого рівня.
Як визначають рівні рекомендацій APCA?
Вони відповідають простому режиму APCA bronze: Lc 90 рекомендовано для основного тексту, Lc 75 — мінімум для основного тексту, Lc 60 — для іншого текстового вмісту, Lc 45 — для заголовків і великого тексту, Lc 30 — для тексту, який має бути читабельним лише побіжно, наприклад заповнювачів, а Lc 15 — для нетекстових елементів. Розмір і товщина шрифту теж мають значення, тому сприймайте ці рівні як орієнтири, а не остаточний висновок.
Яку версію APCA реалізовано?
Реалізовано константи APCA-W3 версії 0.0.98 G, редакція 4g, із простим показником 2.4 для каналів sRGB, м’яким обмеженням чорного та відсіканням низького контрасту. Чорний текст на білому тлі дає приблизно Lc 106.0, а білий текст на чорному — приблизно Lc -107.9, що відповідає еталонній реалізації.
У яких форматах можна вводити кольори?
Шістнадцяткові коди з # або без нього, назви кольорів CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), колірні простори color(), як-от display-p3, і cmyk(). Кольори поза межами sRGB спочатку перетворюються до sRGB, оскільки обидві формули визначені для екранних кольорів sRGB.
Як обробляються прозорі кольори?
Напівпрозорий колір тексту накладається на фон перед вимірюванням — так само, як його відображає браузер. Напівпрозорий фон спочатку накладається на білий. У результатах наведено непрозорі кольори тексту й фону, які фактично порівнювалися.
Чи має значення порядок двох кольорів?
Для WCAG 2 — ні, оскільки коефіцієнт яскравості світлішого кольору до темнішого однаковий в обох випадках. Для APCA — так, оскільки текст і фон мають різну вагу. Тому введіть колір тексту в перше поле, а колір фону — у друге.