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

Do4U проверява контраста на цветовете на марката и уебсайта ти. Въвеждаш цветовете си по един на ред и посочваш за какво е всеки цвят: текст, фон, акцент (например бутон) или рамка. Кодът изчислява съотношението на контраста за всяка двойка по формулата на WCAG и показва кои нива достига: AA и AAA за нормален и за едър текст и 3:1 за рамки, икони и площи на бутони. Стойностите не се закръглят нагоре. За всяка двойка, която не минава, получаваш най-близкия цвят, който минава – веднъж по-тъмен и веднъж по-светъл, в същия цветови тон. Do4U съставя и коригирана палитра и я проверява отново като цяло. Експортираш палитрата като CSS custom properties, SCSS променливи или JSON, а експортът се прави в браузъра ти. Всичко работи в код, без ИИ, и е безплатно.

Опитай сега Цени

Безплатно и без акаунт: Калкулатор на съотношението на контраста →

За кого е

За дизайнери, разработчици, агенции и собственици на уебсайтове, които избират цветове на марката или изграждат стилово ръководство и искат текст и бутони, които всеки може да прочете.

Типични приложения

Провери нова палитра на марката, преди да започне дизайнът
Намери сиво за второстепенен текст, което все още минава AA
Провери цветовете на бутони, връзки и рамки спрямо фона на страницата
Експортирай коригираните цветове като CSS променливи за своя стилов файл

Пример

Вход

#1a1a1a text #777777 text Secondary #ffffff background #cccccc border

Резултат

#1a1a1a върху #ffffff: 17.4:1, минава AA и AAA #777777 върху #ffffff: 4.47:1, не минава AA за нормален текст (минава за едър текст). По-тъмен: #767676 → 4.54:1. По-светъл: не е възможно #cccccc върху #ffffff: 1.6:1, не минава контраста за нетекстови елементи от 3:1. По-тъмен: #949494 → 3.03:1 Експорт (коригиран): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Фиксиран пример, съкратен. Реалните резултати са генерирани от AI: моля, провери ги.

Цена и лимити

Цена: безплатно, до 30 проверки на ден
Наличен с: Безплатен, С пакет
Лимит на въвеждане: До 3 000 знака на файл

Поверителност

Обработва се на наши собствени сървъри в ЕС (Полша). Входните данни и резултатите се изтриват след 7 дни (безплатен план) или 30 дни (пакети), или веднага след като видиш резултата, ако избереш да не се съхраняват. Изображенията се изтриват веднага след обработката.

В API

Име на инструмента: contrast_check. Създай задача с POST /api/v1/jobs и вземи резултата с GET /api/v1/jobs/{id}. API ключа си намираш в профила си.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Пълна документация на API →

Въпроси и отговори

Как се изчислява съотношението на контраста?

С формулата на WCAG 2.2: първо относителната яркост на всеки цвят, след това (L1 + 0.05) / (L2 + 0.05), където L1 е по-светлият цвят. Резултатът е между 1:1 и 21:1. Стойностите се сравняват без закръгляне, така че 4.49:1 не достига 4.5:1, а показването никога не закръгля нагоре.

Кои двойки се проверяват?

Текстът се проверява върху всеки фон и върху акцентните цветове – спрямо 4.5:1 и 7:1 за нормален текст и 3:1 и 4.5:1 за едър текст. Акцентните цветове и цветовете на рамките се проверяват върху фона спрямо 3:1 за контраст на нетекстови елементи. Цвят без роля се сравнява с всички останали цветове.

Как се намират предложените цветове?

Променя се само светлотата, в цветовото пространство OKLCH; цветовият тон остава същият. Do4U търси най-близкия цвят, който минава – веднъж по-тъмен и веднъж по-светъл – и го проверява отново като hex код. Ако никой цвят не може да мине спрямо даден фон, инструментът го казва.

Запазва ли се текстът ми?

Само толкова, колкото е нужно: 7 дни при безплатния план, 30 дни с пакет – или изобщо не, ако решиш да не го запазваш. Обработката става на наши собствени сървъри в ЕС (Полша).

Мога ли да използвам резултата веднага?

Резултатите са генерирани от ИИ. Моля, прочети ги, преди да ги публикуваш или изпратиш.

Свързани инструменти

Проверка на достъпността
Проверява страница за чести бариери и обяснява как да ги поправиш.
Обратна връзка за дизайн от екранна снимка
Качи екранна снимка на страница или приложение и получи номерирани, конкретни констатации за размера на бутоните, контраста, текста в изображенията, йерархията и разстоянията, всяка с рамка върху изображението. Оценка на ИИ, а не измерване.
Алтернативни текстове
Кратки описания на изображения за екранни четци и търсачки.

Всички инструменти →