APCA: новый алгоритм для тестирования контраста в интерфейсах. WCAG все?

Проблема

Многие дизайнеры пользовательских интерфейсов, включая меня, сталкивались с необъективностью алгоритма WCAG при определении степени контраста текста. Примеры с кнопками, имеющими оранжевый фон и белый текст, или “серым” текстом на “черной” подложке, являются наглядными доказательствами этого.

Алгоритм расчета контраста в WCAG, использующий простую формулу и жесткие пороги, зачастую не является достаточно гибким, что делает его не идеальным в некоторых случаях.

Больше различных примеров неточности WCAG тут.

Предложенное решение

APCA (Advanced Perceptual Contrast Algorithm), являющийся частью модели SACAM (S-Luv Accessible Color Appearance Model), предлагает революционный подход. Основанный на современных исследованиях восприятия цвета, этот метод учитывает такие параметры как яркость, насыщенность, размер и расстояние текста, что обеспечивает более точное и гибкое определение контрастности.

APCA фокусируется на контрасте светлоты (Lightness Contrast или LC), предлагая более нюансированный подход к оценке контраста. Это особенно важно в случаях, где стандартные подходы WCAG могут оказаться неадекватными. Для наглядности, к посту приложены изображения, демонстрирующие шкалу контраста по APCA и сравнение с WCAG для “серых” текстов на “черном” фоне.

Больше информации о деталях работы алгоритма можно найти здесь: “The Easy Intro to the APCA Contrast Method”. Ну а для тех кто хочет погрузиться по полной, вот ссылка на GitHub Myndex — основных пропагандистов и создателей APCA.

Выводы

APCA показывает себя как гораздо более гибкий и удобный инструмент для дизайнера. Тем не менее, вероятно, потребуются годы для его интеграции на законодательном уровне стандарта в большинстве развитых стран, как это сейчас происходит с WCAG. Возможно, процесс ускорится, если APCA станет частью WCAG 3.0, для чего уже имеются некоторые предпосылки.

Кстати, в Chrome уже можно включить экспериментальную функцию, позволяющую заменить рекомендации по коэффициенту контрастности AA/AAA на APCA. Плагины в Figma тоже уже завезли, так что все готово для ваших персональных экспериментов 😉