iconicon
К списку сервисов

Проверка контраста цветов

imageimage
Цвет текста
Цвет фона
5.58
Средний контраст
AAA
Крупный текст
Обычный текст
AA
Крупный текст
Обычный текст
Пример текста
Когда-то Пабло Пикассо сказал: «Хорошие художники копируют, великие художники крадут». Мы никогда не стыдились воровать гениальные идеи у других».
Автор — Стив Джобс

Как это работает?

Наш сервис использует гайдлайны Web Content Accessibility Guidelines (WCAG) для расчёта коэффициента контрастности цветов. Мы оцениваем разницу между яркостью двух цветов. Это позволяет узнать, насколько хорошо пользователи различают текст на фоне. Разница измеряется по шкале соотношений, которая начинается с 1:1 (для белого на белом) до 21:1 (для чёрного на белом).

Стандарты WCAG определяют два уровня коэффициента контрастности: АА (минимальная контрастность) и ААА (повышенная контрастность).

  • Уровень АА требует, чтобы коэффициент контрастности был не менее 4,5:1 для обычного текста (до 17pt) и 3:1 для крупного текста (не менее 18pt) или жирного текста.
  • Уровень ААА требует коэффициента контрастности не менее 7:1 для обычного текста и 4,5:1 для крупного текста или жирного текста.

Коэффициент контрастности цветов важен для того, чтобы текст был доступен и удобен для чтения всем. Поэтому очень важно сделать контент удобным, дружелюбным и доступным для всех пользователей.

Материалы по теме

preview-color.jpg

Психология цвета в веб-дизайне: как оттенки влияют на поведение пользователей

Согласно исследованию Seoul International Color Expo, 84,7% потребителей называют цвет одним из главных факторов при принятии решения о покупке. А данные Google показывают, что первое впечатление о сайте формируется всего за 50 миллисекунд
UI
Цвет
preview-colors.jpg

Цвет в UI-дизайне: ключевые тренды 2026 года

К 2026 году, когда борьба за внимание пользователя станет еще более острой. Разбираем ключевые тренды и принципы, которые будут определять работу с цветом в ближайшем будущем.
Тренды
Цвета
preview-3.png

Искусство цвета: как подобрать палитру для интерфейса, которая работает

Когда дело доходит до подбора цветов, важно не выбрать первые понравившиеся оттенки, а создать гармоничную палитру. Звучит всё очень просто, но почему тогда некоторые интерфейсы выглядят так, будто их создавали вслепую?
Психология
Цвет
image-56-3.png

Цвет и его свойства в web: что такое RGB и как им правильно пользоваться?

Разбираемся, как настраивать цвет в вебе, что такое RGB, HEX, и как вообще понять эти странные комбинации цифр и букв при выборе цветовой палитры.
UI
Цвет

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy