Контрастность: почему слайд читается у вас и не читается в зале
Вы доделали презентацию ночью, на ноутбуке всё читалось. Утром проектор показал бледное пятно: заголовки на месте, мелкий серый текст растворился. Проектор не виноват. Виновата контрастность, разница в светлоте между текстом и фоном. У неё есть число, и это удобно: пару цветов можно проверить заранее, а не на глазах у зала.
Число рядом со слайдом и есть коэффициент контрастности. Что оно значит, разберём ниже.
Что такое контрастность текста и фона
Контрастность показывает, насколько текст отличается от фона по светлоте. Не по красоте и не по настроению, только по светлоте. Её меряют коэффициентом: от 1:1, когда текст сливается с фоном, до 21:1, чёрный на белом. Стандарт доступности WCAG считает обычный текст читаемым от 4,5:1. Для презентаций это не ГОСТ, а удобный ориентир: ниже порога зрители начинают щуриться.
Подберите пару цветов и следите за числом
Отметка AA значит, что текст прочитают с любого ряда. AAA значит запас прочности.
AA и AAA обозначают уровни стандарта WCAG: достаточный и с запасом. Ещё сервисы подбора цветовых пар есть в базе ресурсов, в разделе «Подбор цвета».
Число вместо спора о вкусе
Пока контраст обсуждают словами «бледновато» и «нормально же видно», побеждает тот, кто громче. Число заканчивает спор за секунду: 2,9:1, переделываем. Работает и в обратную сторону: вас просят сделать текст «посветлее, поизящнее», вы показываете, что изящный серый упал ниже 4,5:1, и слайд остаётся читаемым.
Второй выигрыш: слайд перестаёт зависеть от расстояния. С дальнего ряда он выглядит примерно как в расфокусе. Прищурьтесь на макет: что выжило, то и увидит зал.
Расфокус здесь имитирует дальний ряд, а не моделирует зрение точно. Пропорция честная: слабый контраст сдаётся первым.
Пара работает, только если работает в чёрно-белом
Глаз читает буквы по разнице светлоты, оттенок почти не помогает. Красный текст на зелёном фоне выглядит смело, а по светлоте эти цвета близнецы: переведите слайд в чёрно-белый, и текст исчезнет. Заодно вспомните про дальтоников: красно-зелёную разницу не различает каждый двенадцатый мужчина в зале.
Проверка занимает секунду: скриншот слайда, чёрно-белый фильтр. Структура выжила, значит пара рабочая.
Чем мельче текст, тем выше нужен контраст
Крупные толстые буквы заголовка глаз собирает даже из слабого контраста, мелкому кеглю нужна помощь. Поэтому в стандарте два порога: обычному тексту 4,5:1, крупному хватает 3:1. Практический вывод: подпись под графиком требует более контрастной пары, чем заголовок над ним. Обычно делают наоборот: заголовок чёрный, а подписи светло-серые. Каждый второй макет, который приносят на разбор в школе, приходит именно с такими подписями.
Одна и та же пара цветов, разный кегль
Пара фиксирована: серый на белом, 3,5:1. Меняйте только размер.
Крупный текст в стандарте: от 24 px обычного начертания (18 типографских пунктов) или от 18,5 px жирного.
Проектор съест половину контраста, закладывайте запас
Монитор светит сам, а проектор отражает свет от стены в освещённой комнате. Чёрный у проектора на самом деле серый, белый превращается в цвет стены. Пара, которая на мониторе давала честные 4,5:1, в зале превращается примерно в 2:1, и задние ряды достают телефоны. Если слайды покажут через проектор, цельтесь не в минимум, а в запас: от 7:1. Чёрный текст на белом фоне скучен ровно до первого выступления в солнечной переговорке.
Имитация: реальный проектор зависит от лампы и света в зале. Направление честное: контраст падает в разы.
Где контрастность ломается чаще всего
- Светло-серый текст на белом: модный приём из интерфейсов, примерно 3:1 вместо нужных 4,5:1
- Белый текст прямо на фотографии: читается на тёмных участках, исчезает на светлых
- Акцент на цветном фоне: красная плашка на синем, оба цвета спорят за внимание
- Текст на градиенте: слева читается, справа уже нет
Где контраст провален?
Нажмите на макет, в котором пара цветов не дотягивает до порога.
Почините слайд
Перед вами слайд с тремя провалами: заголовок, текст и подпись не дотягивают до порога. Подберите каждому элементу цвет так, чтобы все три индикатора стали зелёными. Фон менять нельзя, как это обычно и бывает: фирменный цвет компании не обсуждается.
Готово: все элементы прошли порог 4,5:1. Такой слайд переживёт и проектор.
Порог здесь один, 4,5:1: заголовок на этом слайде мельче 24 px, льгота крупного текста на него не действует.
Три правила контрастности
Контрастность отвечает за то, чтобы слайд вообще прочитали. За то, куда зритель посмотрит первым, отвечают цветовые акценты, а связи между элементами задаёт закон близости.
4,5:1 или переделывать
Обычному тексту от 4,5:1, крупному от 3:1. Судья в споре: число, а не глаз.
Чёрно-белый тест
Пара обязана работать без цвета. Слились в сером: это не пара.
Запас для проектора
В зале контраст падает вдвое. Для выступлений цельтесь в 7:1.
Чек-лист самопроверки слайда
Отметьте то, что выполнено на вашем слайде.
Одно правило в неделю
Подпишитесь на рассылку: каждую неделю присылаем разбор одного правила дизайна и материалы, которые можно применить сразу.
Те же разборы выходят в телеграм-канале школы. Другие термины разобраны в Учебнике.