Контраст цвета в соцсетях: правила WCAG на практике

Тексту на посте в соцсетях нужен коэффициент контраста с фоном не менее 4.5:1, а если текст крупный, то 3:1. Это числа из WCAG 1.4.3, и W3C формулирует их так: 4.5:1 для обычного текста и 3:1 для текста от 18 пунктов или от 14 пунктов жирным. WCAG написан для веб-контента, поэтому применять его к тексту внутри графики для Instagram или LinkedIn мы рекомендуем сами, это не правило платформ.

Ниже: формула, что требует каждый уровень WCAG, и измеренные коэффициенты на реальных рендерах нашего демо-бренда AURORA. О системе в целом читайте в нашем руководстве по брендбуку для небольших команд.

Применяется ли WCAG к картинкам в соцсетях?

Напрямую нет. WCAG охватывает веб-контент, а пост в ленте это изображение внутри чужого приложения. Но два критерия всё же делают его разумным ориентиром. Критерий 1.4.3 прямо приравнивает «изображения с текстом» к тексту, поэтому заголовок, запечённый в PNG, подчиняется тем же коэффициентам, что и живой текст. А 1.4.5 Images of Text (уровень AA) предпочитает настоящий текст картинке с текстом, кроме случаев, когда подача существенна или изображение настраивается, и стандартный пример здесь логотипы.

По нашему опыту, соцсети редко позволяют разместить живой текст поверх картинки, поэтому 1.4.5 это честная оговорка: графика с текстом всегда компромисс. Мы рекомендуем держать текст коротким, повторять главную мысль в подписи, писать альтернативный текст и всё равно добиваться, чтобы пиксели соответствовали 1.4.3.

Какой коэффициент контраста нужен на каждом уровне?

Критерий	Уровень	Обычный текст	Крупный текст	Где применяется
1.4.3 Contrast (Minimum)	AA	4.5:1	3:1	Текст и изображения с текстом
1.4.6 Contrast (Enhanced)	AAA	7:1	4.5:1	Текст и изображения с текстом
1.4.11 Non-text Contrast	AA	3:1	3:1	Элементы интерфейса и графика, нужные для понимания содержимого

На практике важны три детали:

• Без округления. W3C говорит, что вычисленные значения не округляются, поэтому 4.499:1 не проходит порог 4.5:1.
• Исключения. Логотипы, чисто декоративный текст, неактивные элементы управления и случайный текст на фотографиях с другим визуальным содержимым не проверяются.
• Графика. Иконке, линии графика или контуру кнопки, которые несут смысл, по критерию 1.4.11 нужно 3:1 относительно соседнего цвета, а текст внутри графики оценивается по 1.4.3.

Крупный текст определяется в пунктах, а у PNG пунктов нет. Наше рабочее допущение для графики 1080 px: считайте крупным заголовок, который явно крупный на экране телефона, а всё остальное, особенно мелкие надписи над заголовком и подвалы, обычным текстом, которому нужно 4.5:1.

Как рассчитывается коэффициент контраста?

Формула взята из определений WCAG. Переведите каждый 8-битный канал в диапазон от 0 до 1, линеаризуйте его (разделите на 12.92, если значение не больше 0.04045, иначе возведите (значение + 0.055) / 1.055 в степень 2.4), затем взвесьте: относительная яркость L = 0.2126 R + 0.7152 G + 0.0722 B. Коэффициент равен (L1 + 0.05) / (L2 + 0.05), где L1 это более светлый цвет. Чистый белый на чистом чёрном даёт 21:1, это максимум.

Основной вес у зелёного канала, поэтому ярко-зелёный и жёлтый выглядят светлыми, а насыщенный зелёный может казаться хлёстким и всё же не проходить на белом. WebAIM говорит о том же: контраст определяется разницей яркости, а не разницей оттенков.

Что показывают замеры удачных рендеров?

Мы отрендерили четыре шаблона демо-бренда AURORA в исходном размере, затем посчитали коэффициенты по формуле выше: по значениям палитры бренда и по пикселям, снятым с PNG.

Почти чёрный #0A0A0A на тёплом белом #FAFAF7 даёт 18.93:1. Маленькая серая надпись в подвале набрана цветом #6F6F6F, и снятые с неё пиксели дали 4.81:1 относительно фона. Это проходит 4.5:1 с небольшим запасом, а текст мелкий, поэтому именно за этим элементом мы бы следили на этом посте.

