Kontrola farebného kontrastu

Do4U kontroluje kontrast farieb tvojej značky a webu. Zadáš svoje farby, jednu na riadok, a uvedieš, na čo každá slúži: text, pozadie, akcent (napríklad tlačidlo) alebo okraj. Kód vypočíta kontrastný pomer každej dvojice podľa vzorca WCAG a ukáže, ktoré úrovne dosahuje: AA a AAA pre bežný a veľký text a 3:1 pre okraje, ikony a plochy tlačidiel. Hodnoty sa nezaokrúhľujú nahor. Pre každú dvojicu, ktorá nevyhovuje, dostaneš najbližšiu vyhovujúcu farbu, raz tmavšiu a raz svetlejšiu, v rovnakom odtieni. Do4U vytvorí aj upravenú paletu a znova ju skontroluje ako celok. Paletu exportuješ ako vlastné vlastnosti CSS, premenné SCSS alebo JSON a export sa vytvorí v tvojom prehliadači. Všetko beží v kóde, bez AI, a je to zadarmo.

Vyskúšať hneď Cenník

Zadarmo a bez účtu: Kalkulačka kontrastného pomeru →

Pre koho je

Pre dizajnérov, vývojárov, agentúry a majiteľov webov, ktorí vyberajú farby značky alebo tvoria štýlovú príručku a chcú text a tlačidlá, ktoré si prečíta každý.

Typické použitie

Skontroluj novú paletu značky pred začiatkom dizajnu
Nájdi sivú pre vedľajší text, ktorá ešte vyhovuje AA
Skontroluj farby tlačidiel, odkazov a okrajov voči pozadiu stránky
Exportuj upravené farby ako CSS premenné pre svoj štýl

Príklad

Vstup

#1a1a1a text #777777 text Vedľajší #ffffff background #cccccc border

Výsledok

#1a1a1a na #ffffff: 17,4:1, vyhovuje AA aj AAA #777777 na #ffffff: 4,47:1, nevyhovuje AA pre bežný text (vyhovuje pre veľký text). Tmavšia: #767676 → 4,54:1. Svetlejšia: nie je možné #cccccc na #ffffff: 1,6:1, nevyhovuje netextovému kontrastu 3:1. Tmavšia: #949494 → 3,03:1 Export (upravené): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Pevný príklad, skrátený. Skutočné výsledky generuje AI: skontroluj ich.

Cena a limity

Cena: zadarmo, najviac 30 kontrol denne
Dostupné s: Zadarmo, S balíkom
Limit vstupu: Najviac 3 000 znakov na súbor

Ochrana súkromia

Spracované na našich vlastných serveroch v EÚ (Poľsko). Vstupy a výsledky sa odstránia po 7 dňoch (Zadarmo) alebo 30 dňoch (balíky), alebo hneď po zobrazení výsledku, ak zvolíš, že sa nemajú ukladať. Obrázky sa odstránia hneď po spracovaní.

V API

Názov nástroja: contrast_check. Úlohu vytvoríš cez POST /api/v1/jobs a výsledok načítaš cez GET /api/v1/jobs/{id}. Svoj kľúč API nájdeš vo svojom účte.

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á dokumentácia API →

Otázky a odpovede

Ako sa vypočíta kontrastný pomer?

Podľa vzorca WCAG 2.2: najprv relatívna svietivosť každej farby, potom (L1 + 0,05) / (L2 + 0,05), kde L1 je svetlejšia farba. Výsledok je medzi 1:1 a 21:1. Hodnoty sa porovnávajú bez zaokrúhľovania, takže 4,49:1 nedosahuje 4,5:1 a zobrazenie nikdy nezaokrúhľuje nahor.

Ktoré dvojice sa kontrolujú?

Text sa kontroluje na každom pozadí a na farbách akcentu, voči 4,5:1 a 7:1 pre bežný text a 3:1 a 4,5:1 pre veľký text. Farby akcentu a okrajov sa kontrolujú na pozadí voči 3:1 pre netextový kontrast. Farba bez roly sa porovná so všetkými ostatnými farbami.

Ako sa hľadajú navrhované farby?

Mení sa iba svetlosť, vo farebnom priestore OKLCH; odtieň zostáva rovnaký. Do4U hľadá najbližšiu vyhovujúcu farbu, raz tmavšiu a raz svetlejšiu, a znova ju skontroluje ako hex kód. Ak na danom pozadí nemôže vyhovieť žiadna farba, povie to.

Ukladá sa môj text?

Iba tak dlho, ako je potrebné: 7 dní vo verzii Free, 30 dní s balíkom – alebo vôbec, ak sa rozhodneš text neukladať. Spracovanie prebieha na našich vlastných serveroch v EÚ (Poľsko).

Môžem výsledok použiť hneď?

Výsledky generuje AI. Pred zverejnením alebo odoslaním si ich, prosím, prečítaj.

Súvisiace nástroje

Kontrola prístupnosti
Skontroluje stránku na bežné bariéry a vysvetlí, ako ich opraviť.
Spätná väzba k dizajnu zo snímky obrazovky
Nahraj snímku obrazovky stránky alebo aplikácie a získaj očíslované, konkrétne zistenia o veľkosti tlačidiel, kontraste, texte v obrázkoch, hierarchii a rozostupoch, každé s rámčekom na obrázku. Hodnotenie AI, nie meranie.
Alternatívne texty
Krátke popisy obrázkov pre čítačky obrazovky a vyhľadávače.

Všetky nástroje →