Как проверить контраст и читаемость лендинга до вёрстки

Проверяйте не цвет сам по себе, а пару «текст — фактический фон» в конкретном размере и состоянии. Возьмите значения из макета, посчитайте контраст, исправьте неподходящие сочетания и повторите проверку на той же версии. Затем отдельно посмотрите, удобно ли читать страницу: достаточный коэффициент не исправляет мелкий шрифт, плотную строку и потерянную подпись

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

В руководстве будет один учебный лендинг с зелёным акцентом: мы найдём слабые подписи и кнопку, сохраним характер оформления, пересчитаем пары и оформим повторную приёмку. В конце доступны заполненная таблица и локальный калькулятор для двух непрозрачных sRGB-цветов. Это помощь в проверке дизайна, а не сертификат доступности всей страницы

Какую задачу решает проверка контраста

Контраст показывает различие светлоты переднего плана и фона по определённой формуле. Для текста передний план — буквы, а фон — поверхность непосредственно за ними. Один и тот же зелёный может быть хорошо различим на тёмной подложке и плохо на белой. Поэтому запись «наш зелёный доступный» без второй части пары ничего не подтверждает

Проверка нужна для конкретного материала: заголовка, абзаца, подписи кнопки, подсказки формы или сообщения об ошибке. У них могут быть разные размеры, фоны и состояния. Если в брендовой палитре всего несколько цветов, количество применяемых пар всё равно может быть больше. Белый текст на зелёной кнопке и зелёная ссылка на белом поле — две записи, даже когда коэффициент совпадает

Не используйте собственное зрение как единственный измеритель. Яркий монитор, привычное окружение и крупный масштаб редактора помогают вам читать то, что другой человек едва заметит. При этом неудобство может возникнуть и у вас на телефоне при другом освещении. Измерение позволяет обсуждать конкретные значения, а не убеждать друг друга, что «мне нормально видно»

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

Какие критерии использовать для текста

В WCAG 2.2 минимальный контраст обычного текста на уровне AA — 4,5:1, крупного — 3:1. Крупным считается, в частности, текст от 18 пунктов обычного начертания или от 14 пунктов полужирного; в CSS это примерно 24 px и 18,67 px. Не считайте любой заголовок крупным только по его роли. Источник: WCAG 2.2 и определения

Размер берите из фактического представления, а не из названия стиля «Heading». Если на телефоне заголовок уменьшился, его категорию нужно определить заново. Нельзя использовать ослабленный порог крупного текста для подписи, которая выглядит большой только при увеличении редактора. В карте сохраняйте размер, начертание и выбранное основание

Порог не округляют в пользу результата. Значение немного ниже требуемого не превращается в успешное после красивого округления на экране. У очень тонкого начертания даже формально подходящая пара может выглядеть слабее, поэтому полезно оставлять запас и смотреть реальный материал. Источник: разъяснение W3C Contrast Minimum

В итоговой таблице указывайте, что именно проверено: минимальный контраст текста по выбранному критерию, а не «весь сайт соответствует AA». Для более строгой задачи можно отдельно рассматривать усиленный критерий: у обычного текста 7:1, у крупного 4,5:1. Это другой уровень требований, который нельзя молча подменять минимальным. Источник: W3C Contrast Enhanced

Что подготовить из макета перед измерением

Попросите ссылку на актуальную версию с доступом к просмотру и значениям стилей. Нужны не только красивые экраны, но и обычные текстовые фрагменты, форма, кнопки и существенные состояния. Если есть отдельные варианты для телефона, сохраните их вместе с широким представлением. Проверять старую версию и принимать новую по её результату нельзя

Для каждой пары запишите точное место. Например: «карточка состава, пояснение под заголовком» или «форма, текст ошибки телефона». Общая строка «серый текст» не поможет найти проблему, если серых оттенков несколько. Добавьте ссылку на фрагмент, снимок без чувствительных данных или понятное название компонента

Уточните фон и прозрачность. Белый прямоугольник рядом с текстом не всегда является поверхностью за ним: он может быть прозрачным, а под ним видна фотография. На группе может стоять общая непрозрачность, которая меняет вид букв. Если не понимаете устройство слоёв, попросите дизайнера показать итоговую пару и отметить, какие параметры участвуют в результате

