Проверка цветового контраста
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Введите ниже свои цветовые комбинации, чтобы протестировать их с помощью нашей программы проверки цветового контраста и сразу увидеть, соответствуют ли они стандартам доступности.
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
WCAG Compliance
Normal Text
Large Text (18pt+ or 14pt+ bold)
UI Components & Graphics
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Как работает наша программа проверки цветового контраста
Введите цвета переднего плана и фона, используя шестнадцатеричные значения RGB, или выберите их напрямую с помощью Палитры цветов.
- Отрегулируйте Альфа, чтобы изменить прозрачность цвета переднего плана.
- Используйте ползунок Яркость, чтобы сделать цвет светлее или темнее.
Затем наш инструмент вычисляет коэффициент контрастности и проверяет его на соответствие рекомендациям WCAG:
- WCAG 2.0, уровень AA
- Не менее 4,5:1 для обычного основного текста.
- Минимум 3:1 для крупного текста.
- WCAG 2.1 (пользовательский интерфейс и графика)
- Минимум 3:1 для значков, границ и других компонентов интерфейса.
- Уровень WCAG AAA
- Не менее 7:1 для обычного текста.
- Не менее 4,5:1 для крупного текста.
Крупный текст означает либо:
- 14 пт (около 18,66 пикселей) жирным шрифтом или
- 18 pt (около пикселей) или больше
Вы можете использовать пипетку в палитре цветов, чтобы получить точные цвета из любого объекта на экране.
Чтобы ссылки, выделяющиеся только за счет цвета, воспользуйтесь нашей проверкой цветового контраста, чтобы убедиться, что они соответствуют стандартам доступности и остаются легко читаемыми для всех.