gitaspenбренд

Доступность

Порог контраста — единственное правило бренда, которое проверяется числом, а не взглядом.

4 минуты

Порог контраста — единственное правило бренда, которое проверяется числом, а не взглядом.

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

Пороги

ЧтоНаименьшее отношение
текст обычного размера4.5
крупный текст: от 24px, либо от 18.66px полужирным3
элемент интерфейса, значок, граница поля ввода3

Отношение считается по определению относительной яркости из требований к доступности: канал переводится в линейное пространство, каналы складываются с весами 0.2126, 0.7152 и 0.0722, отношение равно (светлее + 0.05) / (темнее + 0.05). Порядок цветов в паре значения не имеет.

Правило сомнения

Сомнение решается в пользу большего контраста. Пара, взятая «с запасом», не становится хуже; пара, взятая впритык, перестаёт проходить порог от первой же правки оттенка.

Число 4.5 — нижняя граница допустимого, а не цель. Значение 4.51 и значение 12 одинаково проходят проверку, и запас между ними — это то, что останется, когда оттенок поправят.

Форма обращения к читателю в своде не выбрана — см. голос, — поэтому правило записано без обращения.

Как проверить пару

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

Столбец «Порог» называет, для чего пара: обычный текст, крупный текст или элемент. Порог берётся из таблицы выше, и итог отвечает про названный, а не про самый строгий: пара для границы поля с отношением 4.07 свой порог 3 проходит. Пустая ячейка — назначение не названо, и портал отвечает общим: для какого текста пары хватает.

  • AaСтрока обычного текста
    #000000на#FFFFFF

    предельный случай: чёрное на белом

    21.00Годится для текста любого размера: порог 4.5

  • AaСтрока обычного текста
    #FFFFFFна#FFFFFF

    вырожденный случай: цвет на себе самом

    1.00Не использовать: ниже 3

  • AaСтрока обычного текста
    #767676на#FFFFFF

    наименьший серый, проходящий для обычного текста

    4.54Годится под обычный текст: порог 4.5

  • AaСтрока обычного текста
    #949494на#FFFFFF

    наименьший серый, проходящий для крупного текста

    3.03Годится под крупный текст: порог 3

  • AaСтрока обычного текста
    #B03428на#FDF2F1

    тон отказа на своей подложке

    5.69Годится под обычный текст: порог 4.5

Цвет записывается так же, как в CSS: #RRGGBB, сокращённо #RGB, rgb(), hsl() или именем. Прозрачность не отбрасывается: цвет с непрозрачностью 0.8 кладётся на фон и проверяется тем, что из этого получилось, — число выходит другое, и порог, пройденный у непрозрачного, может оказаться не пройден. Строку, которую разобрать не удалось, портал помечает причиной вместо числа: пара без числа и без пометки читалась бы как разрешённая.

Эти пары — опорные точки шкалы, а не палитра бренда: палитра не выбрана, см. цвет.

Чего проверка не заменяет

Отношение контраста не говорит ничего о том, различима ли пара при нарушении цветовосприятия. Поэтому цвет не бывает единственным носителем смысла: рядом с ним всегда стоит слово, значок или форма.

Так

Строка ошибки: красная рамка, значок и текст «Поле не заполнено».

Так нельзя

Строка ошибки: только красная рамка.

Что запрещено

  • не публиковать пару слабее 4.5 для обычного текста и 3 для крупного и для элементов;
  • не подписывать отношение контраста руками: его считает страница по значениям пары;
  • не оставлять цвет единственным носителем смысла — состояние подписывается словом;
  • не проверять пару на глаз по картинке: оттенок в растре не равен значению цвета;
  • не понижать порог ради оттенка, который «лучше смотрится»: из палитры выбывает оттенок, а не порог.

Устаревшее

Изъятых порогов нет: пороги приняты вместе со сводом, 3 августа 2026 года. См. устаревшее.

Правовая рамка

Не применяется: пороги взяты из общих требований к доступности и предметом прав на бренд не являются. См. правовую рамку.

Инструкция не помогла?

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