Центральна спільнота
Register
Advertisement

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

На щастя, ви можете їм допомогти. Дотримуйтесь стандартів контрастності в Інтернеті, і більше людей зможуть залишатися у вашій вікі довше.

Contrast cones

Хоча це ідеальний приклад високої контрастності, ви можете досягти хороших рівнів контрастності для своїх читачів за допомогою десятків тисяч колірних комбінацій

Проблема для всіх ваших читачів[]

Є багато захворювань очей, які можуть відштовхнути людей від вашої вікі. Глаукома, ретинопатія[1] та астигматизм ока – лише деякі з них. Це стосується не лише людей старшого віку, тож майте на увазі, що читачі будь-якого віку можуть мати вади зору та інвалідність.

Проте не лише люди з вадами зору отримують переваги від більш контрастних дизайнів. Погані комбінації кольорів можуть самі по собі спричинити напруження та дискомфорт для очей, змусивши навіть тих, хто має чудовий зір, відвернутись від вашої вікі[2]

Коефіцієнти контрастності[]

Тож як підвищити контрастність у своїй вікі? Легко: коефіцієнти контрастності (CR). За цими веб-стандартними коефіцієнтами є досить химерна математика, але оволодіння математикою не є обов’язковим для покращення вашої вікі.

Легкодоступні інструменти[]

Все, що вам потрібно, це простий у використанні інструмент під назвою аналізатор контрасту. Їх існує маса, щоб допомогти вамyou. Кольоровий колір демонструється у відео вище, але є й інші, наприклад:

Дотримання стандартів[]

Існує два веб-стандарти: AA та AAA. Усі контрастні аналізатори зроблять це очевидним, коли ви досягнете цих цілей. Прийміть не менше, ніж коефіцієнт контрасту AA між кольорами фону та тексту[3]. Завжди намагайтеся використовувати вищий стандарт AAA, щоб допомогти ширшому колу читачів[4].

Щоб задовольнити стандарт AA, Ви також повинні звернути увагу на контраст графічних елементів, таких як піктограми, необхідних для розуміння вмісту вікі[5]. Їх має бути легко побачити, як-от текст, інакше деякі читачі можуть втратити контекст чи іншу цінну інформацію.

Розмір має значення[]

AA Large

Ця комбінація ледь передає AA, а тоді — лише для великого тексту. Ви не повинні використовувати такі комбінації для звичайного тексту статті

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

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

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

Кращі практики[]

Ось кілька найкращих практик, які допоможуть вам досягти мети дотримання стандартів W3C.

  • Будь ласка, принаймні натисніть AA для вашої звичайної основної копії — але спробуйте перейти до AAA, якщо можете.
  • 'Переконайтеся, що ви правильно читаєте свій аналізатор CR. Зіставте співвідношення з розміром тексту, який вас цікавить. Вашим читачам не принесе користі мати комбінацію кольорів, яка працює на 18 пікселях, коли ви розглядаєте ситуацію на 11 пікселях.
  • Не поєднуйте кольори, які (навіть майже) протилежні один одному на колірному колі. Особливо погані комбо? Червоний на зеленому, блакитний на червоному, зелений на пурпурному, червоний на синьому, синій на жовтому та їхні реверси[6]

Дотримання цих порад допоможе більшій кількості людей зручно бачити вашу вікі — і, отже, залишатися на ній довше!

Див. також[]

Схожі теми тут, у Фандомі[]

Навколо Інтернету[]

Примітки[]

Advertisement