Provjera kontrasta boja

Do4U provjerava kontrast boja tvoje marke i web-mjesta. Uneseš svoje boje, jednu po retku, i navedeš čemu služi svaka boja: tekst, pozadina, naglasak (na primjer gumb) ili obrub. Kôd formulom WCAG izračunava omjer kontrasta svakog para i pokazuje koje razine postiže: AA i AAA za normalan i velik tekst te 3:1 za obrube, ikone i površine gumba. Vrijednosti se ne zaokružuju naviše. Za svaki par koji ne prolazi dobivaš najbližu boju koja prolazi, jednom tamniju i jednom svjetliju, u istoj nijansi. Do4U izrađuje i prilagođenu paletu te je ponovno provjerava u cjelini. Paletu izvoziš kao prilagođena CSS svojstva, SCSS varijable ili JSON, a izvoz se izrađuje u tvom pregledniku. Sve radi u kôdu, bez AI-ja, i besplatno je.

Isprobaj odmah Cijene

Besplatno i bez računa: Kalkulator omjera kontrasta →

Za koga je

Za dizajnere, programere, agencije i vlasnike web-mjesta koji biraju boje marke ili izrađuju stilski vodič i žele tekst i gumbe koje svatko može pročitati.

Tipične primjene

Provjeri novu paletu marke prije početka dizajna
Pronađi sivu za sporedni tekst koja i dalje prolazi AA
Provjeri boje gumba, poveznica i obruba u odnosu na pozadinu stranice
Izvezi prilagođene boje kao CSS varijable za svoju stilsku datoteku

Primjer

Unos

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

Rezultat

#1a1a1a na #ffffff: 17.4:1, prolazi AA i AAA #777777 na #ffffff: 4.47:1, ne prolazi AA za normalan tekst (prolazi za velik tekst). Tamnije: #767676 → 4.54:1. Svjetlije: nije moguće #cccccc na #ffffff: 1.6:1, ne prolazi netekstualni kontrast od 3:1. Tamnije: #949494 → 3.03:1 Izvoz (prilagođeno): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Fiksni primjer, skraćen. Stvarne rezultate generira AI: provjeri ih.

Cijena i ograničenja

Cijena: besplatno, do 30 provjera dnevno
Dostupno uz: Besplatno, Uz paket
Ograničenje unosa: Do 3 000 znakova po datoteci

Privatnost

Obrada na našim vlastitim poslužiteljima u EU-u (Poljska). Unosi i rezultati brišu se nakon 7 dana (Free) ili 30 dana (paketi), ili odmah nakon što vidiš rezultat ako odabereš da se ne spremaju. Slike se brišu odmah nakon obrade.

U API-ju

Naziv alata: contrast_check. Izradi zadatak s POST /api/v1/jobs i dohvati rezultat s GET /api/v1/jobs/{id}. Svoj API ključ pronaći ćeš u svom računu.

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

Potpuna API dokumentacija →

Pitanja i odgovori

Kako se izračunava omjer kontrasta?

Formulom iz WCAG 2.2: najprije relativna luminancija svake boje, zatim (L1 + 0.05) / (L2 + 0.05), pri čemu je L1 svjetlija boja. Rezultat je između 1:1 i 21:1. Vrijednosti se uspoređuju bez zaokruživanja, pa 4.49:1 ne doseže 4.5:1, a prikaz nikad ne zaokružuje naviše.

Koji se parovi provjeravaju?

Tekst se provjerava na svakoj pozadini i na bojama naglaska, prema 4.5:1 i 7:1 za normalan tekst te 3:1 i 4.5:1 za velik tekst. Boje naglaska i obruba provjeravaju se na pozadini prema 3:1 za netekstualni kontrast. Boja bez uloge uspoređuje se sa svim ostalim bojama.

Kako se pronalaze predložene boje?

Mijenja se samo svjetlina, u prostoru boja OKLCH; nijansa ostaje ista. Do4U traži najbližu boju koja prolazi, jednom tamniju i jednom svjetliju, i ponovno je provjerava kao heksadecimalni kôd. Ako nijedna boja ne može proći na nekoj pozadini, to i kaže.

Pohranjuje li se moj tekst?

Samo onoliko dugo koliko je potrebno: 7 dana u paketu Free, 30 dana uz paket – ili uopće ne, ako odabereš da se ne pohranjuje. Obrada se odvija na našim vlastitim poslužiteljima u EU (Poljska).

Mogu li rezultat odmah upotrijebiti?

Rezultate generira UI. Pročitaj ih prije nego što ih objaviš ili pošalješ.

Srodni alati

Provjera pristupačnosti
Provjerava stranicu na uobičajene prepreke i objašnjava kako ih ukloniti.
Povratna informacija o dizajnu iz snimke zaslona
Prenesi snimku zaslona stranice ili aplikacije i dobij numerirane, konkretne nalaze o veličini gumba, kontrastu, tekstu u slikama, hijerarhiji i razmacima, svaki s okvirom na slici. Procjena AI-ja, a ne mjerenje.
Alt tekstovi
Kratki opisi slika za čitače zaslona i tražilice.

Svi alati →