Ինչպես է աշխատում գործիքը
Այս գործիքը թույլ է տալիս մուտքագրել տեքստի գույնը և ֆոնի գույնը՝ WCAG 2.1 / 2.2 ստանդարտների համաձայն դրանց կոնտրաստի հարաբերակցությունը որոշելու համար։ Այնուհետև այն ցույց է տալիս, թե հասանելիության որ մակարդակներն են (AA և AAA) համապատասխանում տվյալ գունային համադրությանը սովորական տեքստի, խոշոր տեքստի և օգտատիրոջ ինտերֆեյսի բաղադրիչների համար։
Գործիքի սկզբնական գույներն են #4f46e5՝ տեքստի համար, և #ffffff՝ ֆոնի համար, որոնց կոնտրաստի հարաբերակցությունը կազմում է 6.29։ Գործիքում առկա է նաև տեղափոխման կոճակ, որը տեղերով փոխում է տեքստի և ֆոնի գույները։
Մուտքագրվող տվյալներ և ձևաչափեր
Գործիքից օգտվելու համար անհրաժեշտ է սահմանել երկու հիմնական արժեք․
- Տեքստի գույնը: Գունային արժեք, որի համար ընդունելի ձևաչափերն են Hex արժեքները (օրինակ՝
#1a1a1a),rgb()արժեքները (օրինակ՝rgb(26, 26, 26)) կամhsl()արժեքները։ - Ֆոնի գույնը: Գունային արժեք, որի համար նույնպես ընդունելի են Hex արժեքները (օրինակ՝
#1a1a1a),rgb()արժեքները (օրինակ՝rgb(26, 26, 26)) կամhsl()արժեքները։
Եթե մուտքագրվի անվավեր տեքստի գույն, կցուցադրվի հետևյալ հաղորդագրությունը՝ «Մուտքագրե՛ք վավեր տեքստի գույն, օրինակ՝ #1a1a1a կամ rgb(26, 26, 26):»։ Անվավեր ֆոնի գույն մուտքագրելու դեպքում կցուցադրվի հետևյալ հաղորդագրությունը՝ «Մուտքագրե՛ք վավեր ֆոնի գույն, օրինակ՝ #ffffff կամ rgb(255, 255, 255):»։
Ելքային արդյունքներ և գնահատում
Գործիքը հաշվարկում և ցուցադրում է հետևյալ արդյունքները․
- Կոնտրաստի հարաբերակցությունը: Տեքստի և ֆոնի գույների միջև հաշվարկված հարաբերակցությունը, որը ցուցադրվում է «X:1» ձևաչափով։
- Սովորական տեքստ: Ցույց է տալիս «Անցել է» կամ «Չի անցել» արդյունքը AA և AAA մակարդակների համար։
- Խոշոր տեքստ: Ցույց է տալիս «Անցել է» կամ «Չի անցել» արդյունքը AA և AAA մակարդակների համար։
- Օգտատիրոջ ինտերֆեյս և գրաֆիկա: Ցույց է տալիս «Անցել է» կամ «Չի անցել» արդյունքը միայն մեկ՝ 3:1 շեմի համեմատ։ Այս տողը չունի AA/AAA տարբերակում. գործիքը դրա համար ցույց է տալիս մեկ արդյունք, այլ ոչ թե երկու։
- Ամփոփում (վճիռ): Հաղորդագրություն, որը ցույց է տալիս համապատասխանության ամենաբարձր անցողիկ մակարդակը․
- «Համապատասխանում է AA և AAA մակարդակներին սովորական տեքստի համար:»
- «Համապատասխանում է AA մակարդակին սովորական տեքստի համար:»
- «Համապատասխանում է AA մակարդակին միայն խոշոր տեքստի համար:»
- «Ցածր է AA նվազագույնից. բարձրացրե՛ք կոնտրաստը:»
Կոնտրաստի կանոններն ու սահմանաչափերը
Կոնտրաստի հարաբերակցությունը տատանվում է 1:1-ից (երբ չկա կոնտրաստ) մինչև 21:1 (սևը սպիտակ ֆոնի վրա)։ Ըստ WCAG 2.1 / 2.2 բանաձևի՝ սահմանված են հետևյալ կանոնները․
- Սովորական տեքստի համար AA մակարդակը պահանջում է առնվազն 4.5:1 հարաբերակցություն, իսկ AAA մակարդակը՝ առնվազն 7:1 հարաբերակցություն։
- Խոշոր տեքստի համար AA մակարդակը պահանջում է առնվազն 3:1 հարաբերակցություն, իսկ AAA մակարդակը՝ առնվազն 4.5:1 հարաբերակցություն։
- Օգտատիրոջ ինտերֆեյսի և գրաֆիկայի տողը պահանջում է առնվազն 3:1 հարաբերակցություն։ Սա միակ տողն է, որն ունի մեկ շեմ՝ առանց առանձին AA և AAA մակարդակների։
Հասանելիության տեսանկյունից խոշոր տեքստ է համարվում 18pt (մոտ 24px) և բարձր չափսի տեքստը, կամ 14pt (մոտ 18.5px) չափսի տեքստը, երբ այն թավ է։
Ում համար է նախատեսված այս գործիքը
Այս գործիքը նախատեսված է հետևյալ մասնագետների համար․
- Դիզայներներ, ովքեր ստուգում են տեքստի և բաղադրիչների ընթեռնելիությունը։
- Ծրագրավորողներ, ովքեր ապահովում են հասանելիության ստանդարտների պահպանումը։
- Բովանդակություն ստեղծող թիմեր, ովքեր վավերացնում են իրենց նյութերի գունային կոնտրաստը։
Գաղտնիություն և տվյալների մշակում
Յուրաքանչյուր ստուգում կատարվում է Ձեր բրաուզերում։ Ձեր մուտքագրած տվյալներից ոչինչ չի վերբեռնվում BroBroGo։
Հաճախ տրվող հարցեր (FAQ)
Ի՞նչ են նշանակում AA և AAA արդյունքները:
AA-ն այն մակարդակն է, որին ձգտում են կայքերի մեծ մասը. սովորական տեքստի համար անհրաժեշտ է առնվազն 4.5:1 հարաբերակցություն, իսկ խոշոր տեքստի համար՝ 3:1։ AAA-ն ավելի խիստ է՝ 7:1 սովորական տեքստի և 4.5:1 խոշոր տեքստի համար։ Հարաբերակցությունը տատանվում է 1:1-ից (առանց կոնտրաստի) մինչև 21:1 (սևը սպիտակի վրա)։
Ի՞նչն է համարվում խոշոր տեքստ:
18pt (մոտ 24px) և բարձր տեքստը, կամ 14pt (մոտ 18.5px) տեքստը, երբ այն թավ է։ Ավելի մեծ տեքստը հեշտ ընթեռնելի է մնում նաև ավելի ցածր կոնտրաստի դեպքում, ուստի այն անցնում է AA մակարդակը 3:1 հարաբերակցությամբ, իսկ AAA-ն՝ 4.5:1 հարաբերակցությամբ՝ սովորական տեքստի ավելի խիստ շեմերի փոխարեն։
Գույնի ո՞ր ձևաչափերը կարող եմ մուտքագրել:
Մուտքագրե՛ք hex արժեք, օրինակ՝ #1a1a1a, rgb() արժեք, օրինակ՝ rgb(26, 26, 26), կամ hsl() արժեք, կամ կտտացրե՛ք նմուշներից մեկին՝ գույն ընտրելու համար։ Օգտագործե՛ք տեղափոխման կոճակը՝ տեքստի և ֆոնի գույները տեղերով փոխելու համար։
Արդյո՞ք սա WCAG 2-ն է, թե՞ նոր APCA մեթոդը:
Այն օգտագործում է WCAG 2.1 / 2.2 բանաձևը, որին այսօր հղում են անում հասանելիության կանոններն ու աուդիտները։ APCA-ն ավելի նոր, տեսողական ընկալման վրա հիմնված մեթոդ է, որը դեռ մշակվում է WCAG 3-ի համար. այն խոստումնալից է, բայց դեռևս համապատասխանության ստանդարտ չէ, ուստի այստեղ անցողիկ արդյունքները չեն օգտագործում այն։