Проверка доступности цветового контраста
Кто -нибудь работал с https://contrastchecker.com/
Я просто пробовал #FF0000 в качестве переднего плана и #FFFFFF в качестве фона. Это говорит AA 12 пунктов, AAA 12 пунктов, и AAA 18+ все терпят неудачу. Но тогда под "цветами" написано, что я прошел и полностью совместим с цветом? Как цвета могут не пройти типовой тест, но пройти тест на цвет?
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 смоделированных типов дальтонизма показывают очень разборчивый текст!
Несмотря на то, что тест типа не дал результата, результат стал более доступным!
Как указано во всплывающей подсказке над тестом "COLOR", это не только проверяет разницу в цвете (например, для дальтоников), но и разницу в яркости (которая является контрастом):
Это основано на разнице яркости и цвета. Проходной балл здесь означает, что вы полностью совместимы с цветом.
Это основано на старом рабочем проекте W3C под названием "Методы оценки доступности и инструменты для ремонта". См. Контрольную точку 2.2 - Убедитесь, что комбинации цветов переднего плана и фона обеспечивают достаточную контрастность при просмотре кем-то с недостатком цвета или при просмотре на черно-белом экране
Этот тест больше не рекомендуется и был заменен последними рекомендациями WCAG (и болезненными - но необходимыми - расчетами)