Використання контрасту кольору високого кольору для більш доступного дизайну
Високий показник відмов часто викликаний поганою візуальною доступністю веб-сайту. Коли шрифти занадто малі, або вони незрозумілі, коли надто багато відволікаючих чи достатньо пробілів, багато людей просто залишити сайт без другої думки.
Однією з найчастіших причин ранніх відмов є погано відібрані кольорові схеми, які зменшують читабельність змісту.
Згідно зі статистикою ВООЗ, в усьому світі існує близько 285 мільйонів людей з вадами зору, багато з яких є частково або повністю сліпими. Візуальні інваліди бачать кольори по-різному, так уникаючи низького контрасту кольору в наших проектах неминуче, якщо ми хочемо надати нашим клієнтам доступний і зручний веб-сайт.
Веб-стандарти для кольорового контрасту
Коефіцієнт контрастності кольору вимірює різницю в контрасті між двома кольорами. Чим вище значення, тим легше відрізнити об'єкт (текст, зображення, графіку) на передньому плані від фону.
Кольори можуть відрізнятися різними способами, наприклад, у відтінок, значення і насичення. Коефіцієнт контрастності кольору розраховується за формулою, наданою W3C, головною міжнародною організацією стандартів для World Wide Web.
Він може приймати значення між 1: 1 (ніякого контрасту взагалі, передній план і фон мають однаковий колір) і 21: 1 (максимальний контраст що існує лише між чорним і білим).
Найновіші рекомендації з доступності веб-контенту W3C (WCAG) 2.0 надають веб-розробникам та розробникам вмісту мінімальний рівень (АА) та розширене (рівень ААА) значення прийнятного співвідношення кольорів..
Рівень АА вимагає принаймні Коефіцієнт 4,5: 1 для звичайного тексту, і 3: 1 для великого тексту. Набагато простіше читати великі текстові субтитри, тому потрібний менший контраст кольору.
Якщо ви хочете досягти рівня AAA, який є підвищеним рівнем, вам потрібно розробляти свою колірну схему з більшою обережністю, оскільки вона вимагає принаймні Коефіцієнт контрастності 7: 1 для звичайного тексту, і 4.5: 1 для великих. Якщо текст є частиною логотипу або торгової марки, на будь-якому рівні WCAG немає вимоги щодо мінімального контрасту кольору.
Ми можемо називати веб-сайт лише візуально доступним, якщо Коефіцієнт контрастності кольорів між кожним об'єктом переднього плану та його фоном досягає щонайменше рівня AA.
Переваги співвідношення контрастності кольорів
Забезпечуючи кращу читаність, ви не тільки залучаєте користувачів з вадами зору, але й людей, які читають ваш вміст на невеликих екранах наприклад, на смартфоні або смарт-годиннику, серед погані умови освітлення, і далі монітори нижчої якості.
Люди також читають швидше, якщо між текстом і фоном виникає більший контраст, тому, ймовірно, їм займе більше часу, щоб вони набридли на вміст сайту.
Якщо ви переживаєте, що застосування більш високого контрастного коефіцієнта негативно вплине на естетику вашого дизайну, вам потрібно перевірити веб-проект Contrast Rebellion, який за допомогою прикладів реального життя доводить, що дотримання правил високого контрасту може призвести до наслідків. в привабливих і прохолодних конструкцій.
Програми для перевірки контрасту кольору
Є багато великих безкоштовних інструментів по всьому Інтернету, які можуть допомогти дизайнерам перевірити коефіцієнт контрастності кольорів на своєму сайті.
Найпростіший спосіб перевірити свій дизайн на колірний контраст - вибрати основні кольори за допомогою Photoshop або відповідного розширення для браузера, як це для Firefox, і скопіювати значення в один з програм нижче.
Найбільш важливо пам'ятати, що вам завжди потрібно порівняйте колір переднього плану, наприклад, колір тексту, з його оточуючими областями (колір фону).
1. Контролер контрастності кольорів WebAim
WebAim (веб-доступність в розумі) - це організація, що сприяє доступності веб-сайтів, яка пропонує розробникам простий, але надійний контролер кольорового контрасту серед багатьох інших інструментів доступності, таких як Wave, загальна програма оцінки доступності, яка може допомогти вам швидко оцінюйте проблеми доступності вашого сайту.
Контролер контрастності кольорів WebAim повідомляє вам якщо ваші кольори проходять тести WCAG AA та AAA, як для звичайних, так і для великих текстів.
2. Перевірка контрастності кольору Snook
Джонатан Снук (Jonathan Snook), який зараз працює в якості ведучого розробника в Shopify, вже більше десяти років розміщує свій зручний інструмент перевірки контрастності кольорів. Додаток Snook дозволяє вам змінювати значення HSL і RGB Колір переднього і фонового кольорів один за одним за допомогою зручні повзуни діапазону до досягнення результату, сумісного з тестами WCAG 2.0.
CheckMyColours
Програма CheckMyColours, створена компанією Giovanni Scala, дозволяє перевірити коефіцієнт контрастності кольорів для всіх комбінацій кольорів тла переднього плану на живому веб-сайті.
Він розраховує коефіцієнт контрастності світності, різниця яскравості, і різниця кольорів, і надає вам повний звіт про результати. Звіт CheckMyColours може значно полегшити ваше розуміння того, як можна покращити візуальну доступність вашого сайту.
Дизайнер колірної схеми
Color Scheme Designer - це не спеціальна перевірка кольорового контрасту, а інструмент для розробка повних колірних схем.
Ми включаємо його в цю колекцію, оскільки вона має функцію, яка дозволяє бачити, як ваша кольорова схема сприймається людьми з різними типами порушень зору. Ви можете перевірити свої кольори на повну кольорову сліпоту, протанопію, дейтенатопію та багато інших порушень зору. Додаток має більш нову версію під назвою Paletton, що робить можливим навіть більш складне моделювання зору (ви також можете перевірити на такі речі, як паршивий світлодіодний дисплей або слабкий дисплей CRT).
W3C також надає вам величезний список інструментів оцінки доступності веб-сайтів, де ви можете знайти багато інших інструментів контрастності кольорів, таких як корисне колесо доступності кольорів.
Поради щодо створення візуально доступних веб-сайтів
Якщо ви хочете створити візуально доступний веб-сайт, це завжди гарна ідея уникати використання кольору для передачі функціональності або сенсу. Іконки, які змінюють свій колір на основі свого поточного стану, є типовими прикладами для цього.
Якщо це можливо, завжди розробити додаткові візуальні підказки що допомагає людям, які бачать кольори по-різному у розумінні функціональності.
Ніколи не забувайте зверніть особливу увагу на колірний контраст кнопок, посилань і меню, оскільки вони є засобом навігації на вашому сайті. Якщо користувачі не можуть легко переміщатися на вашому сайті, ви швидко втратите їх. Доступні кольори для кнопок із закликом до дії є також Важливе значення мають хороші показники конверсій.
Для перевірки коефіцієнта контрастності кольору в процесі розробки рекомендується перевіряти коефіцієнт контрастності кольору, оскільки важко переконати клієнта змінити колірну схему сайту пізніше в процесі проектування..
Тепер читайте: практичний підхід до вибору схеми кольорів веб-сайту
