Контраст текста с нейросетью проверяют через исходные цветовые пары и измерения: ИИ помогает собрать реестр элементов и вопросов, а человек сверяет цвета, размер шрифта и результат расчёта на готовой странице. Ответ модели «цвета достаточно разные» не заменяет проверку. Ниже — учебное задание для команды, которая готовит инструкции, памятки и страницы корпоративного обучения.
Что должно получиться после проверки?
Представьте условную памятку: основной текст читается хорошо, но подпись под схемой почти сливается с белым фоном. Редактор просит нейросеть «сделать страницу доступнее» и получает более яркую палитру. Теперь подпись заметнее, зато текст внутри синей плашки остался непроверенным. Изменение оттенка не отвечает на вопрос о каждой паре текста и фона.
Нужен реестр измерений.
В нём одна строка соответствует конкретному тексту, его фону и состоянию страницы.
Для подписи, ссылки в обычном состоянии и той же ссылки при наведении это могут быть разные строки. Итог работы — перечень проверенных пар, подтверждённых дефектов и неизвестных значений, который можно передать дизайнеру или разработчику. Это полезнее общей отметки «палитра согласована».
Описанный порядок — редакционное упражнение с ИИ, а не методика W3C и не результат аудита клиента AURMIND. Все цвета и элементы примера условные. Документы W3C задают основания проверки, но не подтверждают качество какого-либо сервиса или нашего промпта. Полный аудит доступности сайта шире этой задачи: здесь разбираем обычный текст на сплошном фоне и передачу замечаний.
Не смешивайте разные результаты.
Alt-текст изображения передаёт его содержание, а проверка порядка фокуса описывает управление с клавиатуры. Читаемость цветовой пары требует собственной записи и измерения. Хорошая альтернатива картинки не исправит бледную подпись рядом с ней.
Расскажите, чему хотите научить команду. Обсудим задачи и формат обучения.
На какое требование опираться?
Факт. Критерий WCAG 2.2 1.4.3 уровня AA задаёт для обычного текста минимальный контраст 4,5:1, для крупного — 3:1. В пояснении W3C Contrast Minimum перечислены исключения, включая логотипы и текст неактивных компонентов. Порог нельзя достигать округлением результата вверх.
Для латинского и кириллического текста ориентир крупного размера в этом пояснении — от 18 pt обычного или 14 pt жирного.
Не выбирайте порог по слову «заголовок»: проверьте фактический размер и начертание. В нашей тренировке все подписи имеют обычный размер, поэтому применяем 4,5:1. При неизвестном размере строка остаётся на уточнении.
Эти требования рассматриваются как основание учебной проверки, а не как заключение об обязательных нормах для каждой организации. Исключение для логотипа не переносите на весь фирменный текст. Неактивность также должна быть фактическим состоянием компонента, а не объяснением автора о том, что кнопку редко нажимают.
Маленькая серая подпись — содержательный текст.
В упражнении она объясняет, откуда взяты данные схемы, и не считается украшением. Если сотрудник предлагает удалить подпись ради прохождения проверки, попросите восстановить нужную информацию другим согласованным способом. Потеря смысла не является исправлением контраста.
Сначала определите объект.
Затем выберите основание проверки и только после этого сравнивайте числа. Для границ кнопок, значков и индикаторов фокуса существуют другие требования; не применяйте к ним нашу таблицу автоматически. Их можно записать отдельными вопросами специалисту, сохранив границы текущего упражнения.
На схеме три последовательных действия: найти элемент, определить пару цветов, сохранить измерение. Пропуск второго шага оставляет число без проверяемого основания. Все сведения схемы повторены в тексте.
Подготовьте исходные данные для ИИ
Выберите небольшой учебный фрагмент, разрешённый для передачи в выбранный сервис. Не загружайте рабочие скриншоты с именами участников, письмами и внутренними данными ради обсуждения палитры. Для первого упражнения достаточно вымышленной страницы с тремя текстовыми элементами.
Укажите версию фрагмента, режим оформления, состояние элемента и источник цветов. Не просите модель угадывать точные значения по картинке. Если специалист ещё не передал фактические цвета, пусть в таблице будет «нужно измерить». Уверенно написанный HEX-код не становится свойством страницы только потому, что его предложил ИИ.
Наш исходник задаёт три пары в пространстве sRGB. Все фоны сплошные, цвета непрозрачные, размер текста — 16 CSS px, обычное начертание. Фотографий, градиентов, теней и прозрачности нет. Это специально ограниченный пример, а не описание реального сайта.
| Код | Элемент условной памятки | Текст | Фон | Состояние |
|---|---|---|---|---|
| A | Основной абзац | #333333 | #FFFFFF | Обычное |
| B | Подпись к схеме | #999999 | #FFFFFF | Обычное |
| C | Текст информационной плашки | #FFFFFF | #005A9C | Обычное |
Таблица содержит цвета текста, а не цвет рамки вокруг него. Если в ответе модель сравнила белый фон страницы с синей рамкой плашки, она проверила другую пару. Исправьте выбор объекта до обсуждения полученного коэффициента.
Для рабочего фрагмента дополнительно сохраните способ получения значений. Например: специалист сообщил пару из фактических стилей для версии стенда, а проверяющий подтвердил, что за текстом действительно сплошной указанный фон. Если видимый результат зависит от нескольких слоёв, такой записи недостаточно: потребуется разбор составного фона.
Не объединяйте светлую и тёмную темы.
У них могут отличаться пары. Аналогично не переносите результат обычного состояния на наведение или нажатие без проверки. В нашем примере интерактивных состояний нет; добавлять фиктивные измерения ради заполненной таблицы не нужно.
Как поставить нейросети задачу?
Передайте таблицу вместе с ограничениями и ожидаемым форматом. Предлагаем такой шаблон поручения:
Подготовь реестр проверки контраста для трёх элементов A–C из исходника. Сохрани точные цвета и состояния. Для каждой строки укажи проверяемую пару, применимый в упражнении порог и поле для фактического измерения. Все элементы здесь — обычный текст на непрозрачном сплошном фоне, 16 CSS px, обычное начертание; используем порог 4,5:1. Не угадывай цвета по изображению, не заменяй их предложенной палитрой, не пиши «проверено» без результата измерения. Если данных не хватает, задай вопрос. Отдельно перечисли, что человек должен подтвердить на готовой странице. Не делай заключения о соответствии всего сайта WCAG.
Это задание на подготовку рабочего документа. Мы не обещаем одинакового поведения всех моделей и не выдаём приведённый шаблон за проверенный эксперимент. Сохраните фактический ответ того сервиса, с которым работает команда, и обсуждайте именно его.
Сначала проверьте сохранность исходника.
В ответе должны остаться три элемента и три пары. Если ИИ сделал подпись B крупной, чтобы снизить порог, это изменение дизайна, которого ему не поручали. Его можно обсудить отдельно, однако исходную строку измерения такое предложение не закрывает.
Следующая проверка — статус.
«Вероятно подходит» и «измерено» обозначают разные вещи. Для реестра можно заранее согласовать статусы «нет исходных данных», «ожидает измерения», «измерено: проходит порог» и «измерено: ниже порога». Не позволяйте модели подменять отсутствие результата оптимистичной оценкой.
Мнение. Я предлагаю начинать обучение с исправления одного неверного статуса. Когда сотрудник умеет объяснить, почему измерения ещё нет, ему проще удержать границу между черновиком ИИ и доказательством выполненной проверки.
В условном плохом ответе модель пишет: «Подпись серая, но хорошо видна, значит соответствует». Попросите сотрудника назвать отсутствующие основания: фактическую пару и коэффициент. В нашем исходнике пара уже известна; остаётся выполнить расчёт и сравнение. В рабочем случае может не хватать обоих сведений.
Как проверить числовой результат?
Для измерения воспользуйтесь инструментом расчёта контраста, который позволяет задать обе исходные величины. Выбирайте его вместе с техническим специалистом; важно сохранить введённые значения, используемую методику и результат. Ответ нейросети можно сверить с расчётом, но нельзя принимать только за точность записи нескольких знаков после запятой.
В технике W3C G18 описан расчёт через относительную яркость: к яркости светлого и тёмного цветов прибавляют 0,05, затем первую величину делят на вторую. Для неоднородного фона существен фон непосредственно за буквами. Это пример техники выполнения требования, а не единственный обязательный инструмент.
Для заданных непрозрачных пар sRGB расчёт даёт следующие значения. Здесь они показаны приближённо для чтения; решение принимается по полному результату, без округления до порога.
| Код | Пара текст / фон | Контраст, примерно | Сравнение с 4,5:1 |
|---|---|---|---|
| A | #333333 / #FFFFFF | 12,63:1 | Выше порога |
| B | #999999 / #FFFFFF | 2,85:1 | Ниже порога |
| C | #FFFFFF / #005A9C | 7,14:1 | Выше порога |
Это расчёты условных заданных цветов, не результаты проверки страницы клиента. Если ваш инструмент показывает другое число, сначала сопоставьте оба HEX-кода, цветовое пространство и прозрачность. Не исправляйте исходную пару, чтобы получить совпадение с таблицей. Разберите причину расхождения и сохраните её.
Число без входных значений не воспроизводится.
Для нашей подписи B предлагаем изменение текста на #666666 при прежнем белом фоне. Расчёт для новой пары даёт примерно 5,74:1, то есть выше выбранного порога. Это возможная учебная правка, а не универсальная фирменная палитра. Дизайнер согласует её применение, затем проверяющий убеждается, что в готовой версии подпись получила именно новый цвет.
На изображении два образца подписи и подписи к ним: 2,85:1 до изменения и 5,74:1 после. Сравнение относится только к заданным цветам. Уменьшенная иллюстрация не используется для измерения размера текста на странице и не заменяет исходные числовые данные таблицы.
Не задавайте новую палитру всей странице по одному дефекту.
В нашей задаче меняется только подпись B. Если общий стилевой токен влияет и на другие места, специалист сначала перечисляет эти места. После изменения их проверяют отдельно; прежний результат для другой цветовой пары нельзя автоматически считать актуальным.
Что делать со сложным фоном и цветовым смыслом?
Неизвестный фон — самостоятельный вопрос.
Если подпись стоит поверх фотографии, одна пара из настроек текста не описывает все участки за буквами. Вынесите строку из простого упражнения и передайте специалисту снимок конкретного состояния, исходные материалы и вопрос о способе измерения. Не принимайте средний цвет всей фотографии как готовое основание.
В учебном реестре такую строку обозначьте «сложный фон, нужен отдельный разбор». Возможное изменение — согласованная сплошная подложка под текстом, но её цвет, прозрачность и итоговый контраст тоже нужно проверить. Наличие прямоугольника под надписью само по себе ещё ничего не подтверждает.
Другая задача возникает, когда цвет кодирует смысл. Критерий W3C Use of Color рассматривает ситуации, где информация или требуемое действие передаются только цветом. Для нашей учебной памятки не будем обозначать статус лишь красным и зелёным: добавим видимые слова «Нужно исправить» и «Проверено». Это выбранный способ упражнения, не требование использовать именно такие формулировки.
Разделите два вопроса: можно ли прочитать надпись на фоне и можно ли понять её смысл без распознавания оттенка.
Исправление одного не гарантирует второго. Тёмная красная подпись может иметь достаточный контраст на белом, но инструкция «выберите красный вариант» по-прежнему требует различать цвет. А слово «Ошибка» может передавать смысл, оставаясь слишком бледным.
Схема показывает два независимых вопроса: «Текст читается на фоне?» и «Смысл понятен без оттенка?». В нашем задании первый подтверждается расчётом пары, второй — видимой словесной меткой. Обе проверки записываются отдельно, без общего статуса по одной удачной строке.
При обсуждении ошибок формы используйте отдельный разбор сообщений. Здесь не проектируем валидацию и не меняем правила ввода. Из статьи о контрасте разработчик должен получить конкретную пару и состояние, а не новое требование к обязательности поля.
Как оформить замечание и повторную проверку?
Плохая запись: «На странице слабая доступность». Она не называет элемент и не позволяет воспроизвести наблюдение. Для нашего примера напишите точнее: «Памятка, версия учебная-1, обычное состояние, подпись под схемой B. Текст #999999 на #FFFFFF, 16 CSS px, обычное начертание. Расчёт около 2,85:1, ниже принятого для этого текста порога 4,5:1. Предлагается проверить #666666 на прежнем фоне».
Не прикрепляйте только обрезанный образец цвета. Сохраните место элемента в странице, способ получения цветов и результат инструмента. Скриншот помогает найти подпись, но не доказывает, что после правки все состояния получили нужные стили. В рабочем замечании укажите адрес тестовой версии, если её использование разрешено.
Разработчик или дизайнер подтверждает выбранное исправление.
Затем проверяющий открывает новую версию и вновь получает фактические значения. Если ему известна только запись о замене в редакторе, статус остаётся «правка внесена, результат не проверен». Это защищает от ситуации, когда нужное значение изменили в настройках, но другой стиль сохранил прежний цвет.
Для закрытия замечания зафиксируйте:
- версию и место элемента после изменения;
- фактическую пару текста и фона, размер и начертание;
- полный результат расчёта и выбранный порог;
- проверяющего, дату и оставшиеся непроверенные состояния.
В нашем условном результате B получает #666666 на #FFFFFF, около 5,74:1. Строку закрывают только после подтверждения этих условий в новой версии. A и C не переписывают в «проверено заново», если их не проверяли повторно. Различайте сохранённый расчёт исходника и новую проверку реализации.
Итоговое сообщение команде может быть коротким: «Из трёх заданных пар измерены все три; B была ниже порога, выбранная замена рассчитана. Перенос замены на стенд ожидает проверки». Такая запись точнее, чем «страница доступна», и сразу показывает следующую работу.
Как принять упражнение у сотрудника?
Выдайте таблицу A–C и намеренно ошибочный ответ: B названа подходящей на глаз, C проверена как синяя рамка на белом, а неизвестному состоянию приписано «успешно». Попросите сотрудника восстановить исходные пары, обозначить неподтверждённое и показать результат расчёта. Все ошибки здесь учебные, они не описывают чью-либо выполненную работу.
Принимайте не красоту таблицы, а проверяемость решения.
Коллега должен найти элемент, повторить ввод цветов и понять, почему выбран конкретный порог. Если он не может объяснить происхождение одного значения, вернитесь к исходнику. Новая генерация целого реестра эту неизвестность не устранит.
Сохраните задание, фактический ответ ИИ, исправленный реестр и результаты измерений. По ним можно разбирать навык проверки: удержал ли сотрудник исходные данные, отделил ли предложение от результата, оформил ли воспроизводимое замечание. Такое упражнение не доказывает эффективность любой модели на любом сайте.
Для включения задания в корпоративное обучение ИИ опишите, какие учебные материалы выпускает команда и кто отвечает за их техническую проверку. Для обсуждения достаточно условного фрагмента без данных участников. Начать можно с одной бледной подписи и одного подтверждённого исправления.
Частые вопросы
Достаточно ли передать нейросети скриншот?
В нашем задании скриншот помогает найти текст, но не заменяет исходные значения и измерение. Если точные цвета и условия неизвестны, реестр должен содержать вопрос специалисту. Оценку модели не записывайте как выполненный расчёт.
Можно ли округлить пограничное значение до 4,5?
Нет: пояснение W3C требует сравнивать вычисленный результат без округления до порога. Приближённые числа в этой статье нужны для чтения таблицы; сохраняйте полный результат своего инструмента.
Достаточный контраст подтверждает доступность страницы?
Он подтверждает только проверенную пару в заданных условиях. Другие элементы, состояния и требования остаются отдельными задачами. Не выдавайте ограниченное упражнение за заключение о всём сайте.
Источники
- W3C: Contrast Minimum — пороги текстового контраста, крупный текст, исключения и сравнение без округления.
- W3C: G18 — относительная яркость, расчёт коэффициента и фон непосредственно за буквами.
- W3C: Use of Color — передача смысла цветом и дополнительными видимыми признаками.
