Verificare contrast WCAG – raport de contrast AA și AAA

Q: Funcționează verificarea și pentru textul substituent sau cel dezactivat?

Textul substituent placeholder trebuie să respecte același minim de 4,5:1 când transmite informație. Controalele dezactivate sunt scutite de cerințele de contrast, dar stările dezactivate lizibile îi ajută oricum pe utilizatori.

Verificare contrast culori WCAG

Verificare gratuită a contrastului WCAG. Introdu culoarea textului și a fundalului și afli raportul de contrast, rezultatele AA/AAA și o culoare care trece.

Culoarea textului

Culoarea fundalului

Raport de contrast

–

Rezultate WCAG 2.2

	AA	AAA
Text normal
Text mare
Componente de interfață și grafice		–

Previzualizare

Text normal (16 px). Muzicologă în bej vând whisky și tequila, preț fix.

Text mare (24 px)

Text mare îngroșat (18,66 px bold)

Buton

Sugestii

Țintă

Cea mai apropiată culoare de text care trece

–

Cea mai apropiată culoare de fundal care trece

–

Cum folosești verificarea de contrast

Introdu Culoarea textului și Culoarea fundalului. Folosește eșantioanele de culoare sau scrie orice valoare CSS în câmpuri: un cod HEX precum #595959, rgb(89 89 89), hsl(0 0% 35%) sau un nume precum navy.
Raport de contrast se actualizează pe măsură ce scrii, de la 1:1 (fără contrast) la 21:1 (negru pe alb).
Tabelul Rezultate WCAG 2.2 arată Trece sau Nu trece pentru Text normal, Text mare și Componente de interfață și grafice, la nivelurile AA și AAA.
Verifică Previzualizare: arată text normal, text mare, text mare îngroșat, conturul unui buton și o pictogramă în cele două culori.
Dacă un nivel nu trece, alege o Țintă la Sugestii. Instrumentul propune Cea mai apropiată culoare de text care trece și Cea mai apropiată culoare de fundal care trece. Apasă Folosește ca să aplici una. Inversează culorile schimbă între ele textul și fundalul.

Totul se calculează în browserul tău; nimic nu este trimis nicăieri.

Cum se calculează raportul de contrast

WCAG 2.x definește raportul ca (L1 + 0,05) / (L2 + 0,05), unde L1 este luminanța relativă a culorii mai deschise, iar L2 a celei mai închise. Luminanța relativă se calculează din canalele sRGB liniarizate: fiecare canal este decodat cu curba de transfer sRGB, apoi L = 0,2126 R + 0,7152 G + 0,0722 B. Verdele cântărește cel mai mult pentru că ochiul nostru este cel mai sensibil la el, de aceea un verde pur pare mult mai luminos decât un albastru pur de aceeași „intensitate”.

Raportul nu se rotunjește niciodată în sus. #777777 pe alb dă aproximativ 4,48:1 și nu trece de AA pentru text normal, deși pare „4,5”. Acest instrument trunchiază valoarea afișată la două zecimale, ca ceea ce vezi să fie ceea ce verifică WCAG.

Dacă culoarea textului este semitransparentă (de exemplu rgb(0 0 0 / 60%)), ea este mai întâi amestecată cu fundalul, așa cum ar desena-o browserul. Transparența culorii fundalului este ignorată, fiindcă nu se știe ce se află în spatele paginii.

Nivelurile WCAG pe scurt

Conținut	AA	AAA
Text normal	4,5:1	7:1
Text mare (24 px sau 18,66 px bold)	3:1	4,5:1
Componente de interfață și grafice cu semnificație	3:1	–

„Text mare” înseamnă cel puțin 18 pt (24 de pixeli CSS) sau 14 pt bold (aproximativ 18,66 px). Logourile și textul pur decorativ nu au nicio cerință. Regula 3:1 pentru componentele de interfață (criteriul de succes 1.4.11) se aplică la bordurile câmpurilor și butoanelor, indicatoarele de focus, pictogramele și liniile de grafic pe care utilizatorii trebuie să le vadă.

Cum funcționează sugestiile

Culorile sugerate păstrează nuanța și cromaticitatea culorii tale în spațiul OKLCH și schimbă doar luminozitatea, mai închis sau mai deschis, până când este atins raportul țintă. Instrumentul alege apoi dintre cele două direcții pe cea mai apropiată vizual de culoarea ta originală, măsurată în OKLab. Rezultatul este verificat din nou după rotunjirea la un cod HEX, deci trece cu adevărat. Dacă nicio luminozitate nu poate atinge ținta (de exemplu 7:1 față de un gri mediu), instrumentul spune acest lucru.

Despre APCA

APCA (Accessible Perceptual Contrast Algorithm) este un model de contrast mai nou, luat în calcul pentru un viitor WCAG 3. Ține cont de grosimea fontului, de dimensiune și de polaritate (închis pe deschis față de deschis pe închis). Este încă o ciornă și nu o cerință legală sau normativă, așa că acest instrument raportează rezultate WCAG 2.x, care rămân referința pentru standardul european de accesibilitate EN 301 549, pentru Section 508 și pentru majoritatea legilor.

Întrebări frecvente

Ce raport de contrast îmi trebuie pentru textul de bază?

Cel puțin 4,5:1 pentru nivelul AA, care este nivelul cerut de majoritatea legilor și politicilor. Țintește 7:1 (AAA) pentru lecturi lungi sau pentru public cu vedere slabă.

Trece textul alb pe culoarea brandului meu?

Introdu alb drept culoare a textului și culoarea brandului ca fundal. Multe albastruri, portocalii și verzi de ton mediu ating doar 3:1: bune pentru titluri mari și butoane cu etichete mari, nu pentru text mic. Folosește culoarea de fundal sugerată dacă ai nevoie de AA pentru text normal.

De ce ordinea culorilor nu schimbă raportul?

Formula împarte întotdeauna luminanța mai mare la cea mai mică, deci închis pe deschis și deschis pe închis dau același raport. Contrastul perceput poate totuși diferi ușor, una dintre problemele pe care APCA încearcă să le rezolve.

Este 4,49:1 suficient de aproape ca să treacă?

Nu. Pragurile WCAG sunt minime stricte: 4,49:1 nu trece de AA pentru text normal. Folosește sugestia ca să obții o culoare care chiar trece.

Funcționează verificarea și pentru textul substituent sau cel dezactivat?

Textul substituent (placeholder) trebuie să respecte același minim de 4,5:1 când transmite informație. Controalele dezactivate sunt scutite de cerințele de contrast, dar stările dezactivate lizibile îi ajută oricum pe utilizatori.