Cum se folosește
- Introduceți culoarea textului (prim-plan) și culoarea de fundal ca HEX, rgb(), hsl() sau alt format CSS ori folosiți selectoarele de culoare.
- Citiți raportul de contrast și rezultatul de promovare sau respingere pentru fiecare cerință WCAG.
- Dacă o cerință nu este îndeplinită, alegeți o țintă și aplicați culoarea sugerată, care păstrează nuanța și schimbă doar luminozitatea.
- Folosiți „Inversare” pentru a verifica combinația inversă, de exemplu text deschis pe un buton întunecat.
Cum funcționează
Raportul urmează definiția WCAG 2.2: luminanța relativă a fiecărei culori este calculată din canalele sRGB, iar raportul este (mai deschis + 0.05) ÷ (mai închis + 0.05). Acesta variază de la 1:1 (culori identice) la 21:1 (negru pe alb).
Cerințe verificate: criteriul de succes 1.4.3 (AA) necesită 4.5:1 pentru text normal și 3:1 pentru text mare; 1.4.6 (AAA) necesită 7:1 și 4.5:1; 1.4.11 necesită 3:1 pentru părțile interfeței de utilizator și graficele semnificative, cum ar fi marginile câmpurilor de introducere și pictogramele. Textul mare are cel puțin 24px normal sau aproximativ 18.66px aldin. WCAG nu permite rotunjirea în sus, deci 4.49:1 eșuează AA chiar dacă este aproape; raportul afișat aici este trunchiat, nu rotunjit.
Sugestia păstrează nuanța și croma culorii textului în OKLCH și caută cea mai apropiată luminozitate, mai întunecată sau mai deschisă, care atinge ținta. Raportul de contrast este o parte a lizibilității: greutatea fontului, dimensiunea și diferențele de vedere a culorilor contează de asemenea, iar WCAG 2.2 este recomandarea curentă W3C la care se referă majoritatea legilor de accesibilitate.
Exemple
Text gri care aproape trece
#777777 pe alb dă 4.48:1. Aceasta trece pentru text mare și componente UI, dar eșuează AA pentru text normal. Cel mai apropiat gri care trece este aproximativ #767676, care atinge 4.54:1.
Text alb pe un buton de brand
Alb pe #ff8800 dă aproximativ 2.4:1, care eșuează chiar și la nivelul de 3:1 pentru text mare. Închiderea portocaliului sau folosirea textului întunecat în loc sunt remedierile obișnuite; sugestia arată cât de întunecată ar trebui să fie culoarea textului.
Verificarea marginii unui câmp de formular
O margine gri deschis #cccccc pe alb este de aproximativ 1.6:1. Conform criteriului 1.4.11, marginea care identifică un câmp de introducere necesită 3:1, așa că este nevoie de ceva în jur de #949494 sau mai întunecat.
Întrebări frecvente
Ce raport de contrast am nevoie pentru WCAG AA?
4.5:1 pentru text normal, 3:1 pentru text mare (24px, sau 18.66px aldin) și 3:1 pentru componente UI și grafice semnificative. AAA ridică textul la 7:1 și textul mare la 4.5:1.
Textul din logo sau textul butonului dezactivat trebuie să treacă?
Nu. WCAG exceptează textul din logo-uri și numele de marcă, textul pur decorativ și textul din componentele inactive (dezactivate) ale interfeței de utilizator.
De ce rezultatul meu diferă ușor față de alt verificator?
Unele instrumente rotunjesc raportul la o zecimală sau îl rotunjesc în sus. WCAG compară valoarea exactă, deci acest instrument trunchiază la două zecimale. Diferențe mici pot apărea și din culorile introduse cu canal alfa.
Ce este cu noua metodă de contrast APCA?
APCA este o metodă diferită, propusă pentru o versiune viitoare a WCAG. Nu face parte din WCAG 2.2, pe care îl măsoară acest instrument și la care fac referire regulile actuale de accesibilitate.
Confidențialitate
Culorile sunt verificate în browserul dvs. Nimic nu este încărcat sau stocat.