Про цей інструмент
Перевірте співвідношення кольорів між текстом переднього плану та кольорами фону відповідно до вказівок щодо доступності WCAG 2.1. Введіть кольори як шістнадцяткові коди, значення RGB або значення HSL і миттєво перегляньте коефіцієнт контрастності разом із результатами відповідності WCAG AA та AAA для нормального та великого розміру тексту.
Поширені запитання
- Який коефіцієнт контрастності необхідний для відповідності WCAG?
- WCAG AA вимагає 4,5:1 для звичайного тексту та 3:1 для великого тексту (18pt+ або 14pt+ жирний). WCAG AAA вимагає 7:1 для нормального тексту та 4,5:1 для великого тексту. Максимально можливе співвідношення 21:1 (чорне по білому).
- Чому контраст кольорів важливий?
- Достатня контрастність забезпечує читабельність тексту користувачам із слабким зором, дальтонізмом або тим, хто дивиться на екрани при яскравому сонячному світлі. Це також юридична вимога згідно з правилами доступності ADA та ЄС для багатьох веб-сайтів.
- Що вважається «великим текстом» у WCAG?
- Великий текст визначається як 18 пт (24 пікселів) і вище для звичайної товщини або 14 пт (18,66 пікселів) і більше для жирного тексту. Великий текст має нижчі вимоги до контрастності, оскільки його легше читати.
- Чи перевіряє цей інструмент контрастність нетекстових елементів?
- WCAG 2.1 вимагає контрастності 3:1 для компонентів інтерфейсу користувача та графічних об’єктів (кнопок, значків, полів форм). Ви також можете використовувати цей інструмент, щоб перевірити це — просто введіть кольори компонента та фону.