Візуальна система: ієрархія, кольори й контраст

Система починається з функції

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

Для навчального Northstar Studio оберіть три ролі: заголовок відповідає на головне питання; основний текст пояснює один крок; підпис уточнює умови. Логотип або текстова назва позначає автора, але не замінює корисний зміст. Декор підтримує композицію, а не конкурує з відповіддю.

Токени замість випадкових налаштувань

Токен — назване значення, яке повторно використовують у макетах. Наприклад, background, surface, text, muted, accent; розміри заголовка й основного тексту; внутрішній відступ картки. Якщо роль кольору зрозуміла, зміну можна застосувати послідовно, не підбираючи новий відтінок у кожному файлі.

У tokens.json наведено дві навчальні палітри. Світла використовує темний текст на білому тлі; темна — світлий текст на темно-синьому. Це палітра вправи, не новий брендбук SEOWORK. Кнопка має окремо визначені фон і колір напису: успадкований акцентний текст на такому самому акцентному тлі стане невидимим.

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

Контраст вимірюють, а не вгадують

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

Для вправи використовуйте суворіший простий критерій: усі текстові пари палітри не нижче 4,5:1. У комплекті валідатор обчислює контраст foreground/background за їхньою відносною яскравістю. Логотипи мають окремі винятки у стандарті, але це не причина робити назву бренду нерозбірливою.

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

Перевірка двох станів

Відкрийте visual-board.html з пакета та перемкніть тему. Це автономний навчальний макет, без аналітики, зовнішніх бібліотек і справжньої реєстрації. Порівняйте ієрархію та контраст двох станів. Не потрібно просто інвертувати всю картинку: окремі ролі мають залишатися зрозумілими й після зміни тла.

Статична картинка у стрічці не перемикає власні кольори автоматично разом із сайтом. Якщо готуєте два варіанти зображення, це два окремі експорти. Для нашого навчального сайту тема перемикає HTML-макет; поведінку конкретної платформи перевірятимемо окремо, не приписуючи їй властивості локальної сторінки.

Практика

1. Опишіть ролі заголовка, пояснення, умов і дії у своєму повідомленні.
2. Створіть палітру light/dark і назвіть ролі кольорів.
3. Перевірте контраст текстових пар та запишіть значення без округлення до прохідного.
4. Порівняйте макет на широкому й вузькому екрані; виправте конфлікт ієрархії, якщо він є.

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

Методичні джерела

• W3C: мінімальний контраст тексту

Приклади, сценарії, макети й питання — оригінальні матеріали SEOWORK; джерела використано як орієнтири доступності.