Контраст кольорів і WCAG: як зробити текст зручним для читання

Світло-сірий текст на білому виглядає елегантно в макеті, але його важко прочитати на телефоні під сонцем, із віковим зором чи за слабкого зору. Рекомендації з доступності WCAG перетворюють «читабельність» на число, яке можна перевірити.

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

Контраст виражають відношенням від 1:1 (той самий колір) до 21:1 (чорний на білому). Він ґрунтується на відносній яскравості — наскільки світлим колір здається оку, причому зелений важить найбільше, а синій найменше. Тому жовтий текст на білому майже не видно, а синій на білому читається добре.

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

                  Звичайний текст   Великий текст
AA  (мінімум)     4,5:1             3:1
AAA (підвищений)  7:1               4,5:1

Великий текст = від 24px, або від 18,66px жирним

На рівень AA посилається більшість законів і правил про доступність, тож вважайте його мінімумом. До AAA варто прагнути в довгих текстах для читання. Значки, рамки полів введення й індикатори фокуса, що несуть зміст, за WCAG 2.1 мають мати контраст не нижче 3:1.

Пари, які часто не проходять

Сірий текст підказок у полях, білий текст на яскравих фірмових кольорах на кшталт помаранчевого, жовтого чи світло-зеленого і текст поверх фотографій. Різниця буває крихітною: #777777 на білому дає близько 4,48:1, трохи нижче AA, а #767676 — близько 4,54:1 і проходить.

Швидкі виправлення

Затемніть текст або тло на один-два ступені, а не змінюйте відтінок: невеликі зміни світлоти сильно зсувають коефіцієнт. Робіть написи на яскравих кнопках великими й жирними або використовуйте темний текст замість білого. На фотографіях підкладіть під текст темну підкладку.

Контраст — не єдине правило щодо кольору

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

Темна тема

На темному тлі діють ті самі співвідношення. Чисто білий текст на чисто чорному дає 21:1, але може виглядати різко, а в деяких читачів літери ніби світяться; світло-сірий на дуже темно-сірому так само легко проходить AA і зручніший для довгого читання. Перевіряйте обидві теми: пара, яка проходить у світлій темі, нерідко провалюється, коли кольори інвертуються.

Текст на фотографіях і градієнтах

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

Що далі

У чернетці WCAG 3 досліджують новий метод розрахунку контрасту APCA, який точніше враховує розмір і насиченість шрифту. Поки що це лише чернетка: закони й аудити сьогодні посилаються на WCAG 2.1 і 2.2, тож пороги 4,5:1 і 3:1 залишаються тими, яких треба дотримуватися.

Перевірте пару кольорів

Перевірка контрасту кольорів від 4Dev показує коефіцієнт для будь-якого кольору тексту й тла, із живим попереднім переглядом і оцінкою «проходить/не проходить» для AA і AAA, для звичайного й великого тексту. Розрахунок виконується за формулою WCAG 2 просто у вашому браузері.

Відкрити перевірку контрасту кольорів