Preskoči na vsebino
Začni

Preverjanje barvnega kontrasta

Do4U preveri kontrast barv tvoje blagovne znamke in spletnega mesta. Vneseš svoje barve, eno na vrstico, in navedeš, čemu je barva namenjena: besedilu, ozadju, poudarku (na primer gumbu) ali obrobi. Koda za vsak par izračuna kontrastno razmerje s formulo WCAG in pokaže, katere ravni doseže: AA in AAA za običajno in veliko besedilo ter 3:1 za obrobe, ikone in površine gumbov. Vrednosti se ne zaokrožujejo navzgor. Za vsak par, ki ne ustreza, dobiš najbližjo barvo, ki ustreza, enkrat temnejšo in enkrat svetlejšo, v istem odtenku. Do4U sestavi tudi prilagojeno paleto in jo znova preveri kot celoto. Paleto izvoziš kot lastnosti CSS po meri, spremenljivke SCSS ali JSON, izvoz pa nastane v tvojem brskalniku. Vse teče v kodi, brez UI, in je brezplačno.

Preizkusi zdaj Cenik

Brezplačno in brez računa: Kalkulator kontrastnega razmerja →

Za koga je

Za oblikovalce, razvijalce, agencije in lastnike spletnih mest, ki izbirajo barve blagovne znamke ali sestavljajo slogovni priročnik in želijo besedilo in gumbe, ki jih lahko prebere vsak.

Običajne uporabe

  • Preveri novo paleto blagovne znamke, preden se začne oblikovanje
  • Poišči sivo za sekundarno besedilo, ki še ustreza AA
  • Preveri barve gumbov, povezav in obrob glede na ozadje strani
  • Prilagojene barve izvozi kot spremenljivke CSS za svojo slogovno datoteko

Primer

Vnos

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

Rezultat

#1a1a1a na #ffffff: 17.4:1, ustreza AA in AAA #777777 na #ffffff: 4.47:1, ne ustreza AA za običajno besedilo (ustreza za veliko besedilo). Temneje: #767676 → 4.54:1. Svetleje: ni mogoče #cccccc na #ffffff: 1.6:1, ne ustreza kontrastu nebesedilnih elementov 3:1. Temneje: #949494 → 3.03:1 Izvoz (prilagojeno): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Fiksen primer, skrajšan. Pravi rezultati so ustvarjeni z umetno inteligenco: preveri jih.

Cena in omejitve

Cena
brezplačno, do 30 preverjanj na dan
Na voljo z
Brezplačno, S paketom
Omejitev vnosa
Do 3 000 znakov na datoteko

Zasebnost

Obdelava na naših strežnikih v EU (Poljska). Vnosi in rezultati se izbrišejo po 7 dneh (brezplačno) ali 30 dneh (paketi) ali takoj, ko vidiš rezultat, če izbereš, da se ne shranijo. Slike se izbrišejo takoj po obdelavi.

V API

Ime orodja: contrast_check. Opravilo ustvariš s POST /api/v1/jobs, rezultat pa dobiš z GET /api/v1/jobs/{id}. Svoj ključ API najdeš v svojem 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"]}'

Celotna dokumentacija API →

Vprašanja in odgovori

Kako se izračuna kontrastno razmerje?

S formulo WCAG 2.2: najprej relativna svetlost vsake barve, nato (L1 + 0.05) / (L2 + 0.05), pri čemer je L1 svetlejša barva. Rezultat je med 1:1 in 21:1. Vrednosti se primerjajo brez zaokroževanja, zato 4.49:1 ne doseže 4.5:1, prikaz pa nikoli ne zaokroži navzgor.

Kateri pari se preverijo?

Besedilo se preveri na vsakem ozadju in na barvah poudarkov, glede na 4.5:1 in 7:1 za običajno besedilo ter 3:1 in 4.5:1 za veliko besedilo. Barve poudarkov in obrob se preverijo na ozadju glede na 3:1 za kontrast nebesedilnih elementov. Barva brez vloge se primerja z vsemi drugimi barvami.

Kako se najdejo predlagane barve?

Spremeni se samo svetlost, v barvnem prostoru OKLCH; odtenek ostane enak. Do4U poišče najbližjo barvo, ki ustreza, enkrat temnejšo in enkrat svetlejšo, in jo znova preveri kot šestnajstiško kodo. Če nobena barva ne more ustrezati glede na ozadje, to pove.

Ali se moje besedilo shrani?

Samo toliko časa, kot je potrebno: 7 dni v brezplačnem paketu, 30 dni s plačljivim paketom – ali sploh ne, če se odločiš, da besedila ne shranimo. Obdelava poteka na naših lastnih strežnikih v EU (na Poljskem).

Ali lahko rezultat uporabim takoj?

Rezultate ustvari umetna inteligenca. Preberi jih, preden jih objaviš ali pošlješ.

Sorodna orodja

Vsa orodja →