Соберите состояния до измерения. Обычная, наведённая, нажатая кнопка и фокус могут выглядеть по-разному. Поле ввода имеет подпись, введённый текст, подсказку и ошибку. Не требуется изобретать неиспользуемые состояния, но реально предусмотренные должны попасть в карту. Иначе удачный основной экран скроет слабый текст в момент обращения

Как получить значения в дизайн-макете

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

Проверьте, не меняется ли цвет у части фразы. Ссылка, акцентное слово или цифра могут иметь собственное оформление. Если разные фрагменты выполняют одну роль, это не значит, что достаточно измерить первый. Создайте отдельную запись для отличающейся пары, особенно когда она несёт важную информацию или действие

Скопируйте значение, а не перепечатывайте по памяти. В длинной таблице легко спутать близкие оттенки. После вставки посмотрите образец цвета в калькуляторе и сверьте код с макетом. Если инструмент принимает сокращённую запись, уточните, как он её разворачивает. В приложенном рабочем файле используются полные шестизначные коды, чтобы избежать неоднозначности

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

Как проверить цвета уже работающей страницы

Откройте нужный адрес в Chrome, дождитесь загрузки шрифтов и перейдите к проверяемому месту. Щёлкните по тексту правой кнопкой и выберите просмотр кода элемента. В панели Elements найдите его стили; цвет текста обычно находится в свойстве color, фон — в background или background-color самого элемента либо его предка

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

Chrome DevTools позволяет находить проблемы контраста через CSS Overview и смотреть подходящие сочетания в Color Picker. Изменение в панели само по себе не обновляет исходник сайта: его нужно перенести в код или дизайн-систему и выпустить проверенную версию. Источник: руководство Chrome DevTools

Сохраните адрес, дату, ширину окна и проверенное состояние. Если инструмент не смог определить фон, это не обязательно ошибка страницы и не успех. Зафиксируйте, что автоматический расчёт недоступен, получите значения другим способом и повторите. Не пытайтесь закрыть неизвестное общим зелёным баллом отчёта

Что делает калькулятор и как читать его результат

Для двух непрозрачных sRGB-цветов калькулятор переводит каналы в относительную яркость и сопоставляет светлую и тёмную части пары. Формула коэффициента использует их значения с добавлением 0,05. Она описана в технике W3C G18; в приложенном инструменте реализован именно этот расчёт. Источник: W3C G18

Практический порядок проще формулы: введите цвет текста, затем фон, выберите категорию текста и посмотрите число вместе с выводом. После замены одного цвета повторите расчёт. Не оценивайте только показанный образец: он помогает заметить ошибку ввода, но окончательное решение строится на корректных исходных данных и выбранном условии

Проверяйте формат до расчёта. Опечатка, пропущенный знак или название цвета из другого пространства не должны незаметно превращаться в другое значение. В рабочем инструменте принимается полный код вида #176b56. Для прозрачности, изображений и цветов вне такого ввода он не выдаёт автоматическое подтверждение. Это ограничение лучше знать заранее, чем получить удобный, но неподходящий ответ

Отображаемое число можно сократить для чтения, но сравнение с порогом выполняется по полному значению. В журнале сохраняйте исходную пару и категорию, чтобы результат можно было воспроизвести. Для пограничного сочетания полезно записать больше знаков или точный машинный результат. Удалять неудобные цифры ради положительного вывода нельзя

Как не перепутать текст, кнопку и её границу

У кнопки есть несколько визуальных отношений. Надпись должна читаться на заливке. Сама форма или нужный для распознавания контур должны быть различимы относительно окружения. Индикатор фокуса относится к своему состоянию. Один удачный коэффициент не подтверждает автоматически все три задачи

Для нетекстовых частей элементов управления и значимых графических объектов WCAG рассматривает контраст 3:1 с соседними цветами, с оговорёнными исключениями. Это отдельная проверка, а не разрешение делать любой мелкий текст кнопки по тому же порогу. Декоративную тень не нужно превращать в обязательную границу, если она не несёт нужную для распознавания информацию. Источник: W3C Non-text Contrast

В карте кнопки сделайте несколько строк по роли, если это необходимо. Например, «надпись на зелёном», «контур на белом», «фокус на сером». Так дизайнер увидит, что именно требует правки. Общая запись «кнопка не проходит» может привести к замене всего оформления, хотя проблема заключалась только в слабом индикаторе

