Убедитесь, что ваш текст легко читается
Светло-серый текст на белом, белый текст на пастельной кнопке или синие ссылки на темном фоне могут выглядеть элегантно в дизайн-макете, но быть совершенно нечитаемыми для реальных пользователей. Этот инструмент проверки контрастности измеряет коэффициент контрастности между любым цветом текста и фона и мгновенно показывает, соответствует ли он Руководству по обеспечению доступности веб-контента (WCAG) уровней AA и AAA — а если нет, предлагает ближайший подходящий цвет.
Возможности
- Коэффициент контрастности от 1:1 до 21:1.
- Результаты по стандартам WCAG 2 AA и AAA для обычного текста, крупного текста и элементов интерфейса.
- Любой формат цвета: HEX, RGB, HSL или CSS-имена цветов.
- Предпросмотр в реальном времени с заголовком, основным и мелким текстом.
- Подбор доступных цветов с сохранением исходного оттенка.
- Кнопка смены цветов для проверки светлого текста на темном фоне.
Краткие требования WCAG
| Контент | AA | AAA |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст (≥ 24 px или ≥ 19 px жирный) | 3:1 | 4.5:1 |
| Элементы интерфейса и графика | 3:1 | — |
| Логотипы и декоративный текст | Нет требований | Нет требований |
Популярные комбинации
| Текст | Фон | Коэффициент | AA для обычного текста |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Проходит |
| #767676 | #FFFFFF | 4.54:1 | Проходит (самый светлый допустимый серый) |
| #999999 | #FFFFFF | 2.85:1 | Не проходит |
| #FFFFFF | #0EA5E9 | 2.77:1 | Не проходит |
| #FFFFFF | #0369A1 | 5.93:1 | Проходит |
Похожие инструменты
Конвертируйте цвета между форматами в Конвертере цветов, создавайте полноценные палитры в Генераторе цветовых палитр или определяйте точные цвета на скриншотах с помощью Пипетки для изображений.