Контраст
Контраст определяет, читается ли текст и находится ли контрол. Цвет во Framework подбирается не на глаз, а по измеряемым порогам WCAG, и эти пороги проверяют контракты.
Пороги
| Что | Порог | Основание |
|---|---|---|
| Текст, который читают | 4,5 : 1 | WCAG 1.4.3 |
| Граница контрола, значимая иконка, индикатор фокуса | 3 : 1 | WCAG 1.4.11 |
| Край области, разделитель | не нормируется | по нему ничего не ищут |
| Отключённый элемент | не нормируется | но остаётся заметным (Отключённое состояние) |
Контраст нейтральных ролей
Значения нейтральных ролей на surface-0, измеренные по примитивам:
| Роль | Светлая | Тёмная | Работа |
|---|---|---|---|
--sf-on-surface |
17,2 : 1 | 14,7 : 1 | основной текст |
--sf-on-surface-variant |
6,5 : 1 | 5,9 : 1 | вспомогательный текст |
--sf-on-surface-muted |
3,2 : 1 | 2,9 : 1 | только отключённое и декор |
--sf-outline |
3,1 : 1 | 3,1 : 1 | граница контрола |
--sf-outline-variant |
1,3 : 1 | 1,9 : 1 | край области |
--sf-outline-disable |
1,9 : 1 | 2,3 : 1 | граница отключённого |
Граница контрола стоит ровно на пороге, а не выше. Сплошная граница (4,5 : 1 и 6 : 1) визуально слишком тяжёлая, а граница области (1,3 : 1) не позволяет найти поле — особенно на сенсорных устройствах, где нет наведения, которое бы его подсветило. Поэтому граница контрола — линия на пороге 3 : 1.
Приглушённый текст на поднятой панели меняется со ступенью. В тёмной теме
поднятая поверхность светлеет, и одно значение вспомогательного текста
перестаёт проходить 4,5 : 1. Поэтому у каждой ступени высоты есть своя роль
--sf-on-elevation-N--variant, и класс высоты подставляет её сам (Высота: поверхность и тень).
Приглушённый текст на плашке тоже берёт свою роль. Плашка
--sf-surface-container полупрозрачна: в светлой теме она темнее фона, в
тёмной — светлее. Значение --sf-on-surface-variant на ней в тёмной теме даёт
4 : 1 над surface-0 и 3,5 : 1 над surface-1, в светлой — 4,3 : 1 над
surface-3. Роль --sf-on-surface-container--variant (светлая тема —
neutral-35, тёмная — neutral-80) держит не меньше 4,5 : 1 над любой
поверхностью от surface-0 до surface-3:
| Плашка над | Светлая | Тёмная |
|---|---|---|
surface-0 |
6,4 : 1 | 7,5 : 1 |
surface-1 |
6,2 : 1 | 6,6 : 1 |
surface-2 |
5,7 : 1 | 5,7 : 1 |
surface-3 |
5,1 : 1 | 5 : 1 |
Компоненты с плашкой под содержимым и утилита bg-surface-container
подставляют её вместо --sf-on-surface-variant сами; дорожки индикаторов
(полоса прогресса, ползунок) текста не несут и роль не меняют (Поверхности и содержимое на них).
Проверка контраста
Пороги проверяют контракты:
control-boundaryсчитает контраст границы из примитивов;elevation-text— контраст текста на ступенях высоты и на плашке--sf-surface-container;muted-roleиicon-colour-rolesне дают слабым ролям красить то, что читают.
Эти контракты — тесты исходников Framework; в поставку они не входят. Перенастраивая палитру в проекте, обязательно проверяйте те же пары любым измерителем контраста по WCAG: какие пары и пороги держит новая палитра, сказано в Контраст новой палитры.
Смотрите также
- Границы — роли границ;
- Три семейства — ступени штриха;
- Высота: поверхность и тень — высота и приглушённый текст;
- Принципы качества для всего Framework и Как Framework проверяет себя — проверки и стандарты.