Перевірка контрастності кольорів
Миттєва перевірка коефіцієнта контрастності між кольором тексту та фоном та відповідності стандартам читабельності (WCAG AA)
Особливості
Миттєва перевірка коефіцієнта контрастності
Виведення результату WCAG AA лише за допомогою введення кольорів тексту та фону
Підтримка селектора та кодів
Введення HEX, короткої форми, rgb() або вибір за допомогою селектора кольорів
Зразок у двох розмірах
Перегляд реального вигляду звичайного тексту та заголовків прямо в ході роботи
Пропозиція відповідних кольорів одним клацанням
Миттєве застосування пропонованих кольорів, що зберігають відтінок, але змінюють яскравість
Як користуватися
Вибір кольору тексту
Виберіть колір за допомогою селектора або введіть код у форматі #333333, #333 або rgb(51, 51, 51)
Вибір кольору фону
Виберіть колір фону за аналогічною процедурою. Результати оновлюються автоматично при введенні
Перевірка коефіцієнта, результату та зразка
Переглядайте коефіцієнт контрастності, результат для звичайного та великого тексту, коротку оцінку та зразок вигляду тексту
Застосування пропонованих кольорів та перевірка
Якщо результат не відповідає, використовуйте пропозиції типу «змінити колір тексту на …» для застосування відповідних кольорів. Кнопка обміну дозволяє поміняти місцями кольори тексту та фону
Варіанти використання
Перевірка кольорів презентацій та матеріалів
Перевіріть читабельність кольорів тексту та фону в корпоративних матеріалах та презентаціях перед створенням
Перевірка кольорів веб-сайту
Переконайтеся, що кольори сайту та банерів відповідають стандартам доступності (WCAG AA)
Визначення можливості використання брендових кольорів у основному тексті
Визначте, наскільки темнішим потрібно зробити брендовий колір для використання в основному тексті
Виправлення невідповідних кольорів
Виправте критиковані кольори на відповідні, збереживши при цьому їхній вихідний відтінок
Базові знання
Що таке коефіцієнт контрастності
Коефіцієнт контрастності — це числовий показник від 1 : 1 до 21 : 1, який відображає різницю яскравості між кольором тексту та фону. Найвище значення 21 : 1 відповідає чорному та білому, найменше 1 : 1 — однаковим кольорам.
- Принцип розрахунку：Коефіцієнт контрастності обчислюється шляхом перетворення двох кольорів у відносну яскравість sRGB, додавання 0,05 до яскравості світлішого та темнішого кольорів та ділення світлішого значення на темніше.
- Орієнтовні значення：На білому фоні (#FFFFFF) сірий колір #777777 дає коефіцієнт 4,47 : 1, #999999 — 2,84 : 1, а чорний (#000000) — 21 : 1.
Різниця між WCAG AA та AAA
WCAG — це міжнародна рекомендація щодо доступності веб-контенту, яка встановлює два рівні граничних значень коефіцієнта контрастності: AA та AAA.
- AA (стандартний рівень)：AA вимагає коефіцієнта 4,5 : 1 для звичайного тексту та 3,0 : 1 для великого тексту. Це стандартний рівень, на який орієнтуються типові веб-сайти.
- AAA (більш суворий рівень)：AAA вимагає коефіцієнта 7 : 1 для звичайного тексту та 4,5 : 1 для великого тексту, що забезпечує кращу читабельність для людей зі зниженим зором.
Визначення великого тексту
За WCAG великим текстом вважається текст розміром приблизно 18 пункти (24 пікселі) або більше, або жирний текст розміром 14 пункти (близько 18,7 пікселя) або більше.
- Звичайний текст：Звичайний текст — це текст розмірів, які не входять у визначення великого тексту, такий як основний текст та примітки. Для нього вимагається коефіцієнт контрастності 4,5 : 1 або більше.
- Зв'язок із заголовками：Заголовки, розмір яких менший за 24 пікселі та які не є жирними, розглядаються як звичайний текст. Перевіряйте як розмір, так і товщину шрифту.
Безпека та приватність
Повністю у браузері
Введені дані обробляються лише у вашому браузері й не надсилаються назовні.
Обробка тільки в браузері
Розрахунок коефіцієнта контрастності та пропозиція кольорів виконується повністю у вашому браузері, вхідні дані не відправляються на сервер.
Зв'язок зашифрований через HTTPS
Завантаження сторінки також зашифроване за допомогою TLS, вміст недоступний для третіх осіб.
Без передачі третім особам
Вхідні дані не відправляються на зовнішні сервіси, такі як рекламні мережі або трекери.
Без автоматичного збереження результатів
Введені кольори тексту та фону та пропозиції введення не зберігаються на сервері.
Слідкуйте за RAKKOTOOLS у Google Пошуку
194 зручних інструментів легше знайти через Google Пошук та AI Пошук!
- Знайдіть у пошуку
- Відображається також у AI Пошуку
- Виявіть нові інструменти
Оновлення
- update #337
Додано перевірку контрасту кольорів, визначення читабельності тексту та фону
Рекомендовані інструменти
194 веб-інструментів доступні безкоштовно прямо зараз!