Читаемая подпись «Подход выполнен» ещё не показывает, различима ли сама отметка. Если состояние передаёт тонкая светлая галочка, клиент может увидеть место нажатия, но не понять его результат. Нужно проверить ту визуальную деталь, которая сообщает о выполнении.
Дмитрий нажимает второй раз и снимает отметку
Вымышленный Дмитрий отмечает подход в веб-дневнике. Рамку квадрата он различает, а появившуюся галочку почти не видит. Ему кажется, что нажатие не сработало. Второе нажатие снимает отметку, поэтому отчёт позже выглядит как незаполненный. Тренер сначала разбирает видимость выбранного состояния, а не обвиняет Дмитрия в пропуске записи.
3:1 относится к значимой нетекстовой детали
По Non-text Contrast 1.4.11 W3C визуальная информация, необходимая для определения компонента управления и его состояния, должна иметь контраст не ниже 3:1 с соседними цветами. Исключения включают неактивные элементы и неизменённое автором оформление, определяемое браузером. У галочки важен контраст с её окружением, а не только контраст подписи с фоном страницы.
W3C не требует сравнивать 3:1 между двумя состояниями одного элемента, которые не расположены рядом. Но индикатор в выбранном состоянии всё равно должен различаться на соседнем фоне. Не нужно заменять эту проверку утверждением, что «цвет после клика сильно меняется»: Дмитрий должен увидеть отметку именно сейчас.
Что изменить в проверке макета
Разработчику показывают квадрат в обоих состояниях и указывают на галочку как на носитель смысла. Он проверяет её цвета относительно соседнего фона, а не измеряет лишь чёрные буквы заголовка. W3C отмечает, что очень тонкие линии могут выглядеть бледнее из-за сглаживания, даже при формально достаточном соотношении цветов. Поэтому после измерения смотрят и на читаемость самой формы.
В тестовом дневнике Дмитрий отмечает подход один раз и распознаёт выбранное состояние. Затем снимает отметку намеренно. Если после обновления темы или уменьшения элемента галочка снова теряется, оба состояния проверяют заново. Этот учебный тест не меняет программу тренировки и не оценивает, действительно ли подход выполнен.
Название действия и его видимость — разные задачи
У кнопки-иконки с понятным названием рассматривается то, как объяснить действие, в том числе экранному диктору. Здесь Дмитрий понимает смысл отметки, но не различает её состояние глазами. Хорошее доступное имя не заменяет контраст; исправленная галочка, в свою очередь, не подтверждает доступность всего дневника.