Не сравнивайте цвет обычного состояния с цветом наведённого вместо проверки каждого на своём фоне. Посетитель видит кнопку в конкретном состоянии, а не две версии рядом как в макете. Если изменение состояния передаёт смысл, проверьте и способ его распознавания. Эти наблюдения удобно записать рядом, но не сводить к одному числу

Состояния формы, которые легко забыть

Сначала посмотрите подписи полей и вводимые значения. Затем найдите подсказки, обязательность, ошибку, состояние отправки и подтверждение. Текст внутри пустого поля может исчезнуть после ввода, поэтому его видимость не заменяет понятную постоянную подпись. Даже если вопрос статьи касается цвета, отсутствие нужного объяснения стоит отметить как отдельное наблюдение

Для ошибки нужен не только отличающийся оттенок, но и понятное сообщение. Если поле стало красным без слов, человек может не понять, что исправить. WCAG отдельно требует не использовать цвет как единственное визуальное средство передачи информации или действия. Это правило объясняет, почему одной смены заливки недостаточно. Источник: W3C Use of Color

Проверьте сообщение на фактическом фоне формы. Иногда оно попадает на плашку другого оттенка, а в библиотеке стилей измерялось на белом. Также посмотрите длинную ошибку на телефоне: она не должна превращаться в обрезанный фрагмент из-за фиксированной высоты. Это уже проверка представления, которую коэффициент сам не выполняет

Если состояния ещё не нарисованы, не ставьте им положительную оценку. Запишите, что материал отсутствует, и верните вопрос в состав дизайна. Можно принять проверенные обычные пары, сохранив открытыми состояния. Но назвать всю форму готовой до их появления будет неверно, даже если основной экран выглядит аккуратно

Прозрачность: почему код цвета может обмануть

Полупрозрачный текст на белом фоне выглядит не так, как его непрозрачный исходный цвет. То же происходит с полупрозрачной подложкой поверх фотографии. Если вставить в обычный калькулятор только базовые коды, получится ответ на другую задачу. Поэтому сначала нужно установить итоговое сочетание с учётом всех участвующих слоёв

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

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

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

Текст на фотографии и градиенте

Найдите область непосредственно за надписью, а не самый тёмный или самый светлый участок всей картинки. Затем посмотрите её при разных кадрированиях и ширинах. Если белая надпись хорошо читается на широком экране, на телефоне под неё может попасть светлая часть фотографии. Значение из одного удобного положения не описывает весь используемый материал

Проверьте длинный реальный заголовок. После переноса строк он занимает другую площадь и может выйти за затемнённую область. То же относится к локализации, изменению текста и загрузке другого шрифта. Внешне небольшой редакторский шаг способен изменить фон под частью букв, поэтому этот тип оформления требует повторной проверки после замены содержания

Возможные решения: отдельная сплошная плашка, более устойчивое затемнение, изменение расположения текста или другая фотография. Выбирайте способ, который сохраняет смысл изображения и не заставляет читать через декоративный эффект. Если ни один вариант не даёт уверенного результата, проще разделить текст и изображение на разные области

В записи укажите изображение, версию, положение текста и ограничения замены. Формулировка «белый текст разрешён на фото» слишком широка. Сотрудник позже поменяет снимок и не узнает, что прежний вывод относился только к конкретному кадру. Нужна инструкция, когда повтор обязателен, а не запрет на любые дальнейшие изменения

Как сохранить фирменный цвет без потери чтения

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

Если светлый Tiffany не подходит для мелкого текста на белом, его можно оставить в фоне или иллюстрации, а подпись сделать тёмной. Если нужен белый текст кнопки, проверьте более тёмную заливку того же семейства. Решение должно сохранять общий характер, но проверяться по значениям, а не по эмоциональному названию оттенка

Не меняйте только проблемный компонент в отрыве от системы. Найдите другие места, где используется тот же стиль, и оцените последствия замены. Ссылка, подпись изображения и текст кнопки могут случайно ссылаться на один токен цвета, хотя выполняют разные роли. Иногда полезнее разделить роли, чем глобально затемнить всё, включая фоновые поверхности

Покажите исправление на реальном фрагменте страницы. Таблица цветов помогает рассчитать, но не показывает композицию. Посмотрите, сохранилась ли иерархия, не стала ли второстепенная подпись главным акцентом и различимо ли действие. Итог принимается как сочетание измерения и просмотра, а не как победа одного параметра над всем дизайном

