Проверка контраста WCAG проходит через несколько простых шагов. Никакая информация не покидает ваш браузер.
- Вы вводите цвет переднего плана и фона. Инструмент разбирает hex, rgb(), hsl() или именованные CSS-цвета на значения красного, зелёного и синего каналов.
- Каждый RGB-канал линеаризуется с помощью передаточной функции sRGB. Это преобразует значения дисплея с гамма-кодированием в линейную интенсивность света.
- Линейные значения взвешиваются по чувствительности человеческого глаза к каждому каналу — 0,2126 для красного, 0,7152 для зелёного, 0,0722 для синего. Сумма — это относительная яркость цвета.
- Коэффициент контраста равен (L1 + 0,05) ÷ (L2 + 0,05), где L1 — яркость более светлого цвета, а L2 — более тёмного. Дополнительные 0,05 сохраняют формулу действительной для чистого чёрного.
- Коэффициент сравнивается с порогами WCAG: AA обычный текст требует минимум 4,5:1, AA крупный текст — 3:1, AAA обычный текст — 7:1, AAA крупный текст — 4,5:1. Крупный текст означает не менее 18pt или 14pt жирным.
FAQ
Часто задаваемые вопросы о проверке контраста WCAG.
В чём разница между AA и AAA?
AA — это минимальный уровень соответствия для большинства веб-контента. Он требует коэффициента контраста не менее 4,5:1 для обычного текста и 3:1 для крупного текста. AAA — более высокий стандарт, требующий 7:1 для обычного текста и 4,5:1 для крупного текста. Вы можете нацеливаться на AAA для ключевого контента, например, основного текста на новостном сайте, используя AA для остального дизайна. Соответствие AAA везде может быть сложным с фирменными цветами, поэтому многие команды стремятся к AA повсеместно и поднимают ключевой текст до AAA там, где это возможно.
Что считается «крупным текстом» по WCAG?
WCAG 2.x определяет крупный текст как минимум 18 пунктов (24px) для обычного начертания или 14 пунктов (около 19px) для жирного начертания. Символы и иконки, являющиеся частью шрифта, следуют тем же порогам. Если вы не уверены, какой порог применим к вашему интерфейсу, проверьте оба — AA Крупный имеет более низкую планку (3:1), поэтому большинство цветовых пар, не прошедших AA Обычный, на самом деле проходят AA Крупный, когда текст достаточно большой.
Почему моя пара проходит AA Крупный, но не проходит AA Обычный?
Потому что AA Крупный требует только соотношения 3:1, в то время как AA Обычный требует 4,5:1. WCAG устанавливает более низкий порог для крупного текста, потому что более крупные символы легче читать даже при меньшем контрасте. Цветовая пара с коэффициентом, скажем, 4,0:1 проходит AA Крупный (порог 3:1), но не проходит AA Обычный (порог 4,5:1). Это очень часто встречается при использовании более светлых фирменных цветов в качестве переднего плана на белом фоне.
Могу ли я полагаться только на этот инструмент для аудита доступности?
Этот инструмент проверяет одно — коэффициент контраста WCAG 2.x между двумя сплошными цветами. Настоящая доступность включает больше: индикаторы фокуса, размер и начертание шрифта, цвет как единственный способ передачи информации, а также совместимость с программами чтения с экрана и инструментами масштабирования. Используйте эту проверку контраста вместе с другими методами аудита для получения полной картины доступности вашего приложения.
Какие цветовые форматы принимает ввод?
Вы можете вставить 3-, 4-, 6- или 8-значные hex-коды (с # или без), значения rgb() и rgba() в устаревшем синтаксисе с запятыми или современном синтаксисе с пробелами, hsl() и hsla() с любой стандартной единицей оттенка (deg, rad, grad, turn), hsv(), hwb() и любой из 150 именованных CSS-цветов из спецификации CSS Color Module Level 4. Цвет полностью разбирается на вашем устройстве.