Разместите всю палитру в таблице проверки N×N — коэффициенты WCAG и APCA Lc для каждой пары передний план × фон, оценка за один взгляд.
| 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 |
Строки = цвет текста (передний план), столбцы = фон. Каждая ячейка отображает реальную пару передний план/фон с двумя метриками доступности: коэффициент WCAG (AA для основного текста ≥ 4,5, AA для крупного текста ≥ 3,0) и APCA Lc (75+ для основного текста, 60+ для крупного).
Все кандидатные цвета в одной матрице N×N — доступность для каждой пары «передний план × фон» одновременно.
Добавьте фирменные, семантические и нейтральные цвета (до 10). Строки — передние планы, столбцы — фоны.
Каждая ячейка показывает соотношение WCAG и Lc APCA. Точки загораются: для основного текста требуется Lc 75+, для крупного — 60+.
Запишите пары кнопок и пары основного текста в спецификацию дизайна; исключите неработающие комбинации до выпуска.
Три частых вопроса при полноматричных аудитациях.
Включите прошедшие пары в вашу семантическую палитру и спецификацию.
Проверка контраста по WCAG 2.1 между любым цветом переднего плана и фона.
Симуляция 8 типов нарушений цветового зрения для проверки доступности.
Де-факто стандарты для академических публикаций — Okabe-Ito (рекомендовано Nature Methods), серия Пола Тола, палитра журнала Nature NPG и перцептуально однородная viridis. Каждый образец имеет оценку контраста APCA, а ниже доступен симулятор цветового зрения на 8 типов, проверяющий каждую палитру в реальном времени.
Введите один фирменный цвет, получите основной / дополнительный / успешный / предупреждающий / опасный — экспортируется как конфигурация Tailwind и CSS-переменные.