Verificarea contrastului culorilor

Do4U verifică contrastul culorilor brandului și site-ului tău. Introduci culorile, câte una pe rând, și spui la ce folosește fiecare: text, fundal, accent (de exemplu un buton) sau chenar. Codul calculează raportul de contrast al fiecărei perechi cu formula WCAG și arată ce niveluri atinge: AA și AAA pentru text normal și text mare și 3:1 pentru chenare, pictograme și suprafețele butoanelor. Valorile nu sunt rotunjite în sus. Pentru fiecare pereche care nu trece primești cea mai apropiată culoare care trece, o dată mai închisă și o dată mai deschisă, în aceeași nuanță. Do4U construiește și o paletă ajustată și o verifică din nou în ansamblu. Exporți paleta ca proprietăți CSS personalizate, variabile SCSS sau JSON, iar exportul se face în browserul tău. Totul rulează în cod, fără IA, și este gratuit.

Încearcă acum Prețuri

Gratuit și fără cont: Calculator pentru raportul de contrast →

Pentru cine este

Pentru designeri, dezvoltatori, agenții și proprietari de site-uri care aleg culorile brandului sau construiesc un ghid de stil și vor texte și butoane pe care le poate citi oricine.

Utilizări tipice

Verifică o paletă nouă de brand înainte să înceapă designul
Găsește un gri pentru textul secundar care trece totuși AA
Verifică culorile butoanelor, linkurilor și chenarelor față de fundalul paginii
Exportă culorile ajustate ca variabile CSS pentru foaia ta de stil

Exemplu

Intrare

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

Rezultat

#1a1a1a pe #ffffff: 17.4:1, trece AA și AAA #777777 pe #ffffff: 4.47:1, nu trece AA pentru text normal (trece pentru text mare). Mai închisă: #767676 → 4.54:1. Mai deschisă: nu este posibil #cccccc pe #ffffff: 1.6:1, nu trece contrastul non-text de 3:1. Mai închisă: #949494 → 3.03:1 Export (ajustat): :root { --color-text: #1a1a1a; --secundar: #767676; --color-background: #ffffff; --color-border: #949494; }

Un exemplu fix, scurtat. Rezultatele reale sunt generate de AI: verifică-le.

Preț și limite

Preț: gratuit, până la 30 verificări pe zi
Disponibil cu: Gratuit, Cu pachet
Limită de intrare: Până la 3 000 de caractere pe fișier

Confidențialitate

Procesare pe serverele noastre din UE (Polonia). Intrările și rezultatele se șterg după 7 zile (Gratuit) sau 30 zile (pachete), ori imediat după ce vezi rezultatul, dacă alegi să nu fie salvate. Imaginile se șterg imediat după procesare.

În API

Numele instrumentului: contrast_check. Creează o sarcină cu POST /api/v1/jobs și preia rezultatul cu GET /api/v1/jobs/{id}. Cheia ta API o găsești în contul tău.

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

Documentația completă a API →

Întrebări și răspunsuri

Cum se calculează raportul de contrast?

Cu formula WCAG 2.2: mai întâi luminanța relativă a fiecărei culori, apoi (L1 + 0.05) / (L2 + 0.05), unde L1 este culoarea mai deschisă. Rezultatul este între 1:1 și 21:1. Valorile sunt comparate fără rotunjire, deci 4.49:1 nu atinge 4.5:1, iar afișarea nu rotunjește niciodată în sus.

Ce perechi sunt verificate?

Textul este verificat pe fiecare fundal și pe culorile de accent, față de 4.5:1 și 7:1 pentru text normal și 3:1 și 4.5:1 pentru text mare. Culorile de accent și de chenar sunt verificate pe fundal față de 3:1 pentru contrastul non-text. O culoare fără rol este comparată cu toate celelalte culori.

Cum sunt găsite culorile sugerate?

Se schimbă doar luminozitatea, în spațiul de culoare OKLCH; nuanța rămâne aceeași. Do4U caută cea mai apropiată culoare care trece, o dată mai închisă și o dată mai deschisă, și o verifică din nou ca cod hex. Dacă nicio culoare nu poate trece pe un anumit fundal, spune acest lucru.

Textul meu este stocat?

Numai cât timp este necesar: 7 zile în planul Free, 30 zile cu un pachet – sau deloc, dacă alegi să nu fie stocat. Procesarea are loc pe serverele noastre din UE (Polonia).

Pot folosi rezultatul imediat?

Rezultatele sunt generate de AI. Te rugăm să le citești înainte de a le publica sau de a le trimite.

Instrumente asemănătoare

Verificarea accesibilității
Verifică o pagină pentru barierele frecvente și explică cum le poți remedia.
Feedback de design dintr-o captură de ecran
Încarcă o captură de ecran a unei pagini sau aplicații și primești constatări numerotate și concrete despre dimensiunea butoanelor, contrast, text în imagini, ierarhie și spațiere, fiecare cu un cadru pe imagine. O evaluare IA, nu o măsurătoare.
Texte alternative
Descrieri scurte ale imaginilor pentru cititoarele de ecran și motoarele de căutare.

Toate instrumentele →