Читаемость после успешного расчёта

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

Проверьте длину строк и интервалы на вашей композиции. В разных гарнитурах одинаковый размер даёт разное ощущение плотности. Не используйте механическую норму как оправдание явно неудобного фрагмента. Сохраните конкретное наблюдение: «условие распалось на слишком много коротких строк» или «абзац трудно связать с заголовком из-за пустоты»

Рассмотрите тонкое и обычное начертания на одном содержании. Если тонкий вариант требует напряжения, проверьте более устойчивый вес или другую роль цвета. Не увеличивайте шрифт только для формального перехода в категорию крупного текста. Сначала решите, действительно ли такое изменение соответствует иерархии и полезно читателю

Попросите другого человека найти условия услуги и следующий шаг без подсказки. Это небольшая проба понимания, а не исследование конверсии. Запишите, на каком фрагменте возникло затруднение и что человек искал. Не превращайте один комментарий в универсальную истину, но используйте его, чтобы проверить спорное место на реальной задаче

Телефон, увеличение и изображения с текстом

На телефоне проверьте те же пары, но с фактическими размерами и фонами мобильной версии. Кнопка может стать ниже, заголовок мельче, а текст — попасть на другую часть фотографии. Десктопный вывод не переносится автоматически. Если оформление действительно не меняется, это можно подтвердить и сослаться на ту же пару

Отдельно посмотрите увеличение текста. WCAG рассматривает возможность увеличить его до 200% без потери содержания или функций, с оговорёнными исключениями. Для этой статьи достаточно увидеть, не запрещает ли дизайн нужный рост и не обрезаются ли подписи; полную реализацию проверяют уже на странице. Источник: W3C Resize Text

Не прячьте важный текст в обычной растровой картинке ради сохранения идеальной композиции. Когда ту же подачу можно получить настоящим текстом, это позволяет пользователю менять представление. У W3C есть отдельный критерий об изображениях текста и его исключениях. Снимок сложной схемы и нарисованный вместо HTML абзац — не одно и то же. Источник: W3C Images of Text

Если в статье или лендинге используется схема, проверьте подписи в фактической колонке. Большое исходное изображение после уменьшения может стать нечитаемым. Дайте рядом текстовое объяснение и при необходимости доступ к крупной версии. Числовой контраст сам по себе не спасает подпись, которая стала слишком маленькой после масштабирования

Как устроить рабочую таблицу проверки

Каждая строка должна описывать одну проверяемую пару в определённом состоянии. Запишите ID, место, цвет текста, фон, размер, начертание, прозрачность, выбранный критерий, коэффициент и вывод. Добавьте версию и способ получения значений. Такой состав позволяет другому человеку повторить расчёт, не угадывая, что именно вы измерили

Для дефекта нужны действие и повтор. «Сделать темнее» недостаточно: укажите предлагаемый новый цвет или задачу подобрать его, а затем проверьте фактическую замену. Если выбран другой фон или расположение, сохраните новый вариант тоже. Важно не потерять связь между первоначальным наблюдением и принятым результатом

Используйте отдельный статус для неизвестного. Например, фон зависит от фотографии, но мобильное кадрирование ещё не согласовано. Такая строка не становится отказом, потому что измерение не выполнено; не становится и успехом. В ней указывают следующий материал или действие, которое позволит принять решение

В таблице не нужно хранить личные сведения посетителей, доступы и закрытые договоры. Для проверки цвета достаточно допустимого фрагмента и технических значений. Если снимок содержит реальные данные формы, замените их учебными или обрежьте лишнее. Рабочая карта должна быть пригодна для обсуждения без ненужного раскрытия информации

Учебный пример: лендинг с зелёным акцентом

Представим вымышленный лендинг записи на обсуждение услуги. В М1 есть белые плашки, спокойный серый фон, светлый Tiffany в кнопке и серые пояснения. Основной текст тёмный. Дизайнеру нравится мягкое впечатление, но заказчик замечает, что пояснения и кнопка требуют напряжения. Проверяем конкретные пары, а не отвергаем весь визуальный подход

Для примера заданы непрозрачные sRGB-цвета. Белый фон — #ffffff, светлый акцент — #78d9c9, тёмный зелёный — #176b56, слабая подпись — #a0aaa5, более тёмная подпись — #636d69, основной тёмный — #283330. Это учебный набор значений, не утверждение о текущем состоянии какого-либо сайта или измеренном рекламном результате

