# Verificarea contrastului WCAG în Figma și Canva
URL: https://pandus.online/ro/contrast-figma-canva
Updated: 2026-10-14

Cum verificați contrastul WCAG în Figma și Canva cu instrumentele integrate, ce le scapă și cum testați toată paleta mărcii înainte de lansare.

Atât **Figma**, cât și **Canva** pot verifica contrastul culorilor direct în fișierul de design. În Figma, deschideți o culoare în selectorul de culori și treceți la **vizualizarea de accesibilitate**: aceasta arată raportul dintre strat și fundalul său și dacă trece WCAG AA și AAA. În Canva, alegeți **Fișier (File) → Accesibilitate (Accessibility) → Verificați accesibilitatea designului (Check design accessibility)**. Aceste verificări prind din timp contrastul slab, dar analizează câte o pereche de culori și ratează stări precum hover și focus, așa că testați și întreaga paletă. Faptele provin din paginile de ajutor Figma și Canva, **verificate pe 14 octombrie 2026**.

## Pragurile de contrast WCAG

| Ce | Nivel AA | Nivel AAA |
| --- | --- | --- |
| Text normal | 4,5:1 | 7:1 |
| Text mare (aproximativ 24 px normal sau 18,5 px aldin) | 3:1 | 4,5:1 |
| Pictograme, chenarele câmpurilor, indicatorii de focus și alte părți ale interfeței (WCAG 1.4.11) | 3:1 | — |

