Как сделать компоненты дизайна материала, такие как рябь кнопок и тени, совместимыми с доступностью AAA?

Question

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

Тень

Я хочу использовать тень материала .gmd-2 из этой кодовой ручки.Он использует две тени, одну с цветом rgba (0, 0, 0, 0.16), а другую с цветом rgba (0, 0, 0, 0.23), обе из которых терпят неудачу AA с белым фоном, согласно https://contrast -ratio.com .

Ripple

Я хочу использовать Волновая световая рябь , то есть цвет пульсации rgba (255,255,255,0.4), который не проходит AAA даже в черном цвете.

Answer 1

Вы должны измерить цветовой контраст текста, но не тени блоков.

Убедитесь, что все текстовые элементы имеют достаточный цветовой контраст между текстом на переднем плане и фоновым цветом за ним.

https://dequeuniversity.com/rules/axe/3.1/color-contrast?application=AxeChrome

Используйте правильные инструменты тестирования доступности https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd