Spalvų kontrasto patikra

Do4U patikrina tavo prekės ženklo ir svetainės spalvų kontrastą. Įvedi savo spalvas, po vieną eilutėje, ir nurodai, kam skirta kiekviena spalva: text (tekstas), background (fonas), accent (akcentas, pavyzdžiui, mygtukas) ar border (rėmelis). Kodas kiekvienai porai apskaičiuoja kontrasto santykį pagal WCAG formulę ir parodo, kokius lygius ji pasiekia: AA ir AAA įprastam ir dideliam tekstui bei 3:1 rėmeliams, piktogramoms ir mygtukų sritims. Reikšmės neapvalinamos į didesnę pusę. Kiekvienai netinkamai porai gauni artimiausią tinkamą spalvą, vieną tamsesnę ir vieną šviesesnę, to paties atspalvio. Do4U taip pat sudaro pakoreguotą paletę ir dar kartą patikrina ją visą. Paletę eksportuoji kaip CSS custom properties, SCSS kintamuosius ar JSON, o eksportas sukuriamas tavo naršyklėje. Viskas veikia kodu, be DI, ir nemokamai.

Išbandyk dabar Kainos

Nemokamai ir be paskyros: Kontrasto santykio skaičiuoklė →

Kam skirta

Dizaineriams, programuotojams, agentūroms ir svetainių savininkams, kurie renkasi prekės ženklo spalvas ar kuria stiliaus vadovą ir nori, kad tekstą ir mygtukus galėtų perskaityti visi.

Tipiniai panaudojimai

Patikrink naują prekės ženklo paletę prieš pradedant dizainą
Rask pilką spalvą antriniam tekstui, kuri vis dar atitinka AA
Patikrink mygtukų, nuorodų ir rėmelių spalvas puslapio fono atžvilgiu
Eksportuok pakoreguotas spalvas kaip CSS kintamuosius savo stilių failui

Pavyzdys

Įvestis

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

Rezultatas

#1a1a1a ant #ffffff: 17.4:1, atitinka AA ir AAA #777777 ant #ffffff: 4.47:1, neatitinka AA įprastam tekstui (atitinka dideliam tekstui). Tamsesnė: #767676 → 4.54:1. Šviesesnė: neįmanoma #cccccc ant #ffffff: 1.6:1, neatitinka 3:1 ne teksto kontrasto. Tamsesnė: #949494 → 3.03:1 Eksportas (pakoreguotas): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Fiksuotas, sutrumpintas pavyzdys. Tikrus rezultatus sukuria DI: patikrink juos.

Kaina ir limitai

Kaina: nemokamai, iki 30 patikrų per dieną
Prieinama su: Nemokamas, Su paketu
Įvesties limitas: Iki 3 000 simbolių faile

Privatumas

Apdorojama mūsų pačių serveriuose ES (Lenkijoje). Įvestis ir rezultatai ištrinami po 7 d. (nemokamas) arba 30 d. (paketai), o jei pasirenki jų nesaugoti – iškart po to, kai pamatai rezultatą. Paveikslėliai ištrinami iškart po apdorojimo.

API

Įrankio pavadinimas: contrast_check. Sukurk užduotį su POST /api/v1/jobs ir gauk rezultatą su GET /api/v1/jobs/{id}. Savo API raktą rasi savo paskyroje.

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

Visa API dokumentacija →

Klausimai ir atsakymai

Kaip apskaičiuojamas kontrasto santykis?

Pagal WCAG 2.2 formulę: pirmiausia kiekvienos spalvos santykinis skaistis, tada (L1 + 0.05) / (L2 + 0.05), kur L1 yra šviesesnė spalva. Rezultatas yra nuo 1:1 iki 21:1. Reikšmės lyginamos neapvalinant, todėl 4.49:1 nepasiekia 4.5:1, o rodinys niekada neapvalina į didesnę pusę.

Kokios poros tikrinamos?

Tekstas tikrinamas ant kiekvieno fono ir ant akcentinių spalvų pagal 4.5:1 ir 7:1 įprastam tekstui bei 3:1 ir 4.5:1 dideliam tekstui. Akcentų ir rėmelių spalvos tikrinamos ant fono pagal 3:1 ne teksto kontrastui. Spalva be paskirties lyginama su visomis kitomis spalvomis.

Kaip randamos siūlomos spalvos?

Keičiamas tik šviesumas OKLCH spalvų erdvėje; atspalvis lieka toks pats. Do4U ieško artimiausios tinkamos spalvos, vienos tamsesnės ir vienos šviesesnės, ir dar kartą ją patikrina kaip šešioliktainį kodą. Jei jokia spalva ant fono negali būti tinkama, tai ir pasakoma.

Ar mano tekstas saugomas?

Tik tiek, kiek reikia: 7 d. nemokamame plane, 30 d. su paketu – arba išvis ne, jei pasirinksi jo nesaugoti. Apdorojimas vyksta mūsų pačių serveriuose ES (Lenkijoje).

Ar rezultatą galiu naudoti iškart?

Rezultatai sukuriami DI. Prieš skelbdamas ar siųsdamas juos perskaityk.

Susiję įrankiai

Prieinamumo patikra
Tikrina puslapį dėl dažnų kliūčių ir paaiškina, kaip jas ištaisyti.
Dizaino atsiliepimas pagal ekrano nuotrauką
Įkelk puslapio ar programėlės ekrano nuotrauką ir gauk sunumeruotas, konkrečias pastabas apie mygtukų dydį, kontrastą, tekstą paveikslėliuose, hierarchiją ir tarpus, kiekvieną su rėmeliu paveikslėlyje. DI vertinimas, o ne matavimas.
Alternatyvusis tekstas
Trumpi paveikslėlių aprašymai ekrano skaitytuvams ir paieškos sistemoms.

Visi įrankiai →