Надпись кнопки имеет обычный размер 16 px. Пояснения формы тоже обычные 16 px. Заголовок 32 px проверяется отдельно. Для первой пробы важно не менять размеры и содержание одновременно с цветом: так будет видно, что именно исправило отношение переднего плана и фона

Сохраняем М1, составляем строки C1–C5 и вводим пары в калькулятор. Сначала проверяем код по видимому образцу, затем читаем число и соответствие выбранной категории. Полные значения остаются в файле расчёта. В публичной таблице показываем сокращённые числа, а вывод получаем без округления в пользу успеха

Первоначальный расчёт и его трактовка

У белой надписи на светлом Tiffany получается примерно 1,671021:1. У слабой серой подписи на белом — 2,389641:1. Оба обычных текста в заданных условиях требуют исправления. Нельзя объявить кнопку подходящей только потому, что её цвет яркий и она заметна как плашка: читаемость надписи остаётся отдельным отношением

Основной тёмный текст на светлом акценте даёт около 7,823020:1. Это показывает другой способ сохранить цвет: использовать Tiffany как поверхность, а текст сделать тёмным. Однако в учебной композиции такая кнопка стала визуально спорить с второстепенной плашкой. Число помогло проверить вариант, но не выбрало иерархию вместо дизайнера

Тёмный зелёный на белом даёт приблизительно 6,414394:1; более тёмная серая подпись на белом — 5,354452:1. Эти значения позволяют исправить обычный текст в минимальном условии. После расчёта нужно применить изменения в М2 и убедиться, что в макете действительно стоят эти значения, а не близкие оттенки из другой версии

Никаких процентов роста заявок из такой таблицы не следует. Она подтверждает конкретные цветовые отношения в учебном наборе. Вопросы смысла, удобства, технической доставки и обработки обращения остаются самостоятельными. Не приписывайте измерению больше результата, чем оно получило

Исправление с сохранением характера

В М2 основную кнопку сделали тёмно-зелёной с белой надписью. Светлый Tiffany оставили для спокойной вспомогательной поверхности, где текст тёмный. Пояснение формы заменили на более тёмный серый. Так сохраняется зелёное семейство, но разные роли перестают зависеть от одного слишком светлого оттенка

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

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

Для заголовка поверх фотографии выбрали другой приём: вынесли его на белую область. Исходное мобильное кадрирование ещё не было согласовано, поэтому уверенный числовой вывод для него отсутствовал. Вместо попытки подобрать удобный участок снимка команда упростила композицию и повторила измерение уже на устойчивой поверхности

Повторная проверка М2

Откройте исправленную версию и снова снимите значения. Не копируйте предложенные коды из комментария без проверки фактического применения. В учебном повторе C1 использует белый текст на #176b56, C2 — #636d69 на белом. Полученные значения совпадают с рассчитанными: примерно 6,414394:1 и 5,354452:1 соответственно

Затем проверьте обычное, наведённое и фокусное представления кнопки. Если цвет меняется, добавьте соответствующие пары. В примере заливка при наведении остаётся проверенной, а различие поведения задаётся согласованным оформлением без ослабления надписи. Индикатор фокуса смотрят отдельно относительно окружающей поверхности, не включают его молча в строку текста

Повторите просмотр на телефоне. В учебном варианте размеры подписи и кнопки остаются обычными, содержание не обрезано, пояснение связано с полем. После увеличения текста видно, что фиксированная высота не скрывает сообщение. Это наблюдение за подготовленным фрагментом; поведение будущего сайта после вёрстки всё равно нужно проверить отдельно

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

Почему результаты разных инструментов могут расходиться

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

Затем посмотрите округление и порог. Показанное число может быть сокращено, а вывод рассчитан иначе. Для пары #777777 на белом получается примерно 4,478089:1, а для #767676 — 4,542225:1. Небольшое изменение кода меняет положение относительно порога обычного текста. Эти значения получены собственным расчётом по указанной формуле

Если инструмент использует другой алгоритм оценки, его числа не нужно сравнивать напрямую с коэффициентом WCAG. Сохраните название метода и назначение результата. Альтернативная оценка может быть полезной для отдельной задачи, но не является тем же измерением с другой шкалой. В приёмке должно быть заранее ясно, какой критерий проверяется

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

