WCAG 1.4.3 Контраст (мінімальні вимоги)

Критерій успіху 1.4.3 потрібен для того, щоб текст могли прочитати люди, які гірше розрізняють контраст: старші відвідувачі, люди зі слабким зором або порушеннями кольоросприйняття, а також будь-хто, хто дивиться на телефон під сонцем. Це рівень AA, тож він входить до того, на що спираються EN 301 549 (пункт 9.1.4.3; в Україні — ДСТУ EN 301 549:2022) і Європейський акт про доступність.

Що вимагає критерій

Коефіцієнт контрастності між текстом і фоном має бути щонайменше:

• 4,5:1 для звичайного тексту;
• 3:1 для великого тексту — від 18 pt (24 CSS px) звичайного накреслення або від 14 pt (близько 18,66 CSS px) жирного.

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

Винятки:

• текст у логотипі або назві бренду;
• текст неактивних елементів керування, наприклад вимкненої кнопки;
• декоративний текст, який нікому не потрібно читати, і текст, що є частиною фото з іншим важливим вмістом.

Типові помилки в інтернет-магазині

• світло-сірий текст-заповнювач або підказки у формах (наприклад, #aaa на білому — це близько 2,3:1);
• стара ціна, позначки «немає в наявності» і дрібний текст під кнопкою «Додати в кошик»;
• білий текст на фотобанері, де частина фото світла;
• фірмовий колір посилань чи кнопок, який добре виглядає на великому екрані, але не дотягує до 4,5:1;
• текст, контрастність якого падає лише під час наведення курсора або фокуса.

Як перевірити

Автоматично: наш сканер вимірює контрастність кожного видимого текстового елемента (правило контрастності кольорів) і показує знайдені кольори та коефіцієнт. Текст на зображеннях чи градієнтах він не завжди може оцінити — такі результати позначено для ручної перевірки.

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

Як виправити

• Затемніть текст або освітліть фон, доки коефіцієнт не сягне щонайменше 4,5:1; зазвичай достатньо невеликої зміни яскравості.
• Розміщуйте текст на зображеннях на суцільній або напівпрозорій підкладці.
• Не використовуйте текст-заповнювач як єдину мітку поля; якщо залишаєте його, зробіть його теж читабельним.
• Виправте колір один раз у налаштуваннях теми або CSS-змінних, а не на кожній сторінці окремо.

Пов'язані критерії

• 1.4.11 Контраст нетекстових елементів — іконки, рамки полів та індикатори фокуса (3:1).
• 1.4.1 Застосування кольору — колір не може бути єдиним способом передати інформацію.
• 1.4.4 Зміна розміру тексту — текстом має бути зручно користуватися при масштабі 200 %.

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

Яку контрастність вимагає WCAG рівня AA?

Щонайменше 4,5:1 між текстом і фоном та щонайменше 3:1 для великого тексту. Рівень AAA (1.4.6) вимагає 7:1 і 4,5:1.

Що WCAG вважає великим текстом?

Текст розміром щонайменше 18 пунктів (24 CSS-пікселі) звичайного накреслення або щонайменше 14 пунктів (близько 18,66 CSS-пікселя) жирного.

Чи стосується 1.4.3 логотипів і неактивних кнопок?

Ні. Текст у логотипі чи назві бренду, текст неактивних (вимкнених) елементів керування і суто декоративний текст є винятками.

Чи охоплює 1.4.3 іконки та рамки полів?

Ні, 1.4.3 стосується лише тексту та зображень тексту. Іконки, рамки фокуса і рамки полів форми належать до 1.4.11 «Контраст нетекстових елементів», який вимагає 3:1.