Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чому важливо тестувати колірний контраст?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Колірний контраст** визначає, наскільки легко розрізнити текст і елементи інтерфейсу від фону; недостатній контраст робить текст нечитабельним для людей з порушеннями зору, дальтонізмом чи просто в яскравому освітленні. **Ключове:** WCAG 2.1 вимагає мінімум 4.5:1 для звичайного тексту і 3:1 для великого тексту та елементів інтерфейсу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТестування **колірного контрасту** - один із ключових принципів веб-доступності. Воно гарантує, що **текст і елементи інтерфейсу залишаються читабельними** для всіх користувачів, включно з людьми з порушеннями зору, дальтонізмом, віковими змінами або просто тими, хто дивиться сайт на яскравому сонці чи поганому моніторі. --- ### 1. Контраст = читабельність Якщо між кольором тексту та фону занадто мала різниця у яскравості, текст "розчиняється" - людина бачить плями замість слів. > Навіть користувачі без проблем із зором часто напружують очі при сірому тексті на сірому фоні або світло-блакитному на білому. Тому контраст - не косметика, а **умова сприйняття інформації**. --- ### 2. Мільйони людей бачать кольори інакше Близько **8% чоловіків** і **0,5% жінок** мають кольорові порушення (дальтонізм). Для них зелений і червоний можуть виглядати майже однаково. Якщо важлива кнопка "Підтвердити" виділена тільки кольором, людина може **взагалі її не помітити**. Контраст допомагає розрізняти елементи незалежно від відтінку, а не тільки за кольором. --- ### 3. Контраст важливий не тільки для тексту Він впливає на: - кнопки та посилання, - стани `hover` / `focus`, - іконки, - форми та поля вводу, - графіки та діаграми. > Якщо користувач не бачить, де фокус клавіатури, він не зможе взаємодіяти з сайтом. --- ### 4. Існують чіткі стандарти (WCAG) Міжнародні рекомендації **WCAG 2.1** встановлюють мінімальні співвідношення контрасту: | Тип контенту | Мінімум (рівень AA) | Рекомендовано (рівень AAA) | |---|---|---| | Звичайний текст | **4.5 : 1** | 7 : 1 | | Великий текст (≥ 18 pt або 14 pt bold) | **3 : 1** | 4.5 : 1 | | Неголовний інтерфейс (іконки, рамки тощо) | **3 : 1** | - | Перевірити контраст можна за допомогою інструментів на кшталт: - **WebAIM Contrast Checker**, - **Contrast Ratio by Lea Verou**, - вбудованих перевірок у Figma, Chrome DevTools, Lighthouse. --- ### 5. Хороший контраст покращує UX для всіх Високий контраст: - знижує втому очей, - робить сайт зручним на мобільних пристроях і при поганому освітленні, - покращує сприйняття інформації та швидкість читання. Контрастність - це **універсальний параметр зручності**, а не тільки для людей з інвалідністю. --- ### Висновок: Тестування колірного контрасту - це не "додаткова перевірка дизайну", а **обов'язковий крок**, щоб: - текст був читабельним, - елементи були розрізнюваними, - сайт відповідав стандартам WCAG, - і кожен користувач міг бачити та розуміти контент **без зусиль і бар'єрів**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.