История проверки цветового контраста
Низкий контраст входит в число самых частых проблем доступности в вебе. Его правила похожи на магические числа, но у каждого есть причина, связанная с тем, как глаза с возрастом теряют чувствительность и как экраны излучают свет.
Откуда взялись 4,5 и 7
WCAG 2.0 стали рекомендацией W3C в декабре 2008 года. Авторы взяли за основу минимум 3:1 из стандарта ISO 9241-3 и повысили его, чтобы компенсировать потерю контрастной чувствительности при остроте зрения около 20/40, обычной примерно к 80 годам. Так появилось 4,5:1 для уровня AA. Уровень AAA, 7:1, делает то же самое для зрения около 20/80.
Относительная яркость
Формула сначала переводит каждый канал sRGB обратно в линейный свет, а затем взвешивает красный, зелёный и синий коэффициентами 0,2126, 0,7152 и 0,0722, как в телевизионном стандарте ITU-R BT.709, ведь глаз чувствительнее всего к зелёному. Коэффициент контраста равен большей яркости плюс 0,05, делённой на меньшую плюс 0,05. Эти 0,05 обозначают свет, отражённый экраном, и ограничивают шкалу от 1:1 до 21:1, чёрного на белом.
Не только текст
Крупный текст, не меньше 24 px или 18,66 px для жирного, остаётся читаемым при меньшем контрасте, поэтому для AA ему нужно лишь 3:1. В WCAG 2.1, опубликованных в июне 2018 года, появился критерий 1.4.11 Контраст нетекстовых элементов: рамки полей, индикаторы фокуса, значки и части диаграммы, нужные для её понимания, должны иметь контраст 3:1 с соседними цветами.
Дальтонизм и что дальше
Примерно у 1 из 12 мужчин и у 1 из 200 женщин есть нарушение цветового зрения, чаще всего красного и зелёного. Контраст измеряется по яркости, поэтому подходящая пара остаётся читаемой, но цвета, отличающиеся только оттенком, могут выглядеть одинаково. Симуляция здесь использует модель Машадо, Оливейры и Фернандеса 2009 года. В черновиках WCAG 3 изучается APCA, более новый метод, который учитывает ещё и размер шрифта, и то, тёмный ли текст на светлом фоне или светлый на тёмном.
Часто задаваемые вопросы
Достаточно ли хорошего контраста для доступности?
Нет. Это одно из многих требований. WCAG также требует, чтобы цвет не был единственным способом передать смысл, например нужно добавить значок или подчёркивание к ссылке или ошибке.
Показывает ли симуляция в точности то, что видит человек?
Это хорошее приближение полной дихромазии. У многих людей более лёгкая форма, и каждый видит немного по-своему, поэтому используйте её как ориентир.
Стоит ли использовать APCA вместо коэффициента WCAG 2?
Для соответствия требованиям сегодня используйте коэффициент WCAG 2. WCAG 2.2, опубликованные в октябре 2023 года, сохраняют ту же формулу, и на неё ссылаются законы и стандарты, например EN 301 549. APCA ещё в разработке.
Сопутствующие инструменты
Проверка цветового контраста
Бесплатная проверка контраста по WCAG: введите цвет текста и фона в HEX, RGB или HSL, узнайте коэффициент контраста с результатами AA и AAA, получите ближайший подходящий цвет и смоделируйте дальтонизм.
Генератор цветовых палитр
Создавайте, фиксируйте и перемешивайте палитры в браузере. Копируйте HEX, CSS-переменные или JSON, экспортируйте PNG или SVG и извлекайте цвета из фото.
Цветовое колесо
Выбирайте цвет на интерактивном колесе, создавайте дополнительные, аналогичные, триадные и другие палитры и копируйте HEX, RGB, HSL, HSV или CMYK.
Редактор градиента
Создавайте линейные и радиальные CSS-градиенты в браузере. Перетаскивайте цветовые точки, задавайте угол и копируйте CSS, HEX, RGB, HSL, HSV или CMYK.
цвете
Как цвет работает на экране и в печати: RGB, CMYK, HSL, hex, цветовой круг, градиенты, контраст и инструменты PictorX.
Готовы попробовать?
Откройте PictorX в своем браузере — установка не требуется, для запуска не требуется кредитная карта.
Открыть проверку контраста