Калькулятор контраста

Одно число от 1 до 21

Текст читается, когда он заметно светлее или темнее того, что за ним. Тон почти не важен. Чистый красный на чистом зеленом это два очень разных цвета почти одинаковой яркости, и буквы словно дрожат. Поэтому WCAG измеряет разницу в относительной яркости, то есть в количестве света, которое цвет посылает в глаз, по шкале от 0 (черный) до 1 (белый).

Чтобы ее вычислить, каждый из каналов, красный, зеленый и синий, переводится из хранимого значения в линейный свет, затем три канала взвешиваются по чувствительности глаза к каждому:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Зеленый дает больше 70% результата, синий около 7%. Вот почему чистый синий #0000ff ведет себя как темный цвет, а чистый желтый как светлый. Два одинаковых цвета дают 1:1. Черный на белом дает 21:1. Если поменять местами текст и фон, коэффициент не изменится.

Пороги и где они действуют

На уровень AA обычно ссылаются законы и правила закупок, в том числе европейский стандарт EN 301 549 и Section 508 в США. AAA это ориентир там, где люди читают подолгу. Логотипы, неактивные элементы управления и чисто декоративный текст исключены.

Удобный ориентир: серый #767676 дает 4,54:1 на белом и проходит AA. На шаг светлее, #777777 дает 4,47:1 и не проходит.

Как выбирается предложенный оттенок

Когда текст обычного размера не дотягивает до 4,5:1, калькулятор переводит цвет текста в тон, насыщенность и светлоту. Первые два он сохраняет, а светлоту сдвигает шагами по полпроцента, поочередно темнее и светлее, пока коэффициент с вашим фоном не достигнет 4,5. Первое попадание и есть ближайший проходящий оттенок, так что ваш синий остается вашим синим. Иногда ни одна светлота цвета текста не проходит, обычно на фоне средних тонов. Тогда он пробует так же подстроить фон. Выберите Применить, чтобы использовать предложение.

Фоны средних тонов это трудный случай. Средний серый вроде #808080 дает около 3,9:1 с белым и 5,3:1 с черным, так что на нем работает только очень темный текст. У фирменных оранжевых и ярких зеленых та же проблема с белым текстом. Придется затемнить фон или перейти на темный текст.

Как вводить и выносить цвета

Оба поля принимают все, что браузер понимает как цвет CSS: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) или имя вроде teal. Чтобы взять цвет с живой страницы, откройте инструменты разработчика, выделите текст и скопируйте вычисленные значения color и background-color.

Адрес страницы обновляется при каждом изменении, в виде ?fg=1d3557&bg=ffffff. Скопируйте его, чтобы отправить коллеге ту самую пару, о которой вы спорите. Чтобы за один раз проверить всю фирменную палитру, используйте сетку контраста палитры.

О чем коэффициент не говорит

• Прозрачность. Любое значение альфа-канала игнорируется. Для полупрозрачного текста измеряйте смешанный цвет, который в итоге показывает экран.
• Изображения и градиенты. На фоновом фото много цветов. Проверьте самую светлую и самую темную область за текстом или подложите под него сплошную плашку.
• Начертание и размер ниже порогов. Тонкий шрифт 12 px при 4,6:1 проходит на бумаге, но читается все равно с трудом.
• Темные темы. Известно, что формула WCAG 2 переоценивает некоторые темные пары. Если светлый текст на темном фоне едва проходит, посмотрите на него и своими глазами, например в симуляторе зрения.