Кольори вашого бренду мають сильний емоційний вплив, але як вони виглядатимуть для відвідувачів сайту, які є слабозорими, дальтоніками або стикаються з факторами навколишнього середовища, які ускладнюють видимість?
Рівні кольору та контрастності мають вирішальне значення для комунікації, а правильні деталі мають вирішальне значення для дизайнера, який орієнтується на доступність».
Розлади сприйняття кольорів зустрічаються частіше, ніж ви думаєте. Отже, у цій публікації ми поговоримо про те, як люди з обмеженими можливостями, такими як слабкий зір, дислексія та дальтонізм, взаємодіють з Інтернетом.
Зміст
Як використовувати перевірку кольорів, щоб покращити доступність мого веб-сайту?
Цей розділ насправді досить простий, хоча вимагає певних зусиль. Вам потрібно буде скористатися онлайн-інструментом перевірки контрастності WebAIM. WebAIM – це некомерційна організація, що базується в Університеті штату Юта, місія якої полягає в покращенні доступності Інтернету в усьому світі.
Просто введіть колір переднього плану (наприклад, колір тексту або піктограм) і колір фону як шістнадцяткові значення (також відомі як шістнадцяткові), як зазначено в HTML або CSS, і засіб перевірки коефіцієнта контрастності повідомить вам, чи коефіцієнт достатній. Пам’ятайте, що мінімальний коефіцієнт контрастності, якого ви повинні шукати, становить 4.5 до 1. Чорний текст на білому тлі має коефіцієнт контрастності 21 до 1, тому у вас є велика свобода дій.
5 інструментів для створення веб-палітри кольорів, яку бачать усі
1. WebAIM Color Contrast Checker
Введіть шістнадцяткові кольори для переднього плану та фону. Результат показує відповідність стандартам AA та AAA для нормального та великого тексту разом із зразком речення. Повзунки дозволяють змінювати речі, поки не знайдеться вдала комбінація.
Сильні
- Простий інструмент із приємним для очей інтерфейсом.
- Це хороший, простий інструмент для початківців, а не тільки для дизайнерів.
Слабкі сторони
- Не можна порівнювати більше двох кольорів, тільки два.
- Повзунок освітленості — не дуже вдалий спосіб вибору кольорів. Важко сказати, наскільки привабливі кольори на цьому простому дисплеї.
2. Перевірка контрастності для WCAG
Введіть шістнадцяткові кольори для переднього плану та фону. Показує відповідність стандартам AA та AAA для звичайного та великого тексту поруч із зразком тексту Lorem Ipsum. Ви також можете завантажити зображення. Палітра з 9 кольорів підбирається для вас автоматично. Потім ви можете порівняти кожен колір як передній або фоновий колір.
Сильні
- Простий інструмент із зручним інтерфейсом.
- Вміння створювати палітри із зображень.
Слабкі сторони
- Палітра вибирається автоматично, і ви можете змінити її далі за допомогою палітри кольорів, але ці зміни не зберігаються назад у палітрі. Необхідно скопіювати та вставити інформацію в новий документ.
3. Кольоровий куб
Введіть кольори для палітри, кожен у своєму рядку. Вихідні дані показують зразки літер із коефіцієнтами контрастності порівняно зі стандартами AA для малих і великих шрифтів. Три стовпці показують контраст із білим фоном, чорним фоном і набором фірмових кольорів, які є «Найрозбірливішими з доступних».
Сильні
- Зручний для ока Інтерфейс користувача (UI) добре організований, і статус проходження/відмови/краю легко побачити.
Слабкі сторони
- Не відповідає стандартам, встановленим AAA.
- Не використовує всі можливі комбінації кольорів, і спочатку незрозуміло, що це так.
4.) Контрастна сітка восьми фігур
Введіть кольори палітри. Крім того, ви можете дати назву кожному кольору. Додаток створює таблицю з усіма можливими комбінаціями кольорів. Є три розміри плитки. Існують візуальні підказки для AA та AAA пройшли/не пройшли/краю та ефективний коефіцієнт контрастності. Стовпці та рядки можна переміщувати в додатку шляхом перетягування. Табличні дані можна зберігати, експортувати та ділитися.
Сильні
- Є багато корисних функцій, які допомагають аналізувати цілі палітри.
Слабкі сторони
- Це важче навчитися, ніж інші інструменти, якими простіше користуватися.
- Неправильний спосіб порівнювати лише два кольори.
- Не підходить для визначення того, як поєднуються кольори.
- Дещо приголомшливо дивитися, але показано багато інформації.
5. Безпечний колір
Введіть колір фону. Виберіть сімейство, розмір і щільність шрифту. Виберіть AA або AAA як стандарт. Показує вибраний колір і його шістнадцятковий код, а також зразок і ефективний коефіцієнт контрастності. Великі мініатюри можливих кольорів переднього плану з достатнім контрастом є найкращою частиною. Ви можете переглянути всі з них або лише певні групи кольорів (зелений, синій, фіолетовий тощо)
Сильні
- Завдяки приємному для очей інтерфейсу легко знайти поєднання кольорів, яке добре виглядає та працює добре.
- Це корисний інструмент, якщо у вас ще немає палітри кольорів бренду або якщо ви хочете додати ту, що вже є для Інтернету.
Слабкі сторони
- Одночасно можна порівнювати лише кольори переднього плану та фону.
- Вам потрібно скопіювати та вставити кольори в окремий документ, якщо ви хочете їх зберегти.
- Виходьте та створюйте речі для всіх!
Коли ви навчитеся користуватися цими інструментами, ви можете виявити, що для проекту вам знадобиться більше одного. Можливо, Color Cube — найкращий спосіб показати клієнту, що ви дізналися про доступність. Можливо, ви постійно використовуватимете інструмент WebAIM для швидкої вибіркової перевірки.
Висновок
Використовуючи підказки, вказівки та інструменти, про які ми щойно говорили, ви можете надати своєму веб-сайту висококонтрастні кольори та позначки. Це полегшить людям із слабким зором, дислексією та дальтонізмом читання вашого веб-сайту та вмісту. Не дивуйтеся, якщо вашій загальній аудиторії також стане легше користуватися вашим веб-сайтом.
