Колірний контраст для тексту, кнопок і значків

Чому контраст важливий

Блідий текст коштує читачів. Людям зі слабким зором, старшим читачам і кожному, хто дивиться на смартфон за яскравого світла, потрібна чітка різниця між текстом і тлом. Тому Настанови з доступності вебвмісту (WCAG) від W3C встановлюють мінімальні значення для тексту, для елементів керування, як-от кнопок і полів введення, а також для значків і графіки. Їх можна виміряти й перевірити до запуску.

Як працює коефіцієнт контрасту

Коефіцієнт контрасту порівнює, наскільки яскраві два кольори. WCAG дивиться не на відтінок, а на відносну яскравість: значення від 0 для найтемнішого чорного до 1 для найсвітлішого білого. Три канали – червоний, зелений і синій – перетворюються й зважуються: зелений важить найбільше, червоний менше, а синій найменше. Коефіцієнт дорівнює (L1 + 0.05) / (L2 + 0.05), де L1 – яскравість світлішого кольору. Результат лежить між 1:1 для двох однакових кольорів і 21:1 для чорного на білому.

На практиці важливі два правила W3C. По-перше, значення не округлюються: коефіцієнт 4.499:1 не досягає межі 4.5:1. По-друге, контраст вимірюється щодо тла, заданого для тексту. Якщо сторінка задає лише колір тексту без кольору тла, W3C вважає це невідповідністю, бо типове тло відвідувача невідоме. Завжди задавай обидва кольори разом.

Три критерії успіху

• 1.4.3 Контраст (мінімальний), рівень AA: текст і зображення тексту потребують щонайменше 4.5:1, великий текст – щонайменше 3:1.
• 1.4.6 Контраст (підвищений), рівень AAA: текст потребує щонайменше 7:1, великий текст – щонайменше 4.5:1. Це суворіший рівень, і найбільше він допомагає з довгими текстами.
• 1.4.11 Нетекстовий контраст, рівень AA: щонайменше 3:1 щодо сусідніх кольорів для всього, що треба бачити, щоб розпізнати елемент керування та його стан (наприклад, межу поля введення чи індикатор фокуса), і для частин графіки, потрібних для розуміння вмісту, як-от значків чи ліній на діаграмі.

Що вважається великим текстом

Великий текст – це щонайменше 18 пунктів або щонайменше 14 пунктів жирним. W3C перераховує це приблизно в 24 пікселі й приблизно 18,5 пікселя жирним. Великий текст може мати менший контраст, бо літери більші, а їхні штрихи ширші. Обережно з тонкими шрифтами: за словами W3C, згладжування може робити тонкі чи незвичні шрифти блідішими за їхній заданий колір. W3C рекомендує товстіші шрифти або пару кольорів помітно вище мінімуму.

Що не мусить проходити перевірку

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

Типові помилки

• Світло-сірий на білому. Сірий для дат, підписів чи другорядного тексту часто надто блідий: #999999 на білому досягає лише 2.84:1. Найсвітліший чистий сірий, що проходить AA для звичайного тексту на білому, – #767676 із 4.54:1.
• Текст на зображеннях. Контраст змінюється з кожною частиною фото. W3C називає фонові зображення без достатнього контрасту невідповідністю (F83). Розмісти текст на суцільній площі, затемни зображення під ним або постав текст поруч із зображенням. Перевіряй найсвітліше місце під текстом.
• Текст-заповнювач. Сіра підказка в порожньому полі введення – це текст, і до неї застосовується 1.4.3. Світло-сірий на кшталт #9ca3af на білому досягає лише 2.53:1. Заповнювач також не замінює видимого підпису.
• Стани наведення й фокуса. Текст, що з’являється чи змінюється під час наведення миші або фокуса з клавіатури, має відповідати тим самим значенням. Ефект наведення не повинен знижувати контраст елемента керування чи послаблювати індикатор фокуса. Індикатор фокуса, який ти проєктуєш сам, потребує 3:1 щодо сусіднього тла.
• Білий текст на яскравих фірмових кольорах. Помаранчеві, жовті, світло-зелені чи бірюзові кнопки з білим текстом часто не проходять: білий на #ff6600 досягає 2.93:1.
• Бліді межі й значки. Якщо межа – єдине, що показує, де поле введення, їй потрібно 3:1: #cccccc на білому має 1.60:1. Значки, що несуть зміст без тексту, як-от стрілка випадного списку чи значок закриття, теж потребують 3:1.
• Перевірка лише однієї теми. Якщо твій сайт має темний режим, перевір його пари кольорів окремо. Колір, що працює на білому, може не пройти на темному тлі.

Виправ фірмову палітру, не втративши бренду

1. 1Запиши кожен колір із його роллю: текст, тло, акцент чи кнопка, межа. Багато проблем починається, коли один колір виконує всі завдання.
2. 2Залиш фірмовий колір там, де правила легше виконати або вони не застосовуються: у логотипі, на великих площах, для декорації та великих заголовків.
3. 3Для тексту й дрібних елементів використовуй темніший чи світліший відтінок того самого кольору. Якщо змінюється лише світлота, колір залишається впізнаваним: білий текст на #c74f00, темнішому помаранчевому, досягає 4.61:1.
4. 4Або натомість зміни колір тексту. Темний текст на яскравому фірмовому кольорі часто працює краще за білий: #1a1a1a на #ff6600 досягає 5.92:1.
5. 5Визнач один сірий для другорядного тексту, що проходить перевірку, наприклад #767676 на білому, і використовуй його скрізь замість кількох блідих сірих.
6. 6Перевір кожен стан: звичайний, наведення, фокус, помилка й темний режим. Збережи остаточні кольори як змінні у своїй таблиці стилів, щоб ніхто знову не вибрав блідий колір уручну.

Перевір свої кольори з Do4U

Перевірка колірного контрасту обчислює ці значення для твоїх власних кольорів. Ти вводиш свої кольори, по одному в рядку, і даєш кожному роль: text, background, accent (наприклад, кнопка) або border. Код перевіряє кожну доречну пару на AA і AAA для звичайного й великого тексту та на 3:1 для меж, значків і площ кнопок, без округлення вгору. Для кожної пари, що не проходить, ти отримаєш найближчий колір, що проходить, – один темніший і один світліший, того самого відтінку. Do4U також складає скориговану палітру, ще раз перевіряє її як ціле й експортує як власні властивості CSS, SCSS або JSON. Усе працює в коді, без ШІ, і перевірка безкоштовна.

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