Как проверить контраст текста и фона без онлайн-сервисов и специальных инструментов

Чтобы проверить контрастность текста и фона, возьмите фактические цвета отображаемого текста и области непосредственно за ним, переведите их RGB-значения в относительную яркость и разделите яркость более светлого цвета на яркость более тёмного. Результат сравните с порогом WCAG для размера текста. Для прозрачных элементов и сложного фона проверяйте итоговое сочетание в каждом состоянии интерфейса.

Ориентиры для быстрой оценки контрастности

• Для обычного текста ориентир WCAG AA - не менее 4,5:1, для крупного - не менее 3:1.
• Крупным считается текст размером от 18 pt либо от 14 pt при полужирном начертании.
• Коэффициент 21:1 - максимальный: он получается у чёрного текста на белом фоне.
• Считайте контраст для реальных цветов после применения прозрачности, эффектов и состояний элемента.
• Проверка контрастности онлайн удобна для быстрой оценки, но результат зависит от того, какие цвета и состояния вы ей передали.

Какие цвета текста и фона брать для расчёта

Этот способ подходит, если известны цвета текста и подложки: например, значения в CSS, макете или палитре интерфейса. Он помогает проверить контрастность текста и фона до публикации и при проверке уже готового сайта.

Не оценивайте цвет по названию вроде "светло-серый" и не подставляйте цвет всей страницы, если текст расположен на отдельной карточке. Если цвет зависит от изображения, градиента или прозрачного слоя, одного фиксированного значения фона недостаточно: проверяйте контраст в разных местах и состояниях.

Как перевести RGB-значения в относительную яркость

Для ручного расчёта нужны RGB-компоненты текста и фона в пространстве sRGB - например, значения из CSS в формате hex или rgb(). Доступ к специальному сервису не требуется: достаточно калькулятора, который умеет возводить числа в степень.

Сначала каждую компоненту RGB разделите на 255. Затем переведите полученное значение в линейный вид:

• если значение не больше 0,04045, разделите его на 12,92;
• если оно больше 0,04045, вычислите ((значение + 0,055) / 1,055)^2,4.

Относительная яркость цвета равна сумме линейных компонент, умноженных на коэффициенты: R - 0,2126, G - 0,7152, B - 0,0722.

Как рассчитать коэффициент контрастности вручную

1. Запишите фактические цвета. Возьмите RGB текста и фона, которые действительно отображаются. Если цвет задан через прозрачность, сначала определите итоговый цвет после наложения на подложку.
2. Нормализуйте компоненты. Для каждого канала R, G и B разделите значение от 0 до 255 на 255.
3. Линеаризуйте каналы. Для каждой нормализованной компоненты примените правило sRGB: значение до 0,04045 разделите на 12,92, а большее преобразуйте по формуле ((x + 0,055) / 1,055)^2,4.
4. Рассчитайте яркость каждого цвета. Умножьте линейные R, G и B соответственно на 0,2126, 0,7152 и 0,0722, затем сложите результаты.
5. Получите отношение яркостей. Подставьте яркости в формулу (L_{светлый} + 0,05) / (L_тёмный + 0,05). В числителе должна быть большая яркость.
6. Сравните с нужным порогом. Определите категорию текста и проверьте, достигает ли коэффициент соответствующего уровня WCAG.

Пример: для белого цвета #FFFFFF относительная яркость равна 1, а для чёрного #000000 - 0. Коэффициент контрастности равен (1 + 0,05) / (0 + 0,05) = 21:1.

Быстрый режим

1. Найдите точные RGB-цвета текста и его подложки.
2. Вычислите относительную яркость обоих цветов по формуле sRGB.
3. Разделите яркость светлого цвета с добавлением 0,05 на яркость тёмного с добавлением 0,05.
4. Сверьте результат с порогом для размера и начертания текста.

Какие пороги WCAG применяются к разным размерам текста

