Проверка доступности цветового контраста

Question

кто-нибудь работал с https://contrastchecker.com/

Я только что пробовал # FF0000 в качестве переднего плана и #FFFFFF в качестве фона.Это говорит AA 12 пунктов, AAA 12 пунктов, и AAA 18+ все терпят неудачу.Но тогда под "цветами" написано, что я прошел и полностью совместим с цветом?Как цвета могут не пройти типовой тест, но пройти тест на цвет?

Answer 1

Как указано во всплывающей подсказке к тесту «ЦВЕТ», это не только проверяет разницу в цвете (например, для дальтоников), но и разницу яркости (которая является контрастом):

Это основано на яркости и цвете разницы.Проходной балл здесь означает, что вы полностью совместимы с цветом.

Это основано на старом рабочем проекте W3C под названием «Методы оценки доступности и инструменты для ремонта».См. Контрольная точка 2.2 - Убедитесь, что комбинации цветов переднего плана и фона обеспечивают достаточную контрастность при просмотре кем-либо с цветовым дефицитом или при просмотре на черно-белом экране

Этот тест больше не проводитсярекомендуется и был заменен последними рекомендациями WCAG (и болезненными - но необходимыми - расчетами)

Answer 2

Итак, здесь есть несколько различных метрик.

Тест TYPE измеряет контрастность между передним и задним планом - эта метрика сначала основана на относительной яркости типана переднем плане и яркости фона, эти значения яркости затем используются для вычисления контрастности.

Тест COLOR измеряет разницу оттенок между передним планом и фоном - оттенок отличаетсявычисление, а не контраст, так что один может потерпеть неудачу, в то время как другой проходит.

В большинстве случаев рекомендуется выбирать цвета на основе результатов теста TYPE ( контраст ),но есть случаи, когда результат будет менее доступным.

---

Paciello Group делает действительно отличное приложение для анализа контрастности:
https://developer.paciellogroup.com/resources/contrastanalyser/

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

---

Пример:

Красный (# FF0000) Передний план и Черный (# 000000) Фон
- Пропускает мелкий текст АА и большой текст ААА ссоотношение 5,3: 1
- не соответствует разнице в цвете со значением 255 (минимум 500)
- не соответствует разнице яркости со значением 76 (минимум 125)
- 3/5 моделируемых типовдальтонизмом показывает тип как почти невидимый!
Даже если тест типа ПРОЙДЕТ, результат недоступен!


Красный (# FF0000)Передний и белый (#FFFFFF) фон
- пропускает только крупный текст АА с соотношением 4: 1
- пропускает разницу цветов со значением 510 (минимум 500)
- пропускает яркостьразница со значением 179 (минимум 125)
- 5/5 смоделированные типы дальтонизма показывают очень разборчивый текст!
Несмотря на то, что при типовом тесте FAILS результат более доступен!