Багато ваших читачів не бачать вашу вікі так само, як ви. Вони можуть мати контрастну чутливість — проблеми з читанням тексту, який має низький контраст з коліром фону під ним. Хоча вони можуть розрізняти чорні літери на білому тлі, інші комбінації кольорів читати набагато важче — і навіть можуть викликати головний біль.
На щастя, ви можете їм допомогти. Дотримуйтесь стандартів контрастності в Інтернеті, і більше людей зможуть залишатися у вашій вікі довше.
Проблема для всіх ваших читачів[]
Є багато захворювань очей, які можуть відштовхнути людей від вашої вікі. Глаукома, ретинопатія[1] та астигматизм ока – лише деякі з них. Це стосується не лише людей старшого віку, тож майте на увазі, що читачі будь-якого віку можуть мати вади зору та інвалідність.
Проте не лише люди з вадами зору отримують переваги від більш контрастних дизайнів. Погані комбінації кольорів можуть самі по собі спричинити напруження та дискомфорт для очей, змусивши навіть тих, хто має чудовий зір, відвернутись від вашої вікі[2]
Коефіцієнти контрастності[]
Тож як підвищити контрастність у своїй вікі? Легко: коефіцієнти контрастності (CR). За цими веб-стандартними коефіцієнтами є досить химерна математика, але оволодіння математикою не є обов’язковим для покращення вашої вікі.
Легкодоступні інструменти[]
Все, що вам потрібно, це простий у використанні інструмент під назвою аналізатор контрасту. Їх існує маса, щоб допомогти вамyou. Кольоровий колір демонструється у відео вище, але є й інші, наприклад:
- The WCAG Contrast Checker.
- Інспектор доступності Firefox
- Засіб вибору кольорів Chrome,
- Інші розширення браузера для перевірки CR.
Дотримання стандартів[]
Існує два веб-стандарти: AA та AAA. Усі контрастні аналізатори зроблять це очевидним, коли ви досягнете цих цілей. Прийміть не менше, ніж коефіцієнт контрасту AA між кольорами фону та тексту[3]. Завжди намагайтеся використовувати вищий стандарт AAA, щоб допомогти ширшому колу читачів[4].
Щоб задовольнити стандарт AA, Ви також повинні звернути увагу на контраст графічних елементів, таких як піктограми, необхідних для розуміння вмісту вікі[5]. Їх має бути легко побачити, як-от текст, інакше деякі читачі можуть втратити контекст чи іншу цінну інформацію.
Розмір має значення[]
Великі літери не потребують надвисоких коефіцієнтів контрастності, щоб їх було легко читати. З цієї причини ви, як правило, можете висловити трохи більше творчої свободи за допомогою заголовків розділів, ніж у звичайному тексті статті.
Як правило, аналізатори контрасту повідомлять вам, чи застосовується ваш досягнутий CR лише до великого тексту. Якщо в ньому не вказано 'великий, це зазвичай означає, що CR застосовується як до великого, так і до звичайного тексту.
Але ваш логотип зазвичай не має мінімального CR, він занадто великий і занадто стилізований. Це не означає, що ви повинні взагалі забути про контраст. Білий логотип загубиться на білому тлі. Але якщо ви дійсно налаштовані на використання білого на білому, просто додайте трохи темніших меж або тіней навколо нього.
Кращі практики[]
Ось кілька найкращих практик, які допоможуть вам досягти мети дотримання стандартів W3C.
- Будь ласка, принаймні натисніть AA для вашої звичайної основної копії — але спробуйте перейти до AAA, якщо можете.
- 'Переконайтеся, що ви правильно читаєте свій аналізатор CR. Зіставте співвідношення з розміром тексту, який вас цікавить. Вашим читачам не принесе користі мати комбінацію кольорів, яка працює на 18 пікселях, коли ви розглядаєте ситуацію на 11 пікселях.
- Не поєднуйте кольори, які (навіть майже) протилежні один одному на колірному колі. Особливо погані комбо? Червоний на зеленому, блакитний на червоному, зелений на пурпурному, червоний на синьому, синій на жовтому та їхні реверси[6]
Дотримання цих порад допоможе більшій кількості людей зручно бачити вашу вікі — і, отже, залишатися на ній довше!
Див. також[]
Схожі теми тут, у Фандомі[]
- Більш глибоке пояснення коефіцієнтів контрастності
- Включно з дальтонізмом у вашій вікі
- Подробиці про вибір світлих і темних тем Фандому
- Відео ратуші про CSS з розділом про теорію кольору, починаючи приблизно з 58-хвилинної позначки.
Навколо Інтернету[]
- Посібник W3C Web Accessibility Initiative щодо кольорів із гарною контрастністю
- Інтерактивне дослідження важливості контрасту у веб-дизайні
- Colorable – проста перевірка контрастності, коли ви плануєте палітру кольорів своєї вікі.
- WCAG Contrast Checker — інструмент для перевірки відповідності контрастності вказівкам WCAG для стандартів AA та AAA.
- CheckMyColours — інструмент для перевірки всіх поточних комбінацій кольорів переднього плану та фону у вашій вікі.
- Список інструментів перевірки контрастності від W3C
- Розділ цифрових технологій Інституту Брайля та різноманітні безкоштовні застосунки, які допоможуть вам симулювати кілька захворювань очей.
Примітки[]
- ↑ Monsido. «Веб-доступність для людей з вадами зору». 9 жовтня 2018. monsido.com
- ↑ Шіді, Джим і Кевін Ларсони Монітор. «Поморгання: стрес від читання». Весна 2008 року. eyemagazine.com
- ↑ WCAG 2.1 Критерій успіху 1.4.3 Контраст (мінімум). Рівень АА
- ↑ WCAG 2.1 Критерій успіху 1.4.6 Контраст (розширений). Рівень AAA
- ↑ WCAG 2.1 Критерій успіху 1.4.11 Контраст без тексту. Рівень АА
- ↑ Габріель-Пети, Пабіні. «Застосування теорії кольору до цифрових дисплеїв». 20 січня 2007 року. uxmatters.com Зауважте, що велика частина цієї статті застаріла, оскільки стосується типів дисплеїв, які не використовуються у 2018 році. Проте, принаймні, ця точка залишається актуальною.