WCAG 2.1 / 2.2 стандартын дагуу өнгөний тодосгогчийг шалгах нь
Вэб хуудас болон дижитал бүтээгдэхүүний хүртээмжтэй байдлыг хангах хамгийн чухал алхмуудын нэг бол текст болон арын өнгөний хоорондын тодосгогчийн харьцааг зөв тохируулах явдал юм. "Тодосгогч шалгагч (Contrast Checker)" хэрэгсэл нь таны сонгосон өнгөний хослол нь олон улсын WCAG 2.1 болон WCAG 2.2 стандартад нийцэж байгаа эсэхийг хурдан хугацаанд тодорхойлдог.
Энэхүү хэрэгсэл нь дизайнеруудад текстийн уншигдах байдал болон UI бүрэлдэхүүн хэсгүүдийн харагдах байдлыг хянах, хөгжүүлэгчдэд хүртээмжтэй байдлын стандартыг хангах, мөн контент бэлтгэгчдэд өөрсдийн материалын өнгөний зохицлыг баталгаажуулахад тусалдаг. Шалгах үйл явц бүрэн дотооддоо явагддаг бөгөөд шалгалт бүр таны хөтөч дээр ажиллана. Таны оруулсан юуг ч BroBroGo руу хуулж илгээхгүй тул өгөгдлийн нууцлал бүрэн хадгалагдана.
Оруулах өгөгдлийн формат болон анхны утга
Хэрэгслийг ашиглахын тулд текстийн өнгө болон арын өнгийг дараах зөвшөөрөгдсөн форматын дагуу оруулна:
- Hex утга: Жишээ нь
#1a1a1aэсвэл#ffffff. - rgb() утга: Жишээ нь
rgb(26, 26, 26)эсвэлrgb(255, 255, 255). - hsl() утга: Өнгөний өнгө, ханалт, гэрэлтүүлгийг тодорхойлсон утга.
Хэрэгслийг анх нээхэд текстийн өнгөнд #4f46e5, арын өнгөнд #ffffff гэсэн анхны утгууд тохируулагдсан байх бөгөөд энэ нь 6.29 тодосгогчийн харьцааг үүсгэдэг. Хэрэв та текстийн өнгө болон арын өнгийг хооронд нь солихыг хүсвэл солих товчийг ашиглан өнгийг хурдан хөрвүүлж болно.
Хэрэв буруу форматтай өнгө оруулбал дараах алдааны мэдэгдлүүд гарна:
- Текстийн өнгө буруу бол:
#1a1a1aэсвэлrgb(26, 26, 26)гэх мэт хүчинтэй текстийн өнгө оруулна уу. - Арын өнгө буруу бол:
#ffffffэсвэлrgb(255, 255, 255)гэх мэт хүчинтэй арын өнгө оруулна уу.
Тодосгогчийн харьцаа болон үнэлгээний дүрэм
Тодосгогчийн харьцаа нь хамгийн багадаа 1:1 (ямар ч тодосгогчгүй буюу ижил өнгө) хэмжээнээс хамгийн ихдээ 21:1 (цагаан дээр хар эсвэл хар дээр цагаан) хүртэлх утгаар илэрхийлэгддэг. Хэрэгсэл нь оруулсан өнгөнүүдийг WCAG 2.1 / 2.2 томьёоны дагуу тооцоолж, дараах гурван ангиллаар "Тэнцсэн" эсвэл "Тэнцээгүй" гэсэн үр дүнг харуулдаг:
1. Ердийн текст
Ердийн хэмжээтэй текстийн хувьд дараах шаардлагыг тавьдаг:
- AA түвшин: Тодосгогчийн харьцаа дор хаяж 4.5:1 байх шаардлагатай.
- AAA түвшин: Тодосгогчийн харьцаа дор хаяж 7:1 байх шаардлагатай.
2. Том текст
Том текстийг хүртээмжтэй байдлын стандартад дараах байдлаар тодорхойлдог: 18pt (ойролцоогоор 24px) буюу түүнээс дээш хэмжээтэй, эсвэл тод (bold) хэлбэртэй бол 14pt (ойролцоогоор 18.5px) буюу түүнээс дээш хэмжээтэй текстийг том текст гэж үзнэ. Том текст нь уншихад хялбар байдаг тул шаардагдах харьцаа нь арай бага байдаг:
- AA түвшин: Тодосгогчийн харьцаа дор хаяж 3:1 байх шаардлагатай.
- AAA түвшин: Тодосгогчийн харьцаа дор хаяж 4.5:1 байх шаардлагатай.
3. UI ба график
Энэ ангилалд хэрэглэгчийн интерфейсийн идэвхтэй бүрэлдэхүүн хэсгүүд болон график дүрслэлүүд хамаарна. Энэ мөр нь AA болон AAA гэсэн тусдаа ялгаа байхгүй бөгөөд зөвхөн дараах ганц хязгаараар шалгагддаг:
- Тодосгогчийн харьцаа дор хаяж 3:1 байх шаардлагатай.
Үр дүнгийн нэгдсэн дүгнэлт
Хэрэгсэл нь өнгөний хослолыг шалгасны дараа хамгийн өндөр тэнцсэн түвшинг тодорхойлж, дараах нэгдсэн дүгнэлтүүдийн аль нэгийг харуулдаг:
| Тооцоолсон харьцаа ба нөхцөл | Харагдах дүгнэлт (Verdict) |
|---|---|
| Ердийн текстийн AA болон AAA шаардлагыг бүрэн хангасан үед | Ердийн текстийн хувьд AA болон AAA түвшинд тэнцэнэ. |
| Ердийн текстийн зөвхөн AA шаардлагыг хангасан үед | Ердийн текстийн хувьд AA түвшинд тэнцэнэ. |
| Ердийн текстийн шаардлагад хүрэхгүй боловч том текстийн AA шаардлага хангасан үед | Зөвхөн том текстийн хувьд AA түвшинд тэнцэнэ. |
| Тодосгогчийн харьцаа AA түвшний хамгийн доод хязгаар болох 3:1-д хүрэхгүй байх үед | AA-ийн доод хязгаараас доогуур байна — тодосгогчийг нэмэгдүүлнэ үү. |
Түгээмэл асуултууд
AA болон AAA үр дүн ямар утгатай вэ?
AA нь ихэнх сайтуудын зорьдог түвшин юм: ердийн текстийн хувьд дор хаяж 4.5:1, том текстийн хувьд 3:1 харьцаа шаарддаг. AAA нь илүү хатуу бөгөөд ердийн текстийн хувьд 7:1, том текстийн хувьд 4.5:1 байна. Харьцаа нь 1:1 (тодосгогчгүй)-ээс 21:1 (цагаан дээр хар) хүртэл байна.
Юуг том текст гэж тооцох вэ?
18pt (ойролцоогоор 24px) буюу түүнээс дээш, эсвэл тод (bold) үед 14pt (ойролцоогоор 18.5px) хэмжээтэй текстийг том текст гэж үзнэ. Том текст нь бага тодосгогчтой байсан ч уншигдахуйц байдаг тул ердийн текстийн хатуу хязгаарын оронд AA-г 3:1, AAA-г 4.5:1 харьцаагаар тэнцүүлдэг.
Би ямар өнгөний формат оруулж болох вэ?
#1a1a1a гэх мэт hex утга, rgb(26, 26, 26) гэх мэт rgb() утга, эсвэл hsl() утга оруулна уу — эсвэл аль нэг өнгөний дээж дээр дарж өнгө сонгоно уу. Текст болон арын өнгийг солихын тулд солих товчийг ашиглана уу.
Энэ нь WCAG 2 уу эсвэл шинэ APCA арга уу?
Энэ нь өнөөдөр хүртээмжтэй байдлын дүрэм болон аудитад ашиглагддаг WCAG 2.1 / 2.2 томьёог ашигладаг. APCA нь WCAG 3-т зориулан боловсруулж буй илүү мэдрэмжтэй шинэ арга бөгөөд ирээдүйтэй боловч хараахан албан ёсны стандарт болоогүй тул энд байгаа тэнцсэн үр дүн үүнийг ашиглаагүй болно.