Об этом инструменте
Проверьте соотношение цветового контраста между текстом переднего плана и цветами фона в соответствии с рекомендациями 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 для компонентов пользовательского интерфейса и графических объектов (кнопок, значков, полей форм). Вы также можете использовать этот инструмент для их проверки — просто введите цвета компонента и фона.