Вибір кольору та перевірка контрасту
Виберіть колір піпеткою або введіть його в будь-якому форматі. Побачите його в HEX, RGB, HSL, HSV і CMYK, отримаєте світліші й темніші відтінки та гармонійні кольори, а також перевірите, чи відповідає текст у двох кольорах рекомендаціям WCAG щодо контрасту для доступності.
Кольори
Докладніше: Вибір кольору та перевірка контрасту
Виберіть колір піпеткою або введіть його в будь-якому форматі. Побачите його в HEX, RGB, HSL, HSV і CMYK, отримаєте світліші й темніші відтінки та гармонійні кольори, а також перевірите, чи відповідає текст у двох кольорах рекомендаціям WCAG щодо контрасту для доступності.
Частина розділу «Файли, зображення та дизайн» на SmartCalcy. Працює у вашому браузері без облікового запису, використовує вашу валюту й одиниці (їх можна змінити вгорі сторінки) і дає оцінки лише для інформації, тож перевірте офіційні рекомендації, перш ніж покладатися на результат.
Як користуватися: Вибір кольору та перевірка контрасту
Що він обчислює і коли ним користуватися
Вибирає й конвертує кольори між HEX, RGB, HSL, HSV і CMYK, пропонує світліші й темніші відтінки та гармонійні кольори й перевіряє контраст тексту за рекомендаціями доступності WCAG.
Як користуватися, крок за кроком
- Виберіть колір піпеткою або введіть його як HEX, RGB, HSL чи назву кольору.
- Виберіть колір фону для перевірки контрасту.
- Копіюйте будь-який формат одним натисканням.
- Використовуйте відтінки та гармонійні кольори для палітри.
Що означає кожне поле
- Колір – За замовчуванням #2443C8 — синій SmartCalcy.
- Фон – За замовчуванням білий.
Як читати результати
- Коефіцієнт контрасту – Від 1:1 до 21:1 з результатами AA та AAA для звичайного й великого тексту.
- Формати – HEX, RGB, HSL, HSV і CMYK.
- Світліші й темніші відтінки – Світліші й темніші варіанти.
- Гармонійні кольори – Доповняльні, аналогові та тріада.
Формула
Коефіцієнт контрасту = (L1 + 0,05) ÷ (L2 + 0,05), де L1 і L2 — відносна яскравість світлішого й темнішого кольорів. WCAG AA вимагає 4,5:1 для звичайного тексту й 3:1 для великого; AAA — 7:1 і 4,5:1.
Приклад розрахунку
Із початковими кольорами #2443C8 на білому має коефіцієнт контрасту 7,74:1, що проходить AAA для тексту будь-якого розміру.
Припущення та обмеження
- Значення CMYK — проста конвертація, а не друкарський профіль із керуванням кольором.
- Результати контрасту обчислюються за формулою WCAG 2.
Поширені помилки
- Перевірка контрасту лише на великому тексті з подальшим використанням кольору для дрібного.
- Передача значення лише кольором.
Поширені запитання
Який коефіцієнт контрасту потрібен?
Щонайменше 4,5:1 для звичайного тексту й 3:1 для великого, щоб відповідати WCAG AA.
Великий текст — це особливий розмір?
Так: щонайменше 24 px або близько 18,7 px жирним.
Чи можна ввести назву кольору?
Так, підходить будь-яка назва кольору CSS, наприклад teal чи tomato.
Схожі інструменти
| Рівень | Звичайний текст | Великий текст |
|---|---|---|
| AA | Пройдено | Пройдено |
| AAA | Пройдено | Пройдено |
Формати
- HEX
- RGB
- HSL
- HSV
- CMYK