Kontrola barevného kontrastu

Do4U zkontroluje kontrast barev tvé značky a webu. Zadáš své barvy, jednu na řádek, a uvedeš, k čemu každá barva slouží: text, pozadí, zvýraznění (například tlačítko) nebo okraj. Kód spočítá kontrastní poměr každé dvojice podle vzorce WCAG a ukáže, jakých úrovní dosahuje: AA a AAA pro běžný a velký text a 3:1 pro okraje, ikony a plochy tlačítek. Hodnoty se nezaokrouhlují nahoru. Pro každou dvojici, která nevyhoví, dostaneš nejbližší vyhovující barvu, jednou tmavší a jednou světlejší, ve stejném odstínu. Do4U také sestaví upravenou paletu a znovu ji zkontroluje jako celek. Paletu exportuješ jako vlastní vlastnosti CSS, proměnné SCSS nebo JSON a export vzniká v tvém prohlížeči. Vše běží v kódu, bez AI, a je to zdarma.

Vyzkoušet hned Ceník

Zdarma a bez účtu: Kalkulačka kontrastního poměru →

Pro koho je

Pro designéry, vývojáře, agentury a majitele webů, kteří vybírají barvy značky nebo sestavují stylový průvodce a chtějí text a tlačítka, která přečte každý.

Typické použití

Zkontrolovat novou paletu značky před začátkem návrhu
Najít šedou pro vedlejší text, která stále splní AA
Zkontrolovat barvy tlačítek, odkazů a okrajů vůči pozadí stránky
Exportovat upravené barvy jako proměnné CSS pro tvůj soubor stylů

Příklad

Vstup

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

Výsledek

#1a1a1a na #ffffff: 17.4:1, splňuje AA i AAA #777777 na #ffffff: 4.47:1, nesplňuje AA pro běžný text (pro velký text vyhovuje). Tmavší: #767676 → 4.54:1. Světlejší: není možné #cccccc na #ffffff: 1.6:1, nesplňuje netextový kontrast 3:1. Tmavší: #949494 → 3.03:1 Export (upravený): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Pevný příklad, zkrácený. Skutečné výsledky vytváří AI: zkontroluj je prosím.

Cena a limity

Cena: zdarma, až 30 kontrol denně
K dispozici s: Zdarma, S balíčkem
Limit vstupu: Nejvýše 3 000 znaků na soubor

Soukromí

Zpracováváme na vlastních serverech v EU (Polsko). Vstupy a výsledky se mažou po 7 dnech (Zdarma) nebo po 30 dnech (balíčky), případně hned po zobrazení výsledku, pokud zvolíš, že se neukládají. Obrázky se mažou hned po zpracování.

V API

Název nástroje: contrast_check. Úlohu vytvoříš pomocí POST /api/v1/jobs a výsledek získáš pomocí GET /api/v1/jobs/{id}. Svůj klíč API najdeš ve svém účtu.

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"]}'

Úplná dokumentace API →

Otázky a odpovědi

Jak se počítá kontrastní poměr?

Podle vzorce WCAG 2.2: nejprve relativní jas každé barvy, pak (L1 + 0.05) / (L2 + 0.05), kde L1 je světlejší barva. Výsledek je mezi 1:1 a 21:1. Hodnoty se porovnávají bez zaokrouhlení, takže 4.49:1 nedosahuje 4.5:1, a zobrazení nikdy nezaokrouhluje nahoru.

Které dvojice se kontrolují?

Text se kontroluje na každém pozadí a na barvách zvýraznění, vůči 4.5:1 a 7:1 pro běžný text a 3:1 a 4.5:1 pro velký text. Barvy zvýraznění a okrajů se kontrolují na pozadí vůči 3:1 pro netextový kontrast. Barva bez role se porovná se všemi ostatními barvami.

Jak se hledají navržené barvy?

Mění se jen světlost, v barevném prostoru OKLCH; odstín zůstává stejný. Do4U hledá nejbližší vyhovující barvu, jednou tmavší a jednou světlejší, a znovu ji zkontroluje jako hex kód. Pokud žádná barva na daném pozadí vyhovět nemůže, řekne to.

Ukládá se můj text?

Pouze tak dlouho, jak je potřeba: 7 dní v tarifu Free, 30 dní s balíčkem – nebo vůbec, pokud se rozhodneš text neukládat. Zpracování probíhá na našich vlastních serverech v EU (v Polsku).

Můžu výsledek hned použít?

Výsledky vytváří AI. Než je zveřejníš nebo odešleš, prosím si je přečti.

Související nástroje

Kontrola přístupnosti
Zkontroluje stránku na běžné bariéry a vysvětlí, jak je odstranit.
Zpětná vazba k designu ze snímku obrazovky
Nahraj snímek obrazovky stránky nebo aplikace a získej očíslované konkrétní nálezy k velikosti tlačítek, kontrastu, textu v obrázcích, hierarchii a mezerám, každý s rámečkem na obrázku. Posouzení AI, ne měření.
Alternativní texty
Krátké popisy obrázků pro čtečky obrazovky a vyhledávače.

Všechny nástroje →