WCAG 2.1 / 2.2 kontrasta vadlīniju izpratne
Tīmekļa satura piekļūstamības vadlīnijas (WCAG 2.1 / 2.2) nosaka skaidrus kritērijus krāsu kontrastam, lai nodrošinātu, ka saturs ir salasāms cilvēkiem ar redzes traucējumiem. Kontrasta attiecība tiek aprēķināta kā skaitliska vērtība diapazonā no 1:1 līdz 21:1. Attiecība 1:1 nozīmē, ka starp tekstu un fonu nav nekāda kontrasta (krāsas ir identiskas), savukārt attiecība 21:1 pārstāv maksimālo iespējamo kontrastu, kas ir tīri melns teksts uz tīri balta fona.
Šis rīks izmanto oficiālo WCAG 2.1 / 2.2 aprēķina formu, lai noteiktu precīzu attiecību starp izvēlēto teksta krāsu un fona krāsu. Sākotnējās rīka vērtības ir iestatītas kā #4f46e5 teksta krāsai un #ffffff fona krāsai, kas nodrošina kontrasta attiecību 6.29.
Atbilstības līmeņi: Atšķirība starp AA un AAA
WCAG standartos ir definēti dažādi piekļūstamības līmeņi, kur AA ir vispārpieņemtais mērķis lielākajai daļai tīmekļa vietņu, bet AAA ir stingrāks un nodrošina vēl augstāku piekļūstamības pakāpi. Šie līmeņi nosaka atšķirīgus minimālos kontrasta sliekšņus atkarībā no teksta izmēra:
- Parasts teksts: AA līmeņa sasniegšanai nepieciešama kontrasta attiecība vismaz 4.5:1. Lai sasniegtu stingrāko AAA līmeni, ir nepieciešama attiecība vismaz 7:1.
- Liels teksts: Tā kā lielāku tekstu ir vieglāk salasīt, prasības ir zemākas. AA līmenim pietiek ar attiecību vismaz 3:1, savukārt AAA līmenim ir nepieciešama attiecība vismaz 4.5:1.
Parasta un liela teksta definīcija piekļūstamībā
Lai pareizi piemērotu kontrasta noteikumus, ir svarīgi precīzi definēt, kas ir liels teksts. Saskaņā ar vadlīnijām par lielu tekstu uzskata:
- Tekstu, kura izmērs ir vismaz 18pt (aptuveni 24px).
- Tekstu, kura izmērs ir vismaz 14pt (aptuveni 18.5px), ja tam ir lietots treknraksts (bold).
Jebkurš teksts, kas nesasniedz šos izmērus, tiek klasificēts kā parasts teksts, un uz to attiecas stingrākie kontrasta sliekšņi (4.5:1 priekš AA un 7:1 priekš AAA).
Kontrasts saskarnes elementiem un grafikai
Mūsdienu tīmekļa dizainā piekļūstamība neattiecas tikai uz tekstu. WCAG 2.1 / 2.2 standarti ietver prasības arī lietotāja saskarnes (UI) komponentiem un grafiskajiem objektiem.
Sadaļā "Saskarne un grafika" tiek piemērots viens vienīgs slieksnis — kontrasta attiecībai ir jābūt vismaz 3:1. Atšķirībā no teksta, šai kategorijai nav dalījuma starp AA un AAA līmeņiem; rīks uzrāda vienu vienotu rezultātu, kas norāda, vai saskarnes elementi atbilst šim minimālajam 3:1 slieksnim.
Krāsu formātu praktiskā izmantošana un rīka ievades
Rīks atbalsta trīs populārākos krāsu formātus, kurus dizaineri un izstrādātāji izmanto ikdienā:
- Hex vērtības: Piemēram,
#1a1a1a. - RGB vērtības: Formātā
rgb(26, 26, 26). - HSL vērtības: Krāsas tonis, piesātinājums un gaišums.
Lietotājam ir pieejama apmaiņas poga, kas ļauj ātri apmainīt teksta un fona krāsas vietām, lai pārbaudītu pretējo kombināciju. Ja tiek ievadīts neatbilstošs krāsas formāts, rīks uzrāda kļūdas paziņojumu:
- Nepareizai teksta krāsai: "Ievadiet derīgu teksta krāsu, piemēram, #1a1a1a vai rgb(26, 26, 26)."
- Nepareizai fona krāsai: "Ievadiet derīgu fona krāsu, piemēram, #ffffff vai rgb(255, 255, 255)."
Rezultātu un kopsavilkuma interpretācija
Pēc krāsu ievadīšanas rīks aprēķina kontrasta attiecību un katrai kategorijai ("Parasts teksts", "Liels teksts", "Saskarne un grafika") attēlo statusu "Atbilst" vai "Neatbilst". Papildus tam tiek parādīts viens no šādiem kopsavilkuma paziņojumiem, kas raksturo augstāko sasniegto piekļūstamības līmeni:
- "Atbilst AA un AAA līmenim parastam tekstam."
- "Atbilst AA līmenim parastam tekstam."
- "Atbilst AA līmenim tikai lielam tekstam."
- "Zem AA minimuma — palieliniet kontrastu."
Datu apstrāde un privātums
Lietojot šo rīku, nav jāuztraucas par datu drošību. Katra pārbaude darbojas jūsu pārlūkprogrammā. Nekas no ievadītā netiek augšupielādēts BroBroGo. Visi aprēķini un krāsu salīdzinājumi tiek veikti lokāli jūsu ierīcē.
Biežāk uzdotie jautājumi
Ko nozīmē AA un AAA rezultāti?
AA ir līmenis, uz kuru tiecas lielākā daļa vietņu: tam nepieciešama attiecība vismaz 4.5:1 parastam tekstam un 3:1 lielam tekstam. AAA ir stingrāks — 7:1 parastam tekstam un 4.5:1 lielam tekstam. Attiecība svārstās no 1:1 (nav kontrasta) līdz 21:1 (melns uz balta).
Kas tiek uzskatīts par lielu tekstu?
Teksts no 18pt (aptuveni 24px) vai 14pt (aptuveni 18.5px), ja tas ir treknrakstā. Lielāks teksts saglabājas salasāms pie zemāka kontrasta, tāpēc tas izpilda AA prasības pie 3:1 un AAA pie 4.5:1, nevis pēc stingrākiem parastā teksta sliekšņiem.
Kādus krāsu formātus es varu ievadīt?
Ierakstiet hex vērtību, piemēram, #1a1a1a, rgb() vērtību, piemēram, rgb(26, 26, 26), vai hsl() vērtību — vai noklikšķiniet uz kāda no paraugiem, lai izvēlētos krāsu. Izmantojiet apmaiņas pogu, lai apmainītu teksta un fona krāsas.
Vai tas ir WCAG 2 vai jaunāka APCA metode?
Tas izmanto WCAG 2.1 / 2.2 formulas, uz kurām šodien balstās piekļūstamības noteikumi un auditi. APCA is jaunāka, uztverei piemērotāka metode, kas joprojām tiek izstrādāta priekš WCAG 3 — tā ir daudzsološa, taču vēl nav kļuvusi par atbilstības standartu, tāpēc sekmīgie rezultāti šeit to neizmanto.