Как повторить учебный расчёт в приложенном инструменте

Скачайте HTML-файл из раздела рабочих материалов и откройте его в браузере. Для обычной локальной проверки не нужен аккаунт и не требуется вводить адрес сайта. В первом поле укажите #ffffff, во втором #78d9c9. Выберите обычный текст и запустите расчёт. Должны появиться образец и результат, соответствующий строке C1 учебной таблицы

Теперь замените только фон на #176b56, сохранив белый передний план и прежнюю категорию. Получится повтор для исправленной кнопки. Сравните результат с C1 в М2. Если число отличается существенно, сначала сверьте коды и порядок символов. Сама перестановка двух непрозрачных цветов не меняет коэффициент, но меняет вид образца и роль в карте

Для пояснения формы используйте #a0aaa5 и #ffffff, затем замените первый код на #636d69. Не меняйте категорию в середине сравнения. Так вы воспроизведёте именно цветовую правку, а не получите положительный ответ за счёт другого условия. Запишите обе версии и сделанное изменение в одной строке рабочего файла

Попробуйте ошибочный ввод, например пропущенный символ. Инструмент должен сообщить о формате и убрать действующий вывод, а не продолжать показывать прежний зелёный результат. Если после ошибки виден старый расчёт без предупреждения, такой интерфейс опасен для приёмки: пользователь может принять число, которое относится к предыдущим значениям

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

Как разбирать успешный, неуспешный и неизвестный исход

Успех означает, что корректно определённая пара удовлетворяет выбранному условию в проверенной версии. В записи должно быть видно, к какому месту и состоянию это относится. Если затем поменяли фон или вес текста, старый успех остаётся историей. Новый вариант требует своей проверки, даже когда визуальное отличие кажется небольшим

Неуспех означает, что измеренная пара не выполняет заданное условие. Это не оценка всего дизайнера и не требование удалить весь цвет. Назначьте локальное действие: другую пару, изменение поверхности или пересмотр роли. После применения повторите измерение и просмотр. Статус закрывается результатом, а не сообщением «сделал чуть темнее»

Неизвестный исход появляется, когда существенный вход не определён. Например, отсутствует мобильный кадр фотографии или неясно, где применяется прозрачность. В этой ситуации нет честного коэффициента для принятия. Запишите конкретный недостающий материал и вернитесь к измерению после его получения. Неизвестное не должно становиться средним баллом между успехом и отказом

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

Остаточный вопрос оформляйте так, чтобы другой участник мог его продолжить. «Проверить картинку» слишком неопределённо. Лучше: «получить финальный мобильный кадр первого экрана и проверить фон за второй строкой заголовка». Тогда понятно, зачем задача открыта и каким наблюдением её можно закрыть

Как проверять подписи внутри иллюстраций

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

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

Для цветовой проверки используйте исходные значения авторской схемы, когда они доступны. Если она получена как готовая фотография или снимок интерфейса, опишите ограничения и не пытайтесь восстановить все цвета по сглаженным буквам. Текстовое объяснение рядом должно позволять понять содержание, если мелкие детали изображения рассмотреть трудно

После замены палитры проверьте смысл связей. Две линии диаграммы могли отличаться только оттенками, которые стали похожими. Подписи, формы и прямые обозначения помогают сохранить различие. Такая проверка касается чтения конкретной схемы; она не означает, что любой график нужно заново рисовать в одном универсальном стиле

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

Как оформить замечание дизайнеру

Укажите место, наблюдаемую проблему и исходные значения. Например: «В М1 пояснение телефона, 16 px обычное, #a0aaa5 на белом; получено 2,389641…:1; подобрать более различимый вариант в текущем стиле и повторить». Такая запись оставляет дизайнеру пространство решения, но не заставляет угадывать, что именно вас смущает

Если у вас есть предлагаемая пара, подпишите её как вариант, а не как уже принятое изменение. Попросите показать применение на реальном фрагменте и проверить соседние роли. Возможно, более удачное решение потребует другого фона, веса или распределения акцентов. Итоговая замена должна сохранять читаемость и общую композицию

Не смешивайте в одном замечании цвет, смысл текста, размеры и всю структуру страницы. Разделите причины, чтобы повтор был понятным. Если абзац трудно читать из-за языка, затемнение не решит проблему. Если сообщение об ошибке отсутствует, одного цветового исправления тоже недостаточно. Отдельные записи помогают не закрыть не ту задачу

