Verificator contrast culori (WCAG AA și AAA)

Combinații de culori verificate

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Text principal pe alb Combinația sigură pentru articole. Contrast 17.85:1, trece AA și AAA.

.element {
  /* contrast 17.85:1, trece AA și AAA */
  color: #0f172a;
  background-color: #ffffff;
}

Text secundar Gri închis pentru date, autori și etichete. Contrast 7.58:1, trece AA și AAA.

.element {
  /* contrast 7.58:1, trece AA și AAA */
  color: #475569;
  background-color: #ffffff;
}

Placeholder prea deschis Gri deschis pe alb: greșeala frecventă din formulare. Contrast 2.56:1, nu trece.

.element {
  /* contrast 2.56:1, nu trece */
  color: #94a3b8;
  background-color: #ffffff;
}

Alb pe albastru Butoane albastre cu text alb. Contrast 5.17:1, trece AA, nu și AAA.

.element {
  /* contrast 5.17:1, trece AA, nu și AAA */
  color: #ffffff;
  background-color: #2563eb;
}

Alb pe verde Verdele deschis nu ține textul alb mic. Contrast 2.28:1, nu trece.

.element {
  /* contrast 2.28:1, nu trece */
  color: #ffffff;
  background-color: #22c55e;
}

Alb pe roșu Butoane de ștergere și alerte. Contrast 4.83:1, trece AA, nu și AAA.

.element {
  /* contrast 4.83:1, trece AA, nu și AAA */
  color: #ffffff;
  background-color: #dc2626;
}

Text pe galben Pe galben, textul trebuie să fie închis la culoare. Contrast 7.45:1, trece AA și AAA.

.element {
  /* contrast 7.45:1, trece AA și AAA */
  color: #713f12;
  background-color: #fef08a;
}

Link pe fundal închis Albastru deschis pentru linkuri în teme întunecate. Contrast 9.9:1, trece AA și AAA.

.element {
  /* contrast 9.9:1, trece AA și AAA */
  color: #93c5fd;
  background-color: #0f172a;
}

Cum folosești verificatorul de contrast

Alege culoarea textului și culoarea fundalului. Butonul de inversare le schimbă între ele.
Mută glisorul de mărime a fontului și bifează bold, ca previzualizarea să arate ca textul tău.
Citește raportul de contrast, de exemplu 7.2:1, și rezultatul pentru fiecare criteriu.
Dacă textul nu trece, generatorul propune o variantă mai închisă sau mai deschisă care trece nivelul AA; un clic pe buton o aplică.

Pragurile WCAG

AA, text normal: minimum 4.5:1
AA, text mare: minimum 3:1
AAA, text normal: minimum 7:1
AAA, text mare: minimum 4.5:1
Componente de interfață și grafice (borduri de câmpuri, iconițe, stări de focus): minimum 3:1 față de culorile vecine, conform criteriului 1.4.11 din WCAG 2.1

Text mare înseamnă cel puțin 24px (18pt) la grosime normală sau cel puțin 18,66px (14pt) îngroșat. Nivelul AA este cel cerut de obicei prin lege și în licitații; AAA este recomandat pentru texte lungi.

Cum se calculează raportul

Pentru fiecare culoare se calculează luminanța relativă. Canalele R, G și B se împart la 255 și se liniarizează (valorile mici se împart la 12,92, celelalte trec prin formula ((c + 0.055) / 1.055)^2.4), apoi se combină cu ponderi după sensibilitatea ochiului:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B
raport = (L_deschisă + 0.05) / (L_închisă + 0.05)

Raportul merge de la 1:1 (aceeași culoare) la 21:1 (negru pe alb). Verdele contează cel mai mult, de aceea un verde deschis pe alb are contrast mic, deși pare o culoare puternică.

.text-secundar {
  color: #767676;   /* 4.54:1 pe alb, trece AA */
  background: #ffffff;
}

Întrebări frecvente

Contează opacitatea textului?

Da. Un text negru cu opacity: 0.5 pe alb se vede ca un gri și are contrastul acelui gri. Verifică culoarea rezultată, nu cea scrisă în cod.

Placeholder-ul și textul dezactivat trebuie să treacă?

Placeholder-ul este text și ar trebui să aibă 4.5:1. Componentele dezactivate sunt exceptate de WCAG, dar e bine să rămână lizibile.

Ce fac dacă culoarea de brand nu trece?

Folosește-o pentru fundaluri mari, iconițe sau text mare, iar pentru text mic alege o nuanță mai închisă din aceeași familie. Generatorul de paletă îți dă nuanțele.