Здесь почти чёрный цвет сочетается с двумя разными светлыми заливками. Заголовок, маленькая надпись PASS и тёпло-белый текст плашки на чёрном дают в снятых пикселях 18.93:1. Маленький логотип AURORA стоит на зелёном блоке, и почти чёрный на зелёном #00D084 даёт 9.76:1. Зелёный хорошо работает как заливка под тёмный текст и плохо как цвет самого текста; обратная пара, зелёный на почти чёрном, даёт те же 9.76:1 в силу симметрии формулы.

У текста поверх градиента нет единого коэффициента, поэтому измеряйте самое слабое место. WebAIM отмечает, что WCAG не даёт метода для градиентов, и советует проверять участок с наименьшим контрастом. Заголовок здесь стоит на матовой карточке; мы сняли все пиксели фона под ним, и наименьший коэффициент оказался примерно от 15 до 17, а маленькая надпись над заголовком, лежащая на более зелёном пятне, была у нижней границы этого диапазона.

Прозрачность тоже снижает контраст. В этом шаблоне основной текст набран с непрозрачностью 75%; смешанный цвет текста дал против персикового фона больше 7:1, то есть с большим запасом выше 4.5:1.

Текст	Фон	Коэффициент	4.5:1	3:1
Почти чёрный #0A0A0A	Тёплый белый #FAFAF7	18.93	Проходит	Проходит
Приглушённый серый #6F6F6F	Тёплый белый #FAFAF7	4.81	Проходит	Проходит
Почти чёрный #0A0A0A	Зелёный #00D084	9.76	Проходит	Проходит
Зелёный #00D084	Почти чёрный #0A0A0A	9.76	Проходит	Проходит
Заголовок и надпись над ним на градиентной карточке (наименьшее значение)	Матовый градиент	около 15 до 17	Проходит	Проходит
Основной текст с непрозрачностью 75%	Градиент от персикового к розовому	выше 7	Проходит	Проходит

Какие сочетания в нашей палитре не проходят?

Все четыре рендера проходят, потому что цвета шаблонов привязаны к палитре, которую проверили один раз, а не каждый раз, когда кто-то пишет пост. Непроходящий пост мы не рендерили: движок просто не даёт участнику выбрать плохой цвет, в этом и смысл. Но в той же палитре есть пары, которые не прошли бы, если бы их использовали; считаем по той же формуле:

Текст	Фон	Коэффициент	4.5:1	3:1
Белый #FFFFFF	Зелёный #00D084	2.03	Не проходит	Не проходит
Тёплый белый #FAFAF7	Зелёный #00D084	1.94	Не проходит	Не проходит
Зелёный #00D084	Тёплый белый #FAFAF7	1.94	Не проходит	Не проходит
Оранжевый #FF6B35	Тёплый белый #FAFAF7	2.71	Не проходит	Не проходит
Приглушённый серый #6F6F6F	Розовый #FFB3D1	3.02	Не проходит	Проходит

Строка с белым на зелёном это частая ловушка. Белый текст на ярком фирменном зелёном хорошо смотрится на качественном мониторе, а по контрасту не добирает больше чем вдвое. Яркие акцентные цвета лучше использовать как заливки под тёмный текст, как в рендере с зелёным блоком выше.

Как проверить контраст на собственной графике?

1. Выпишите каждую пару «текст и фон» в шаблоне, включая надписи, подвалы и текст кнопок.
2. Посчитайте каждый коэффициент по формуле выше или в любом калькуляторе контраста WCAG, используя точные hex-значения, а не скриншоты сжатых картинок.
3. Для обычного текста держите планку 4.5:1. Допускайте 3:1 только для текста, который явно крупный на телефоне.
4. Для текста поверх градиентов и фотографий измеряйте самую слабую точку под текстом или поставьте под него сплошную или полупрозрачную подложку.
5. Учитывайте прозрачность: цвет текста с непрозрачностью 60% это уже другой цвет.
6. Не полагайтесь только на цвет как носитель смысла, например красный и зелёный для «плохо» и «хорошо» (WCAG 1.4.1 Use of Color).
7. Проверяйте заново при смене палитры бренда, а не при написании каждого поста.

Какой текст считается крупным, определяет типографика, поэтому дальше прочитайте наше руководство по типографике для постов в соцсетях, а о размещении текста поверх пёстрых участков читайте в статье о принципах компоновки графики для соцсетей. Если хотите, чтобы проверка была встроена в рабочий процесс: в Chikaboom цвета шаблонов заблокированы, и участники заполняют текст, не меняя их; попробовать можно в живом демо.