Дизайн

Як обирати кольори, які можуть прочитати всі

Автор The AsasWeb team 1 хв читання

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

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

Знайте цілі

WCAG задає чіткі мінімуми. Основний текст потребує коефіцієнта контрасту щонайменше 4,5 до 1 щодо свого тла. Великий текст, приблизно від 24 пікселів, та елементи інтерфейсу потребують щонайменше 3 до

  1. Це підлоги, а не цілі, і їх легко перевірити будь-яким інструментом контрасту.

Закладайте контраст у палітру

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

Не покладайтеся лише на колір

Колір ніколи не має бути єдиним способом щось позначити. Обов’язкове поле, помилка, посилання в абзаці: кожне потребує другої підказки, як-от тексту, іконки чи підкреслення. Люди, які не сприймають відмінності кольорів, усе одно потребують повідомлення.

Зважайте на темну тему

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

Ми ставимося до контрасту як до виміряного числа, а не здогадки. Якщо ви не впевнені, що кольори вашого бренду проходять, розпочніть проєкт, і ми проведемо аудит та знайдемо палітру, яка водночас у стилі бренду й читабельна.

Хочете такий самий стандарт на власному сайті?

Розкажіть нам про свій проєкт, і ми відповімо чесними практичними наступними кроками.