• Обычный текст: для уровня WCAG AA требуется контраст не ниже 4,5:1.
• Крупный текст: для уровня AA требуется не ниже 3:1.
• Для крупного текста применяют критерии от 18 pt для обычного начертания или от 14 pt для полужирного.
• Для уровня AAA порог составляет 7:1 для обычного текста и 4,5:1 для крупного.
• Учитывайте размер в пунктах (pt), а не только числовое значение в пикселях: единицы измерения различаются.
• Не переносите пороги для текста автоматически на иконки и границы компонентов: для значимых нетекстовых элементов действуют отдельные критерии контраста.

Почему прозрачность, градиенты и состояния элемента меняют результат

• Прозрачность текста или фона. Значение цвета в CSS не всегда совпадает с итоговым цветом на экране. Сначала учитывайте цвет подложки и альфа-канал.
• Градиент или изображение за текстом. Яркость фона меняется по площади, поэтому проверяйте участки непосредственно под буквами, включая самые неблагоприятные сочетания.
• Наложенные эффекты. Тень, фильтр или полупрозрачный слой может изменить воспринимаемое сочетание; проверяйте итоговый отрисованный вариант.
• Состояния элемента. Для ссылок и кнопок оценивайте обычное, наведённое, активное и фокусное состояния, если в них меняются цвета.
• Цвет текста по умолчанию. Не предполагайте, что браузер или пользовательская тема всегда добавит ожидаемый фон: проверяйте сочетание в фактическом интерфейсе.
• Округление результата. Не округляйте промежуточные значения до сравнения с порогом - так можно ошибочно признать сочетание соответствующим требованиям.

Как проверить контраст в макете и на реальном экране

1. Рассчитать вручную. Подходит, когда известны точные RGB-значения и фон однородный. Это способ проверить формулу и понять, откуда берётся результат.
2. Использовать проверку контрастности онлайн. Введите цвета текста и фона, затем проверьте заявленный уровень и категорию текста. Такой инструмент ускоряет проверку контрастности цветов, но не заменяет проверку прозрачности и сложных фонов.
3. Проверить макет или собранный интерфейс. Посмотрите на текст в контексте компонентов, включая состояния. Так проще обнаружить локальные изменения фона, эффекты и комбинации цветов.
4. Проверить опубликованную страницу. Чтобы проверить контрастность сайта, пройдите по ключевым страницам и состояниям, особенно там, где текст лежит поверх изображения или цветной подложки. Для контрастности текста для сайта важен результат в реальной композиции, а не только значения из палитры.

Нюансы расчёта контраста, которые важно прояснить

Что означает коэффициент 4,5:1?

Это минимальный порог WCAG AA для обычного текста. Для крупного текста уровень AA допускает порог 3:1.

Можно ли сравнить RGB-значения без перевода в яркость?

Нет, простое сравнение чисел RGB не даёт корректного коэффициента контрастности WCAG. Каналы сначала нужно преобразовать из sRGB в линейные значения, а затем вычислить относительную яркость.

Как учитывать прозрачный фон?

Сначала определите итоговый цвет после наложения на фон. Если подложка меняется, например из-за изображения или градиента, проверяйте несколько участков и выбирайте проблемное сочетание.

Какой размер считать крупным текстом?

Критерии WCAG относят к крупному обычный текст от 18 pt и полужирный от 14 pt. При этом важно учитывать реальные единицы и начертание, а не ориентироваться только на визуальное впечатление.

Достаточно ли проверить только обычное состояние ссылки или кнопки?

Нет, проверьте состояния, в которых меняются цвет текста или подложки, например при наведении, активации или фокусе. Для нетекстовых частей компонента могут применяться отдельные требования.

Подходит ли ручной расчёт для текста поверх фотографии?

Только если вы проверяете итоговый цвет фона под конкретными буквами и учитываете все наложения. Для неоднородного изображения проверяйте несколько участков, поскольку один расчёт не описывает всю область.

Автор: Виктор Егоров