Detalii și exemple găsiți pe paginile WCAG despre [contrast (minim)](https://pandus.online/ro/wcag/1-4-3-contrast-minimum) și [contrastul non-text](https://pandus.online/ro/wcag/1-4-11-non-text-contrast).

## Contrastul în Figma

- **Unde:** selectați un strat, deschideți-i culoarea în selectorul de culori și deschideți **vizualizarea de accesibilitate**. Stratul selectat este întotdeauna prim-planul.
- **Ce arată:** raportul de la 1:1 la 21:1 și rezultatele AA și AAA pentru text normal, text mare sau grafică; AAA se aplică doar textului.
- **Când pică:** lângă AA sau AAA apare o pictogramă de avertizare. Dacă o selectați, culoarea se mută la cea mai apropiată valoare care trece.
- **Limite:** raportul compară luminozitatea a două culori, așa că gradientele, imaginile din spatele textului și straturile transparente cer o a doua privire. Figma oferă și un instrument web gratuit de verificare a contrastului pentru două coduri hex.

## Contrastul în Canva

- **Unde:** într-un design pe care îl puteți edita, **Fișier (File) → Accesibilitate (Accessibility) → Verificați accesibilitatea designului (Check design accessibility)**. Verificarea nu apare dacă aveți doar acces de comentare.
- **Ce acoperă:** contrastul culorilor și alte probleme frecvente; instrumentele de accesibilitate Canva ajută și la adăugarea textului alternativ pentru imagini, la structurarea titlurilor și la stabilirea ordinii de citire.
- **Limite:** Canva însăși spune că verificarea nu reprezintă o garanție a accesibilității. Designurile exportate în PDF au nevoie de o verificare separată; vedeți [cum verificați accesibilitatea PDF](https://pandus.online/ro/verificare-accesibilitate-pdf).

## Ce nu prind instrumentele de design

- **Stările.** Stările hover, focus, dezactivat și eroare sunt adesea cadre separate sau nu sunt desenate deloc. Verificați ca indicatorul de focus să aibă 3:1 față de ce îl înconjoară.
- **Textul peste imagini și gradiente.** Raportul se schimbă de-a lungul imaginii; testați punctul cel mai deschis și cel mai închis din spatele textului.
- **Întreaga paletă.** O culoare care funcționează pe alb poate pica pe griul deschis al mărcii dvs. Testați toate perechile dintr-odată cu [verificarea contrastului paletei](https://pandus.online/ro/verificare-contrast-paleta).
- **Mărimea fontului.** Dacă textul contează drept „mare” depinde de mărimea sa reală în browser; vedeți [mărimea fontului și WCAG](https://pandus.online/ro/dimensiune-font-wcag).
- **Tot ce nu ține de culoare.** Etichetele, titlurile, ordinea la tastatură și textul alternativ se decid când designul este implementat.

## De la design la site-ul publicat

1. Verificați perechi individuale cu [instrumentul nostru de verificare a contrastului](https://pandus.online/ro/verificare-contrast-culori), care sugerează și cea mai apropiată culoare care trece.
2. Verificați paleta mărcii cu [verificarea contrastului paletei](https://pandus.online/ro/verificare-contrast-paleta) și notați perechile care trec în design system.
3. După ce pagina este construită, rulați [verificarea WCAG](https://pandus.online/ro/wcag-checker) pe pagina de staging sau pe cea publicată: aceasta măsoară contrastul textului real pe fundalul real.
4. Vă interesează metoda mai nouă de calcul al contrastului? Citiți [APCA vs WCAG](https://pandus.online/ro/apca-vs-wcag); WCAG 2.2 folosește în continuare raportul de mai sus.

Pandus verifică pagini web, nu fișiere de design. Este o verificare automată, nu un audit complet.

## Întrebări frecvente

### Are Figma un instrument de verificare a contrastului?

Da. Selectorul de culori are o vizualizare de accesibilitate care arată raportul de contrast dintre stratul selectat și fundalul său și marchează rezultatele AA și AAA pentru text normal, text mare și grafică. Figma are și un instrument web gratuit de verificare a contrastului.

### Are Canva un instrument de verificare a accesibilității?

Da. Într-un design pe care îl puteți edita, deschideți Fișier (File), apoi Accesibilitate (Accessibility), apoi Verificați accesibilitatea designului (Check design accessibility). Canva semnalează probleme precum contrastul culorilor și ajută la textul alternativ, la titluri și la ordinea de citire; Canva spune că verificarea nu reprezintă o garanție a accesibilității.

### Ce raport de contrast cere WCAG?

La nivelul AA: 4,5:1 pentru textul normal, 3:1 pentru textul mare (aproximativ 24 px sau 18,5 px aldin) și 3:1 pentru pictograme, chenarele câmpurilor și alte componente ale interfeței și elemente grafice care transmit un sens.

### Poate Pandus să verifice fișierul meu Figma sau Canva?

Nu. Pandus verifică pagini web odată ce sunt publicate sau pe un site de staging. Pentru fișierele de design folosiți instrumentele integrate, verificarea noastră a contrastului pentru perechi individuale și verificarea paletei pentru toate culorile mărcii.

## Surse

- Figma Help Center, aplicarea culorilor cu selectorul de culori (vizualizarea de accesibilitate): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
- Figma, Color Contrast Checker: https://www.figma.com/color-contrast-checker/
- Canva Help Center, folosirea verificării accesibilității designului: https://www.canva.com/help/using-design-accessibility/
- W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (minim): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C, Understanding WCAG 2.2 — 1.4.11 Contrast non-text: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html

Q: Are Figma un instrument de verificare a contrastului?
A: Da. Selectorul de culori are o vizualizare de accesibilitate care arată raportul de contrast dintre stratul selectat și fundalul său și marchează rezultatele AA și AAA pentru text normal, text mare și grafică. Figma are și un instrument web gratuit de verificare a contrastului.

Q: Are Canva un instrument de verificare a accesibilității?
A: Da. Într-un design pe care îl puteți edita, deschideți Fișier (File), apoi Accesibilitate (Accessibility), apoi Verificați accesibilitatea designului (Check design accessibility). Canva semnalează probleme precum contrastul culorilor și ajută la textul alternativ, la titluri și la ordinea de citire; Canva spune că verificarea nu reprezintă o garanție a accesibilității.

Q: Ce raport de contrast cere WCAG?
A: La nivelul AA: 4,5:1 pentru textul normal, 3:1 pentru textul mare (aproximativ 24 px sau 18,5 px aldin) și 3:1 pentru pictograme, chenarele câmpurilor și alte componente ale interfeței și elemente grafice care transmit un sens.

Q: Poate Pandus să verifice fișierul meu Figma sau Canva?
A: Nu. Pandus verifică pagini web odată ce sunt publicate sau pe un site de staging. Pentru fișierele de design folosiți instrumentele integrate, verificarea noastră a contrastului pentru perechi individuale și verificarea paletei pentru toate culorile mărcii.