Контраст и размер текста на экране ноутбука: как проверить

Контраст и размер текста на экране ноутбука: как проверить

Плохо читаемый слайд — не эстетическая мелочь. Студент отвлекается, всматривается и теряет нить. Чаще всего проблема не в шрифте, а в контрасте и размере.

Ниже — нормы, по которым можно проверить материал за несколько минут.

Нормы контраста

По WCAG 2.2, уровень AA:

Крупным считается текст от 18 pt обычного начертания или от 14 pt полужирного (W3C WAI).

Уровень AAA поднимает планку до 7:1 для обычного текста и 4,5:1 для крупного.

Что это значит на практике

• Чёрный текст на белом — около 21:1, это максимум.
• Серый на белом может давать 2–3:1 и не проходить.
• Жёлтый на белом — почти всегда провал.
• Белый на насыщенном синем часто проходит, на светло-голубом — нет.
• Тонкий шрифт визуально «слабее» при том же контрасте.

Проверить пару цветов можно в контраст-чекере (WebAIM).

Размер текста

Единого «правильного» кегля нет, но есть практические ориентиры:

• основной текст презентации — от 24 pt;
• заголовки — от 32 pt;
• подписи к схемам — от 18 pt;
• сноски — не мельче 14 pt.

Для документа на экране: 12–14 pt минимум, комфортно — 16–18 px в вебе (MDN).

Проверка слайда

1. Отойдите от ноутбука на 2–3 метра.
2. Посмотрите на слайд как на плакат.
3. Закройте один глаз — так проще заметить слабые места.
4. Сфотографируйте экран телефоном.
5. Посмотрите фото на маленьком экране.
6. Проверьте в затемнённой аудитории.

Если текст читается на фото с телефона, его прочитают и в зале.

Типичные ошибки

• светлый текст на светлом фоне;
• текст поверх фотографии без подложки;
• тонкие линии на проекторе;
• красный и зелёный в одном графике;
• мелкие подписи на осях;
• перегруженные слайды.

Цвет и дальтонизм

Красный и зелёный различают не все. Поэтому:

• дублируйте цвет подписью или штриховкой;
• используйте разные формы маркеров;
• подписывайте линии на графике;
• не полагайтесь только на оттенок.

Проверка PDF и веб-страниц

• В PDF текст должен быть текстом, а не картинкой.
• Масштабирование до 200 % не должно ломать вёрстку.
• Строки не должны быть слишком длинными.
• Межстрочный интервал — не меньше 1,5 для длинного текста.

Эти требования близки к критериям 1.4.4 и 1.4.12 в WCAG (W3C WAI).

Проектор и ноутбук

Один и тот же слайд выглядит по-разному:

• проектор теряет контраст;
• IPS-экран ноутбука ярче и точнее;
• OLED даёт глубокий чёрный, но бликует;
• при ярком свете в аудитории контраст падает.

Проверяйте материал на том оборудовании, с которым будете работать. Подробнее о типах матриц — в статье сравнение IPS и OLED.

Проверка в реальной аудитории

Лабораторные проверки не учитывают проектор, свет и расстояние.

• Придите в аудиторию заранее.
• Включите тот же проектор.
• Посмотрите на слайд с последнего ряда.
• Проверьте при включённом свете и в полумраке.
• Оцените блики на экране.
• Спросите коллег, что читается хуже всего.

Один и тот же файл в разных аудиториях выглядит по-разному.

Контраст в графиках

• Линии должны различаться толщиной или штрихом.
• Подписи — не мельче основного текста.
• Сетка — светлая, но заметная.
• Не используйте радужные шкалы без легенды.
• Дублируйте цвет подписью.

Как быстро исправить слайды

1. Замените светло-серый текст на тёмный.
2. Уберите текст поверх фотографий или добавьте подложку.
3. Увеличьте кегль подписей.
4. Сократите текст до тезисов.
5. Разбейте перегруженный слайд на два.
6. Проверьте результат на телефоне.

Если брендбук мешает

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

Свет и экран

Контраст зависит не только от цветов файла.

• Глянцевый экран ноутбука бликует сильнее матового.
• При дневном свете из окна тёмный фон выцветает.
• Проектор теряет детали в светлых участках.
• Дешёвые экраны завышают насыщенность.

Проверяйте материал там, где будете его показывать.

Текст на изображениях

• Не встраивайте важный текст в картинку.
• Дублируйте подписи в описании.
• Проверяйте читаемость при масштабировании.
• Избегайте текста на фотографиях.

Если изображение отключат, смысл должен сохраниться.

Таблицы и подписи

• Заголовки таблиц — полужирным.
• Линии — не тоньше одного пикселя.
• Числа выравнивайте по правому краю.
• Единицы указывайте в заголовке.
• Сноски — крупнее минимального кегля.

Минимум для проверки

1. Контраст текста.
2. Размер основного текста.
3. Читаемость на проекторе.
4. Различимость цветов.
5. Отсутствие текста на фото.

Этих пяти пунктов достаточно для большинства слайдов.

Чек-лист

1. Контраст основного текста не ниже 4,5:1.
2. Заголовки крупнее основного текста.
3. Нет текста на пёстром фоне.
4. Цвет дублируется формой или подписью.
5. Слайд читается с расстояния.
6. PDF масштабируется без потерь.
7. Проверено на проекторе.

Частые вопросы

Достаточно ли контраста 4,5:1?

Это минимум уровня AA. Для аудиторных слайдов лучше ориентироваться на 7:1.

Можно ли использовать фирменные цвета?

Да, если они проходят проверку. Иначе подберите более тёмный или светлый оттенок.

Нужен ли специальный шрифт?

Нет. Важнее размер, интервалы и контраст.

Как быстро проверить всю презентацию?

Сделайте скриншоты слайдов и просмотрите их на телефоне — ошибки станут заметны.