Контраст текста проверяют для конкретной пары цветов текста и фона, включая состояния кнопок и ссылки. WCAG 2.2 для обычного текста уровня AA указывает минимум 4,5:1, для крупного - 3:1 с предусмотренными критериями крупного текста и исключениями. Проверка палитры не заменяет проверку каждого фактического состояния.
Для кого и когда полезен этот разбор
Начинающему дизайнеру, маркетологу и заказчику макета, которому нужны понятные критерии подготовки и приёмки.
Задача материала - контраст текста и фона. Здесь есть порядок действий, условный пример и критерии проверки. Используйте их как основу для учебной работы или обсуждения процесса с ответственным специалистом.
Порядок работы и контроль
| Этап | Что сделать | Учебная ситуация | Как проверить |
|---|---|---|---|
| Пара цветов | Возьмите фактические значения текста и фона | Обычная подпись кнопки | Не использованы приблизительные цвета со скриншота |
| Тип текста | Определите, применим ли критерий крупного текста | Размер и насыщенность известны | Порог выбран по критерию, а не на глаз |
| Коэффициент | Проверьте пару в инструменте контраста | Числовое отношение | Результат сохранён в проверке |
| Состояния | Испытайте обычное, наведение и фокус | Ссылка в трёх состояниях | Текст не теряется при взаимодействии |
| Информация | Убедитесь, что смысл не передаётся только цветом | Ошибка имеет текст и обозначение | Пользователь понимает состояние без различения оттенка |
Пример с разбором
Учебный сценарий: дизайнер выбрал фирменный бирюзовый фон и белую подпись. Наличие фирменного цвета не доказывает достаточный контраст. В проверяющем инструменте вводят точные цвета, выбирают критерий для текста и сравнивают коэффициент с порогом. Если пара не проходит, можно затемнить фон или заменить цвет текста. Для градиента и фотографии проверяют наименее контрастный участок под буквами, а не средний цвет изображения.
Как адаптировать решение
Для цветового статуса добавьте словесное обозначение: «успешно», «ошибка», «требуется проверка». У ссылки кроме цвета может быть подчёркивание или другой устойчивый признак. Проверьте, что фокус клавиатуры различим: это отдельная задача, которую нельзя закрыть только коэффициентом текста. Документируйте список проверенных компонентов и состояний. Тогда следующий дизайнер сможет повторить проверку после изменения палитры, а не доверять устному утверждению «цвета уже проверены».
Учебное задание
Выберите три компонента: кнопку, ссылку в абзаце и сообщение об ошибке. Запишите пары цветов и состояния, измерьте контраст и отметьте применимый критерий. Для ошибки уберите цвет и проверьте, остаётся ли понятен смысл по тексту. Для кнопки посмотрите реальный размер подписи, а не увеличенный скриншот. Сохраните таблицу «компонент - состояние - пара - результат - изменение» для повторной проверки после правок.
Проверяйте дизайн на реальном тексте и размере размещения. Короткая строка-заглушка, увеличенный экран и идеальная фотография скрывают ошибки. Подготовьте варианты с длинным названием, дополнительной строкой и отсутствующим необязательным элементом. Для цифрового макета проверьте узкую ширину и увеличение текста; для печатного - требования производства. Содержание должно сохраняться при обычных вариациях, а не только на одном красивом примере.
Сохраните входные данные, выбранное правило, полученный результат и подтверждение проверки. У каждого изменения укажите причину. Отдельно запишите, чего пример не проверяет: другой объём данных, дополнительные условия или особые требования организации. Этот список помогает избежать переноса учебного результата на ситуацию, для которой он ещё не испытан.
Позвоните бесплатно в Grand School по вопросам обучения и входа в профессию:
8 800 100-78-61Сравните этот разбор с вашей профессиональной целью. В карточке программы Grand School можно уточнить условия обучения и поступления.
Выбрать программу и записатьсяОшибки, которые меняют результат
- Проверять только основной экран: модальное окно и подсказка тоже содержат текст
- Считать жирную мелкую подпись крупным текстом автоматически
- Объявлять интерфейс полностью доступным после проверки контраста: доступность включает другие критерии
Как передать результат в работу
Передавайте согласованную версию, технические параметры и критерии приёмки. В комментариях объясняйте проблему и её влияние на задачу. Не ограничивайтесь субъективным «нравится»: проверяйте читаемость, порядок сообщений, полноту текста и корректный экспорт. Если меняется содержание, повторите проверку компоновки. Последняя версия исходника и финальный экспорт должны соответствовать друг другу; время сохранения само по себе не подтверждает согласование.
| Поле рабочей записи | Что сохранить |
|---|---|
| Объект и дата | Уникальный объект, период или версия, к которым относится результат. |
| Основание | Источник данных, запрос или согласованное условие. |
| Проверка | Ожидаемый результат и фактическое подтверждение. |
| Ограничение | Что неизвестно, не испытано или требует отдельного решения. |
| Следующий шаг | Действие, ответственный и срок повторной проверки. |
Перед первой передачей проверьте результат с человеком, который не участвовал в подготовке. Он должен найти нужный объект, понять правило и повторить контроль. Если для этого нужны устные пояснения, добавьте недостающий контекст в рабочую запись. Согласуйте, где хранится основной экземпляр и кто вправе его менять: несколько расходящихся копий быстро делают проверку бесполезной.
Цель макета понятна; обязательный текст сохранён; реальный размер проверен; длинное содержание не обрезается; читаемость подтверждена; версия и формат передачи согласованы.
Где учиться и как выбрать программу
Для начала профессиональной работы важны композиция, типографика, работа с содержанием и проверка конечного носителя. В портфолио показывайте не только изображение, но и задачу, ограничения, решение и способ проверки. Подготовьте один макет с несколькими вариантами содержания и объясните, что вы изменили после теста. При выборе программы уточните, хотите ли вы работать с веб-интерфейсами, рекламными материалами или полиграфией: практические задачи этих направлений различаются.
Выбирайте программу по задачам, которые хотите выполнять, и исходному образованию. Для новой профессиональной области рассматривают переподготовку; для углубления уже имеющихся компетенций сравнивают подходящие программы повышения квалификации. Название курса само по себе не подтверждает наличие конкретного программного продукта или практики: уточните актуальный учебный план, условия обучения и итоговую аттестацию перед записью.
Программа Grand School в направлении «Дизайн». Откройте карточку, сравните условия с вашей профессиональной целью и уточните, как изучаемая задача представлена в актуальном плане.
Посмотреть программу и записатьсяПрограмма Grand School в направлении «Дизайн». Откройте карточку, сравните условия с вашей профессиональной целью и уточните, как изучаемая задача представлена в актуальном плане.
Посмотреть программу и записатьсяПеред звонком запишите три вопроса: какие входные требования действуют для выбранной программы; какие учебные задания помогут освоить нужную работу; какой документ и при каких условиях выдаётся после завершения. Расскажите об опыте и примере задачи из статьи. Не выбирайте курс только по длительности: важны соответствие цели, содержание и понятный способ проверки освоенных навыков.
Итоговая программа может отличаться в зависимости от индивидуальных запросов ученика. Содержание, формат, стоимость и условия поступления уточняйте для выбранной программы. Документ об обучении не заменяет предусмотренные законом требования к должности, полномочиям или допуску.
Расскажите о своём образовании, опыте и рабочих задачах. Специалист Grand School поможет сравнить программы и уточнить условия поступления. Бесплатный звонок по России:
Позвонить бесплатноЧастые вопросы
Фирменный цвет можно изменить ради читаемости?
Решение согласуют с владельцем дизайна. Часто достаточно другого оттенка фона или более тёмного текста, сохранив узнаваемый цвет в декоративной части.
Порог 3:1 подходит любому жирному тексту?
Нет. Критерий крупного текста зависит и от размера, и от насыщенности. Если условие не выполнено, применяйте порог обычного текста.
Что проверять на фотографии?
Фактический фон под текстом, включая участки с самым слабым контрастом. Одно измерение среднего цвета изображения может пропустить проблемные буквы.
Источники и границы применения
Источник содержит критерии минимального контраста. Он непосредственно нужен для проверки текста и фона; советы по композиции и сетке в статье - практические приёмы, а не числовые нормы WCAG.
Проверено 5 октября 2026 года. Ссылка на первичный источник:
W3C: Understanding SC 1.4.3 Contrast (Minimum)
Похожие материалы
Обзор направления поможет сопоставить эту задачу с другими профессиональными обязанностями и вариантами обучения:
Профессия и обучение: ДизайнДля следующего практического шага сохраните результат учебного задания и список вопросов, которые остались после проверки. Их можно обсудить с руководителем процесса или со специалистом при подборе обучения.
