Проверка контрастности цветов
Проверить WCAG АА и ААА текст контрастируют для непрозрачных шестицветных цветов. Просмотрите свою пару, поменяйтесь цветами и примените альтернативу текста с более высокой контрастностью.
Контрастный отчет
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
Текст экспорта остаётся на английском; введённые данные сохраняются без изменений.
Не подписывайся. Никаких кредитов. Этот инструмент собирает ваш вывод в вашем браузере.
От идеи к чему-то полезному.
- 01
Введите текст и фоновые цвета.
- 02
Проанализируйте расчетное соотношение и нормальные или широкотекстовые пороги.
- 03
Попробуйте предложенный цвет текста и экспортируйте результат.
Небольшой контекст.
Контрастные соотношения используют WCAG Формула относительной яркости для непрозрачных цветов sRGB. Для нормального текста АА требуется 4.5:1, а для большого текста АА требуется 3:1. Большой текст обычно означает не менее 24. CSS пикселей, или примерно 18,67; CSS Пиксели жирным шрифтом. Коэффициент сырости определяет результат перед округлением. Это проверка цвета, а не аудит доступности.
Хорошие вопросы.
Можно ли ввести прозрачные цвета?
Нет. Используйте непрозрачные трех- или шестизначные шестизначные значения. Составляйте прозрачные цвета на их окончательном фоне перед измерением.
Означает ли это, что моя страница доступна?
Нет. Навигация по клавиатуре, семантика, фокусировка, читаемые размеры и другие требования все еще нуждаются в тестировании. Инструмент оценивает только эту пару текста/фона.