Värvikontrasti kontroll

Do4U kontrollib sinu brändi ja veebisaidi värvide kontrasti. Sisestad oma värvid, ühe rea kohta, ja ütled, milleks iga värv on: tekst, taust, rõhuvärv (näiteks nupp) või ääris. Kood arvutab iga paari kontrastsuhte WCAG valemiga ja näitab, milliseid tasemeid see saavutab: AA ja AAA tavalise ja suure teksti jaoks ning 3:1 äärisete, ikoonide ja nupualade jaoks. Väärtusi ei ümardata üles. Iga paari jaoks, mis ei vasta, saad lähima vastava värvi, kord tumedama ja kord heledama, samas toonis. Do4U koostab ka kohandatud paleti ja kontrollib seda tervikuna uuesti. Ekspordid paleti CSS-i kohandatud omadustena, SCSS-muutujatena või JSON-ina ning eksport tehakse sinu brauseris. Kõik toimub koodis, ilma TI-ta, ja see on tasuta.

Proovi kohe Hinnad

Tasuta ja ilma kontota: Kontrastsuhte kalkulaator →

Kellele see on

Disaineritele, arendajatele, agentuuridele ja veebisaitide omanikele, kes valivad brändivärve või koostavad stiilijuhendit ning soovivad teksti ja nuppe, mida kõik saavad lugeda.

Tüüpilised kasutusviisid

Kontrolli uut brändipaletti enne disaini algust
Leia teisese teksti jaoks hall, mis vastab endiselt AA-le
Kontrolli nupu-, lingi- ja äärisevärve lehe tausta suhtes
Ekspordi kohandatud värvid CSS-muutujatena oma stiilifaili jaoks

Näide

Sisend

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

Tulemus

#1a1a1a taustal #ffffff: 17.4:1, vastab AA-le ja AAA-le #777777 taustal #ffffff: 4.47:1, ei vasta AA-le tavalise teksti puhul (suure teksti puhul vastab). Tumedam: #767676 → 4.54:1. Heledam: pole võimalik #cccccc taustal #ffffff: 1.6:1, ei vasta mittetekstilise kontrasti nõudele 3:1. Tumedam: #949494 → 3.03:1 Eksport (kohandatud): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Kindel näide, lühendatud. Päris tulemused on loonud TI: palun kontrolli neid.

Hind ja piirangud

Hind: tasuta, kuni 30 kontrolli päevas
Saadaval: Tasuta, Paketiga
Sisendipiirang: Kuni 3 000 märki faili kohta

Privaatsus

Töötlus meie oma serverites ELis (Poolas). Sisendid ja tulemused kustutatakse 7 päeva (tasuta) või 30 päeva (paketid) järel või kohe pärast tulemuse nägemist, kui valid nende mittesalvestamise. Pildid kustutatakse kohe pärast töötlemist.

API-s

Tööriista nimi: contrast_check. Loo töö päringuga POST /api/v1/jobs ja too tulemus päringuga GET /api/v1/jobs/{id}. Oma API-võtme leiad oma kontolt.

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

Täielik API dokumentatsioon →

Küsimused ja vastused

Kuidas kontrastsuhe arvutatakse?

WCAG 2.2 valemiga: kõigepealt iga värvi suhteline heledus, seejärel (L1 + 0.05) / (L2 + 0.05), kus L1 on heledam värv. Tulemus on vahemikus 1:1 kuni 21:1. Väärtusi võrreldakse ümardamata, seega 4.49:1 ei saavuta 4.5:1 ja kuva ei ümarda kunagi üles.

Milliseid paare kontrollitakse?

Teksti kontrollitakse igal taustal ja rõhuvärvidel tavalise teksti puhul nõuete 4.5:1 ja 7:1 ning suure teksti puhul nõuete 3:1 ja 4.5:1 järgi. Rõhu- ja äärisevärve kontrollitakse taustal mittetekstilise kontrasti nõude 3:1 järgi. Rollita värvi võrreldakse kõigi teiste värvidega.

Kuidas soovitatud värvid leitakse?

Muutub ainult heledus OKLCH-värviruumis; toon jääb samaks. Do4U otsib lähimat vastavat värvi, kord tumedamat ja kord heledamat, ning kontrollib seda uuesti heksakoodina. Kui ükski värv ei saa tausta suhtes vastata, ütleb see seda.

Kas minu tekst salvestatakse?

Ainult nii kaua, kui vaja: tasuta paketis 7 päeva, paketiga 30 päeva – või üldse mitte, kui valid mittesalvestamise. Töötlus toimub meie oma serverites ELis (Poolas).

Kas saan tulemust kohe kasutada?

Tulemused on loonud TI. Palun loe need läbi, enne kui need avaldad või saadad.

Seotud tööriistad

Ligipääsetavuse kontroll
Kontrollib lehte levinud takistuste suhtes ja selgitab, kuidas neid parandada.
Disainitagasiside ekraanipildist
Laadi üles lehe või rakenduse ekraanipilt ja saa nummerdatud, konkreetsed leiud nuppude suuruse, kontrasti, piltides oleva teksti, hierarhia ja vahede kohta, igaüks raamiga pildil. TI hinnang, mitte mõõtmine.
Alt-tekstid
Lühikesed pildikirjeldused ekraanilugejatele ja otsingumootoritele.

Kõik tööriistad →