Verificarea contrastului WCAG trece prin câțiva pași simpli. Nimic nu părăsește browserul tău.
- Introduci o culoare de prim-plan și una de fundal. Instrumentul parsează hex, rgb(), hsl() sau culori CSS numite în valorile canalelor roșu, verde și albastru.
- Fiecare canal RGB este liniarizat folosind funcția de transfer sRGB. Aceasta convertă valorile de afișare codificate gamma în intensități liniare de lumină.
- Valorile liniare sunt ponderate după sensibilitatea ochiului uman la fiecare canal — 0.2126 pentru roșu, 0.7152 pentru verde, 0.0722 pentru albastru. Suma este luminozitatea relativă a culorii.
- Raportul de contrast este (L1 + 0.05) ÷ (L2 + 0.05), unde L1 este luminozitatea culorii mai deschise, iar L2 este cea a culorii mai închise. Cei 0.05 în plus mențin formula validă pentru negru pur.
- Raportul este comparat cu pragurile WCAG: textul normal AA necesită cel puțin 4.5:1, textul mare AA necesită 3:1, textul normal AAA necesită 7:1, iar textul mare AAA necesită 4.5:1. Textul mare înseamnă cel puțin 18pt sau 14pt bold.
FAQ
Întrebări comune despre verificarea contrastului WCAG.
Care este diferența dintre AA și AAA?
AA este nivelul minim de conformitate pentru majoritatea conținutului web. Necesită un raport de contrast de cel puțin 4.5:1 pentru text normal și 3:1 pentru text mare. AAA este un standard mai înalt care necesită 7:1 pentru text normal și 4.5:1 pentru text mare. Ai putea viza AAA pentru conținutul cheie, cum ar fi corpul textului pe un site de știri, în timp ce folosești AA pentru designul general. Îndeplinirea AAA peste tot poate fi dificilă cu culorile de brand, așa că multe echipe vizează AA peste tot și ridică textul cheie la AAA acolo unde pot.
Ce contează ca „text mare” conform WCAG?
WCAG 2.x definește textul mare ca având cel puțin 18 puncte (24px) pentru greutatea normală sau 14 puncte (aproximativ 19px) pentru greutatea bold. Simbolurile și pictogramele care fac parte dintr-un font respectă aceleași praguri. Dacă nu ești sigur care prag se aplică interfeței tale, verifică ambele — AA Mare are o bară mai mică (3:1), astfel încât majoritatea perechilor de culori care eșuează AA Normal trec de fapt AA Mare când textul este suficient de mare.
De ce perechea mea promovează AA Mare dar eșuează AA Normal?
Deoarece AA Mare necesită doar un raport de 3:1, în timp ce AA Normal necesită 4.5:1. WCAG stabilește un prag mai mic pentru textul mare deoarece caracterele mai mari sunt mai ușor de citit chiar și cu mai puțin contrast. O pereche de culori care are, să zicem, 4.0:1 promovează AA Mare (prag 3:1) dar eșuează AA Normal (prag 4.5:1). Acest lucru este foarte comun cu culori de brand mai deschise folosite ca prim-plan pe fundaluri albe.
Pot să mă bazez doar pe acest instrument pentru auditarea accesibilității?
Acest instrument verifică un singur lucru — raportul de contrast WCAG 2.x între două culori solide. Accesibilitatea reală implică mai mult: indicatori de focalizare, dimensiunea și greutatea fontului, culoarea ca singură modalitate de a transmite informații și compatibilitatea cu cititoarele de ecran și uneltele de zoom. Folosește această verificare de contrast împreună cu alte metode de audit pentru o imagine completă a accesibilității aplicației tale.
Ce formate de culoare acceptă intrarea?
Poți lipi coduri hex de 3, 4, 6 sau 8 cifre (cu sau fără #), valori rgb() și rgba() în sintaxa veche cu virgulă sau sintaxa modernă separată prin spații, hsl() și hsla() cu orice unitate de nuanță standard (deg, rad, grad, turn), hsv(), hwb() și oricare dintre cele 150 de culori CSS numite din specificația CSS Color Module Level 4. Culoarea este analizată în întregime pe dispozitivul tău.