#javascript #google-chrome #google-chrome-devtools #accessibility #puppeteer
#javascript #google-chrome #google-chrome-devtools #Специальные возможности #кукловод
Вопрос:
Chrome представил опцию для своего средства визуализации (в инструментах разработчика) для эмуляции недостатков зрения, таких как дальтонизм. Однако эти «фильтры» не изменяют CSS или вычисляемые стили, к которым я могу получить доступ через JavaScript.
Есть ли способ программно получить отображаемый цвет элементов и текста после применения фильтра дефицита зрения, такого как Tritanopia в Chrome?
Ссылка на обновление разработчика Chrome для этой функции: что нового в DevTools (Chrome 83)
Я пробовал:
- Доступ
Element.styleчерез js на странице. - Использование
getComputedStyle. - Разное. Методы кукловода.
Ответ №1:
Не использовать инструменты разработчика Chrome или какие-либо текущие плагины для выбора цвета. Похоже, что фильтр применяется полностью отдельно к любым открытым значениям и применяется поверх верхней части страницы (самый простой способ увидеть это — выбрать «размытое зрение» в меню, вы увидите, что любые плагины также получают тот же эффект размытия).
Быстрый и грязный способ (не программно)
Лучше всего использовать анализатор цветового контраста от paciello group или аналогичное программное обеспечение, которое существует вне браузера и принимает фактические значения цвета пикселей после применения фильтров.
Очевидно, я знаю, что это не программно.
Программно
Вы могли бы создать что-то самостоятельно.
Вероятно, вы найдете эту страницу о симуляции дальтонизма в JS очень полезной, поскольку она объясняет, как выполнять преобразования цветов RGB для имитации дальтонизма. Затем все, что вам нужно сделать, это создать наложение средства выбора цвета (или что-то, во что вы можете ввести шестнадцатеричное значение и получить соответствующий цвет).
Альтернативным способом сделать это может быть добавление цветового фильтра SVG, который имитирует дальтонизм, на страницу, а затем просто использовать обычный плагин выбора цвета.
Возможно, добавьте запрос на эту функцию, поскольку это упростит жизнь!
Комментарии:
1. Спасибо за ваше предложение 🙂 Однако использование фильтров CSS или SVG, похоже, не изменяет значение, которое я могу получить программно. Знаете ли вы способ прочитать измененный цвет через javascript?
2. первая ссылка под названием «эта страница по симуляции дальтонизма в JS» содержит все необходимое для создания собственной. Нет способа прочитать измененный цвет с помощью JS , боюсь, из-за того, как применяются цветовые фильтры, единственным способом добиться этого было бы воспроизвести цветовые фильтры, а затем вычислить конечный цвет, чтобы вы могли получить конечный цвет. Вопрос действительно в том, почему вам нужно решить это программно, поскольку может быть лучший способ достичь вашей конечной цели.
3. Конечной целью будет полностью автоматическое тестирование контраста между текстовыми и фоновыми элементами даже для дальтоников, на большом количестве страниц с большим количеством элементов для проверки. В настоящее время я могу делать это только для обычных зрячих людей в больших масштабах.
4. Итак, вы бы использовали свой существующий метод для получения цветов переднего плана и фона. Прогоните их через матрицу дальтонизма JS , чтобы вычислить конечный цвет для каждого типа дальтонизма (как на переднем плане, так и на заднем плане), а затем протестируйте его с помощью формулы цветового контраста — см. Формула яркости и как рассчитать цветовой контраст
5. Большое спасибо за ссылки! Похоже, это путь вперед.