Операционный
Войти / Зарегистрироваться
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Проверка цветового контраста
Реклама
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
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
Black on White
White on Blue
White on Dark Gray
Введите ниже свои цветовые комбинации, чтобы протестировать их с помощью нашей программы проверки цветового контраста и сразу увидеть, соответствуют ли они стандартам доступности.
Как работает наша программа проверки цветового контраста
Введите цвета переднего плана и фона, используя шестнадцатеричные значения 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 (около пикселей) или больше
Вы можете использовать пипетку в палитре цветов, чтобы получить точные цвета из любого объекта на экране.
Чтобы ссылки, выделяющиеся только за счет цвета, воспользуйтесь нашей проверкой цветового контраста, чтобы убедиться, что они соответствуют стандартам доступности и остаются легко читаемыми для всех.