После правки попросите актуальную ссылку и номер версии. Вернитесь к тому же месту, снимите значения и проверьте условия. В истории оставьте первоначальное наблюдение и новый результат. Это позволяет избежать спора о том, существовала ли проблема, и не терять открытые пункты при следующем изменении дизайна

Что передать в разработку вместе с цветами

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

Отметьте, что требует повторной проверки после реализации. Реальный шрифт может отличаться от показанного в макете, мобильная композиция — менять фон, а внешняя форма — иметь собственные стили. Не называйте такие изменения доказанными заранее. В карте передачи должен быть список конкретных мест и действия для проверки

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

Дополнительный порядок передачи раскрыт в материале как подготовить макет к вёрстке. Там проверяется комплект реализации. Текущая таблица контраста становится частью этого комплекта, но не подменяет собой адаптивы, состояния, исходники и техническую приёмку

Как принять результат без ложного ощущения завершённости

Подведите итог по строкам, а не по общему впечатлению. Для каждой пары должны быть известны версия, условие, измерение и вывод. Исправленные места требуют повтора, неизвестные — следующего действия. Если часть состояний ещё отсутствует, можно принять проверенный фрагмент, оставив весь комплект открытым в соответствующей части

Не пишите «вопросов по доступности нет» после этой одной проверки. Цвет — только одна из составляющих. Даже идеальный расчёт не подтверждает доступность меню, подписи полей для вспомогательных технологий или работу клавиатуры. Честная формулировка результата указывает охват и не делает ненужных обещаний

Сохраните рабочий файл вместе с версией макета. Если меняются фон, текстовый цвет, прозрачность, размер или начертание, вернитесь к затронутой записи. Для фотографии учитывайте также замену и кадрирование. Не требуется каждый раз начинать с нуля: повторяют то, что действительно изменилось или зависит от изменённого

Если задача шире и нужен лендинг с содержанием, дизайном, реализацией и подготовкой рекламы, можно обсудить её на странице лидогенерации KEIVO. Карта проверки поможет передать конкретные требования. Она полезна независимо от того, кто будет выполнять работу и потребуется ли обращение в студию

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

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

Можно ли проверить контраст только по скриншоту?

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

У нас светлый фирменный цвет. Его нужно заменить везде?

Нет, сначала разделите роли. Цвет может оставаться на поверхности или в декоративной детали, а текст использовать более тёмный. Проверяйте конкретные пары и смотрите композицию. Глобальная замена всей палитры не является обязательным следствием одного слабого сочетания

Если коэффициент достаточный, можно оставить очень мелкий текст?

Число не делает мелкий фрагмент удобным. Посмотрите реальный размер, начертание, строку, интервалы и возможность увеличения. Для важного условия выберите подачу, которую можно спокойно прочитать. Формальное прохождение одного критерия не заменяет работу с читаемостью

Нужно ли измерять текст на кнопке отдельно?

Да, его отношение к заливке отличается от отношения границы кнопки к окружению. При изменении состояния могут появиться новые пары. Запишите роли отдельно, чтобы удачный контур не скрывал слабую надпись и наоборот

Что делать с градиентом?

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

Калькулятор прислал зелёный результат. Значит, сайт принят?

Нет, он проверил введённую пару по выбранному условию. Нужно подтвердить правильность исходных данных, применение в версии и остальные состояния. Для всей страницы остаются другие проверки. Сохраните измерение в карте с ясной границей результата

Проверку нужно повторять после вёрстки?

Да, для реализованной страницы нужно убедиться, что используются согласованные значения, шрифты, размеры и фоны. Уточните состояния и мобильное представление. Макет помогает исправить проблему раньше, но не подтверждает автоматически точность её технического переноса

Рабочие материалы

Карта контраста с заполненным учебным примером содержит исходные пары, исправления М2 и рабочую часть. В ней есть место для неизвестного фона и отсутствующего состояния, чтобы не заменять пробел положительной отметкой

Локальный калькулятор двух цветов работает с полными шестизначными sRGB-кодами без прозрачности. Он не отправляет введённые значения на сервер, не анализирует сайт автоматически и не выдаёт заключение о всей доступности. При выключенном JavaScript остаются инструкция и проверенные учебные пары

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