Чтобы выбрать контраст текста и фона, сначала определите размер и начертание текста, затем проверьте цветовую пару по критериям WCAG и протестируйте её в реальном интерфейсе. Для обычного текста ориентир уровня AA - не менее 4,5:1, для крупного - 3:1. Автоматическая проверка не заменяет оценку читаемости и проверку состояний интерфейса.
Ориентиры для безопасного контраста
- Проверяйте фактические цвета текста и фона, включая полупрозрачность и состояния наведения.
- Для основного текста используйте порог WCAG AA 4,5:1; крупный текст проверяйте по порогу 3:1.
- Не считайте жирное начертание достаточным основанием для снижения порога: учитывайте и размер.
- Проверяйте интерфейс не только в макете, но и в браузере, на разных экранах и при увеличении.
- Не передавайте смысл только цветом: добавляйте подписи, иконки, подчёркивания или другие визуальные признаки.
Как соотнести контраст с размером и начертанием текста
Эта инструкция подходит дизайнерам, разработчикам и редакторам интерфейсов, которые выбирают цвета для сайта или приложения. Она полезна при создании палитры и проверке готового макета. Не ограничивайтесь одним числом, если текст тонкий, расположен на изображении, перекрывается эффектами или должен читаться в условиях, которые автоматический тест не воспроизводит.
В WCAG крупным считается текст размером не менее 18 пунктов в обычном начертании или не менее 14 пунктов в полужирном. В CSS это приблизительно 24 пикселя и 18,66 пикселя соответственно. Если размер или начертание не соответствуют этим условиям, применяйте порог для обычного текста.
Пороговые значения WCAG: где проходят границы читаемости
Для проверки понадобятся значения цвета текста и фона в форматах вроде HEX или RGB, размер шрифта, его начертание и инструмент расчёта коэффициента контрастности. Доступ к исходному коду полезен, если цвета задаются прозрачностью, градиентом или переменными темы. Порог WCAG - критерий соответствия, а не гарантия одинакового удобства для каждого читателя.
| Текст и критерий | Порог контрастности | Как трактовать результат |
|---|---|---|
| Обычный текст, WCAG AA | Не менее 4,5:1 | Соответствует критерию, если проверена фактическая цветовая пара. |
| Крупный текст, WCAG AA | Не менее 3:1 | Порог применим только при достаточном размере и нужном начертании. |
| Обычный текст, WCAG AAA | Не менее 7:1 | Более строгий критерий для обычного текста. |
| Крупный текст, WCAG AAA | Не менее 4,5:1 | Проверяйте размер и начертание так же, как для AA. |
Порог для текста не следует автоматически применять к любой графике: для значимых элементов управления и графических объектов WCAG предусматривает отдельные критерии. Уточняйте, какое именно требование относится к проверяемому элементу.
Почему цветовая пара может подвести в реальном интерфейсе
Одинаковые значения цветов в палитре не всегда означают одинаковую читаемость во всех состояниях. Перед проверкой учитывайте сочетание текста с фоном, размер и начертание, прозрачность, изображения и пользовательские настройки.
Риски и ограничения перед проверкой:
- Полупрозрачный текст или слой меняет итоговый цвет в зависимости от фона.
- Текст поверх фотографии может иметь разный контраст на соседних участках.
- Скриншот или макет не всегда отражает итоговые CSS-цвета и состояния компонента.
- Прохождение числового порога не гарантирует комфортного чтения мелкого или тонкого шрифта.
- Определите проверяемый элемент. Выберите конкретную надпись и фон, на котором она отображается. Если фон меняется, проверяйте каждый вариант, с которым текст может сочетаться.
- Уточните размер и начертание. Сравните их с определением крупного текста WCAG. Если критерии крупного текста не выполнены, используйте порог для обычного.
- Получите фактические цвета. Возьмите значения из дизайн-системы или браузерных инструментов разработчика. Для прозрачных слоёв и градиентов проверяйте итоговый цвет в точке, где расположен текст.
- Рассчитайте отношение контрастности. Введите цвета переднего плана и фона в проверку контрастности цветов онлайн. Сопоставьте результат с подходящим порогом WCAG, а не только с общей отметкой инструмента.
- Проверьте состояния и сценарии. Повторите тест для ссылок, ошибок, фокуса клавиатуры, наведения и отключённых элементов, если в них меняются цвета. Затем оцените читаемость при увеличении и на реальном экране.
Проверка контраста онлайн: сравнение инструментов и их ограничений
Чтобы проверить контраст текста онлайн, можно использовать отдельные калькуляторы или средства проверки в браузере и редакторе макетов. Выбирайте способ по задаче: калькулятор удобен для пары цветов, а проверка страницы помогает находить проблемы в контексте компонентов. Ни один инструмент сам по себе не оценивает все пользовательские сценарии.
| Подход | Что помогает проверить | Ограничение |
|---|---|---|
| Онлайн-калькулятор контраста | Коэффициент для заданных цветов и соответствие выбранному порогу. | Нужно самостоятельно указать правильные цвета, размер и начертание; сложный фон требует отдельной проверки. |
| Плагин или панель проверки в редакторе макетов | Пары цветов в элементах макета и быстрый подбор альтернатив. | Макет может отличаться от реализации, особенно при прозрачности, изображениях и динамических состояниях. |
| Средства разработчика браузера | Фактические стили и цвета отображённого элемента на странице. | Не заменяют проверку всего сайта и ручную оценку читаемости. |
| Автоматический аудит страницы | Поиск ряда проблем доступности на реальном интерфейсе. | Не находит каждый визуальный дефект и может требовать ручной проверки результатов. |
К инструментам для проверки доступности сайта относятся автоматические аудиторы страниц и браузерные расширения. Для проверки отдельных сочетаний цветов удобнее начать с калькулятора контраста, а затем подтвердить результат в браузере. Если готовите подбор цветовой палитры для сайта, тестируйте не только основной текст, но и ссылки, подписи, кнопки и состояния ошибок.
Проверьте результат по списку:
- Выбрана правильная пара: цвет текста и фактический цвет фона.
- Указаны непрозрачные итоговые цвета, а не только исходные значения полупрозрачного слоя.
- Порог выбран с учётом размера и начертания текста.
- Проверены все фоны, на которых появляется надпись.
- Проверены ссылки, фокус, наведение, ошибки и другие значимые состояния.
- Текст остаётся различимым при увеличении и на небольшом экране.
- Цвет не является единственным способом передать состояние или смысл.
Как исправить слабый контраст, не нарушив палитру бренда
Если сочетание не достигает нужного порога, меняйте сначала один цвет и повторно проверяйте результат. Частые ошибки при исправлении:
- Менять сразу несколько цветов, из-за чего сложно понять, какое изменение помогло.
- Считать, что жирное начертание компенсирует недостаточный контраст обычного текста.
- Оценивать цвета только на белом фоне, хотя в интерфейсе используется другой фон.
- Добавлять тень или обводку, не проверив читаемость самого текста и итоговый контраст.
- Заменять цвет текста на корпоративный акцентный без проверки на всех используемых фонах.
- Использовать оттенок только для обозначения ошибки, успеха или активного состояния.
- Проверять один экран и забывать о всплывающих окнах, карточках и мобильной версии.
Чтобы сохранить характер бренда, можно подобрать более тёмный или светлый оттенок того же цвета, изменить фон под текстом или добавить непрозрачную подложку. После изменения повторите расчёт для всех затронутых сочетаний. Если палитра не позволяет достичь нужного порога, предусмотрите отдельные доступные цвета для текста и интерактивных элементов.
Контроль в макете, браузере и режимах повышенной контрастности
Выберите способ проверки по стадии работы и типу интерфейса:
- Проверка в редакторе макетов. Уместна при создании палитры и компонентов; после неё всё равно сверьте значения с реализацией.
- Проверка в браузере. Подходит для готовой страницы: проверяйте вычисленные стили, изображения, состояния и адаптивные варианты.
- Автоматический аудит. Используйте для первичного поиска проблем на странице, затем вручную перепроверьте найденные элементы и неоднозначные случаи.
- Проверка пользовательских настроек. Проверьте интерфейс при увеличении и в режиме повышенной контрастности, если он доступен в целевой операционной системе или браузере.
Итоговый контроль должен охватывать и отдельные пары цветов, и страницу целиком. Для повторяющихся элементов зафиксируйте проверенные значения в дизайн-системе, чтобы новые компоненты не возвращали слабый контраст.
Разбор спорных случаев: контраст в интерфейсах
Можно ли использовать порог 3:1 для любого полужирного текста?
Нет. Для крупного текста нужны и установленный размер, и соответствующее начертание. Если одно из условий не выполнено, применяйте порог для обычного текста.
Достаточно ли онлайн-калькулятора для проверки сайта?
Нет. Калькулятор оценивает заданную пару цветов, но не обязательно учитывает все состояния, фоновые изображения, прозрачность и структуру страницы.
Как проверять текст поверх фотографии?
Проверяйте участки фона непосредственно за текстом и учитывайте, что контраст может меняться по площади надписи. Если результат нестабилен, используйте подложку или другое решение, обеспечивающее контраст на всём участке текста.
Нужно ли проверять цвет текста при наведении и фокусе?
Да, если в этих состояниях меняются текст, фон или оформление ссылки. Проверяйте каждую значимую цветовую комбинацию, а фокус клавиатуры оценивайте также как отдельный визуальный признак.
Что делать, если брендовый цвет не проходит проверку?
Подберите более светлый или тёмный оттенок, измените фон либо добавьте подложку. Сохраните исходный цвет для декоративных задач, если его сочетание с текстом не соответствует нужному порогу.
Можно ли полагаться на автоматический аудит доступности?
Используйте его как первичную диагностику, а не как окончательное подтверждение доступности. Автоматическую проверку дополняйте ручным тестированием текста, состояний и пользовательских настроек.