Чем темнее клетка, тем выше балл по этому показателю.
МеньшеБольше
Последняя проверка Источники и титрыМедиа-кредитыМетодология
Короткие ответы
Когда выбирать «Проверка контрастности WCAG»?
Когда история такая: Тип пользовательского интерфейса, заголовки слайдов, подписи к плакатам, метки значков.
Когда избегать?
В случаях вроде: судя по оттенку бренда, не измеряя пару.
Кто изобрёл или распространил?
коэффициенты контрастности WCAG; Исследование APCA (Myndex) как модель нового поколения
Что кодирует?
разница в яркости между передним и задним планом
Можно в рекламе?
Да, если тезис виден сразу в Meta, Google и печать; иначе ссылка на полный рисунок.
Примет учитель?
Да для лабораторные и стенды, если есть оси, единицы и строка источника.
Проверка контрастности WCAG кодирует значения как разница в яркости между передним и задним планом. коэффициенты контрастности WCAG; Исследование APCA (Myndex) как модель нового поколения.
В отчётах, рекламе и заданиях: Тип пользовательского интерфейса, заголовки слайдов, подписи к плакатам, метки значков. Избегайте, если судя по оттенку бренда, не измеряя пару.
ПО
- Color.js — Вычислите контрастность и цветовое пространство в браузере или Node. · MIT · github.com/color-js/color.js
- APCA (SAPC) — Модель перцептивного контраста для современных дисплеев — прочтите лицензию перед отправкой. · AGPL-3.0 · github.com/Myndex/SAPC-APCA
- Leonardo — Создавайте доступные тематические рамки с контрастными целями. · Apache-2.0 · github.com/adobe/leonardo
- Bootstrap a11y docs — Документированное руководство по контрастности поставляется с огромным набором инструментов пользовательского интерфейса. · MIT · github.com/twbs/bootstrap
- Atlas SVG examples — Примеры, отображаемые на сервере, которые вы можете прочитать с отключенным JavaScript. · CC0 examples · github.com/Tool-Lifes/viz-atlas
Экспорт
- Экспорт 1 — SVG
- Экспорт 2 — PDF
- Экспорт 3 — EMF/SVG в слайды (без скриншотов)
- Экспорт 4 — SVG для веба, PDF для печати
Доступность
- Доступность 1 — Никогда не цвет один. Сложите узор, подпись и положение.
- Доступность 2 — 4,5:1 для текста, 3:1 для крупных марок.
- Доступность 3 — Короткий alt у графика; числа также HTML-таблицей.
- Доступность 4 — Движение только как акцент. Уважайте prefers-reduced-motion.
«Проверка контрастности WCAG»: чтите разница в яркости между передним и задним планом и меняйте, если судя по оттенку бренда, не измеряя пару.