Povestea din spatele verificatorului de contrast
Contrastul scăzut este una dintre cele mai frecvente probleme de accesibilitate pe web. Regulile lui par numere magice, dar fiecare are un motiv, legat de felul în care ochii pierd sensibilitate cu vârsta și de felul în care ecranele produc lumină.
De unde vin 4,5 și 7
WCAG 2.0 a devenit recomandare W3C în decembrie 2008. Autorii au pornit de la un minim de 3:1 din standardul ISO 9241-3 și l-au ridicat pentru a compensa pierderea sensibilității la contrast la o vedere de aproximativ 20/40, frecventă în jurul vârstei de 80 de ani. Așa a apărut 4,5:1 pentru nivelul AA. Nivelul AAA, 7:1, face același lucru pentru o vedere de aproximativ 20/80.
Luminanța relativă
Formula transformă întâi fiecare canal sRGB înapoi în lumină liniară, apoi ponderează roșul, verdele și albastrul cu 0,2126, 0,7152 și 0,0722, aceleași ponderi ca în standardul de televiziune ITU-R BT.709, pentru că ochiul este cel mai sensibil la verde. Raportul este luminanța mai deschisă plus 0,05 împărțită la cea mai închisă plus 0,05. Valoarea 0,05 reprezintă lumina reflectată de ecran și limitează scara de la 1:1 la 21:1, negru pe alb.
Dincolo de text
Textul mare, de cel puțin 24 px sau 18,66 px aldin, rămâne lizibil la un contrast mai mic și are nevoie doar de 3:1 pentru AA. WCAG 2.1, publicat în iunie 2018, a adăugat criteriul 1.4.11 Contrast non text: marginile câmpurilor, indicatorii de focus, pictogramele și părțile unui grafic necesare pentru a-l înțelege trebuie să atingă 3:1 față de ce se află lângă ele.
Daltonismul și ce urmează
Aproximativ 1 din 12 bărbați și 1 din 200 de femei au o deficiență de vedere a culorilor, mai ales pentru roșu și verde. Contrastul se măsoară pe luminanță, deci o pereche care trece rămâne lizibilă, dar culorile care diferă doar prin nuanță pot arăta la fel. Simularea folosește modelul lui Machado, Oliveira și Fernandes din 2009. Ciornele WCAG 3 explorează APCA, o metodă mai nouă care ține cont și de mărimea textului și de direcția închis pe deschis sau deschis pe închis.
Întrebări frecvente
Un contrast bun este suficient pentru accesibilitate?
Nu. Este o cerință printre multe altele. WCAG cere și ca culoarea să nu fie singurul mod de a transmite un sens, de exemplu adăugând o pictogramă sau o subliniere la un link sau la o eroare.
Simularea arată exact ce vede o persoană?
Este o aproximare bună a dicromaziei complete. Mulți oameni au o formă mai ușoară și fiecare vede puțin diferit, așa că folosește-o ca ghid.
Ar trebui să folosesc APCA în locul raportului WCAG 2?
Pentru conformitate astăzi, folosește raportul WCAG 2. WCAG 2.2, publicat în octombrie 2023, păstrează aceeași formulă, iar legi și standarde precum EN 301 549 fac trimitere la el. APCA este încă în dezvoltare.
Unelte conexe
Verificator de contrast al culorilor
Verificator gratuit de contrast WCAG: introdu culorile textului și fundalului în HEX, RGB sau HSL, vezi raportul de contrast cu rezultatele AA și AAA, obține cea mai apropiată culoare care trece și simulează daltonismul.
Generator color de paleta
Construiți, blocați, și shuffle culoare palete în browser-ul. Copy HEXAM, variabile CSS, sau JSON, export PNG sau SVG, și extrage culori dintr-o fotografie.
Roată de culoare
Alege o culoare pe o roată interactivă, genereaza complementar, similar, triadic, și alte palete, și copiați HEXAL, RGB, HSL, HSV, sau CMYK.
Editor Gradient
Construiește gradienți liniari și radiali CSS în browser. Trageți de culoare se oprește, setați unghiul, și copia CSS, HEXAL, RGB, HSL, HSV, sau CMYK.
Culori
Cum funcţionează culoarea pe ecrane şi în imprimare: RGB, CMYK, HSL, hex, roata de culoare, gradienţi, contrast, şi instrumente PictorX.
Eşti gata să încerci?
Deschide PictorX în browser-ul tău
Deschide verificatorul de contrast