Сітка контрасту

Розмістіть усю вашу палітру в одній N×N таблиці перевірки — співвідношення WCAG та APCA Lc для кожної пари передній план → фон, вирішуйте за одним поглядом.

Кожна комірка показує коефіцієнт WCAG та APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Проходження WCAG AA для звичайного тексту Тільки для великого тексту AA Невдача

Рядки = колір тексту (передній), стовпці = фон. Кожна комірка відображає реальну пару «передній на фоні» з двома метриками доступності: коефіцієнт WCAG (AA для звичайного тексту ≥ 4.5, AA для великого тексту ≥ 3.0) та APCA Lc (75+ для звичайного тексту, 60+ для великого).

Як перевірити всю палітру — додати, прочитати, вирішити.

Всі кандидатні кольори в одній матриці N×N — доступність для кожної пари передній план × задній план одночасно.

01
Додайте кольори
Додайте брендові, семантичні та нейтральні кольори (до 10). Рядки — передні плани, стовпці — задні плани.
02
Прочитайте таблицю
Кожна клітинка показує співвідношення WCAG та APCA Lc. Точки загоряються: для тексту основного шрифту потрібно Lc 75+, для великого тексту — 60+.
03
Прийняти рішення
Запишіть пари кнопок та пари тексту в технічні характеристики вашого дизайну; усуньте невідповідні комбінації перед випуском.

Часті питання про сітку контрастності

Три поширені запитання при перевірці повної матриці.

Чому не перевіряти пари по одній в інструменті контрастності?: 5 кольорів утворюють 30 спрямованих пар — перевірка по одній може пропустити щось. Сітка показує все одночасно і виявляє дзеркальні взаємозв'язки.
WCAG чи APCA — який з них враховувати?: WCAG 2.1 — це те, на що посилаються нормативні документи сьогодні; APCA є кандидатом на WCAG 3 і точніше відображає текст у темному режимі та з низькою контрастністю. Дотримуйтесь WCAG, оцінюйте за APCA.
Чому стовпці чорного та білого кольорів завжди присутні?: Чорний або білий текст є універсальним резервним варіантом — те, як колір поводиться по відношенню до обох, є базою для визначення семантичних кольорів.

Після аудиту

Додайте відповідні пари до вашої семантичної палітри та технічних характеристик.

Перевірка контрасту

Перевірка контрасту за WCAG 2.1 між будь-яким кольором переднього плану та фону.

Симулятор дальтонізму

Симулюйте 8 типів порушення кольорового зору для перевірки доступності.

Наукові палітри, безпечні для дальтоніків

Де-факто стандарти академічних видань — Okabe-Ito (рекомендований Nature Methods), серія Paul Tol, палітра журналу Nature NPG та перцептивно рівномірний Viridis. Кожен зразок має оцінку контрасту APCA, а симулятор 8 типів колірного зору внизу перевіряє кожну палітру в реальному часі.

Семантична палітра для UI

Введіть один брендовий колір, отримайте основний / другорядний / успіх / попередження / небезпеку — експортується як конфігурація Tailwind та CSS-змінні.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Як перевірити всю палітру — додати, прочитати, вирішити.

Додайте кольори

Додайте брендові, семантичні та нейтральні кольори (до 10). Рядки — передні плани, стовпці — задні плани.

Прочитайте таблицю

Кожна клітинка показує співвідношення WCAG та APCA Lc. Точки загоряються: для тексту основного шрифту потрібно Lc 75+, для великого тексту — 60+.

Прийняти рішення

Запишіть пари кнопок та пари тексту в технічні характеристики вашого дизайну; усуньте невідповідні комбінації перед випуском.

Часті питання про сітку контрастності

Три поширені запитання при перевірці повної матриці.

Чому не перевіряти пари по одній в інструменті контрастності?

5 кольорів утворюють 30 спрямованих пар — перевірка по одній може пропустити щось. Сітка показує все одночасно і виявляє дзеркальні взаємозв'язки.

WCAG чи APCA — який з них враховувати?

WCAG 2.1 — це те, на що посилаються нормативні документи сьогодні; APCA є кандидатом на WCAG 3 і точніше відображає текст у темному режимі та з низькою контрастністю. Дотримуйтесь WCAG, оцінюйте за APCA.

Чому стовпці чорного та білого кольорів завжди присутні?

Чорний або білий текст є універсальним резервним варіантом — те, як колір поводиться по відношенню до обох, є базою для визначення семантичних кольорів.