WCAG kontrast tekshiruvi bir necha oddiy qadamlardan iborat. Hech narsa brauzeringizni tark etmaydi.
- Siz old fon va fon rangini kiritasiz. Vosita hex, rgb(), hsl() yoki nomli CSS ranglarni ularning qizil, yashil va koʻk kanal qiymatlariga ajratadi.
- Har bir RGB kanali sRGB transfer funksiyasi yordamida chiziqlilashtiriladi. Bu gamma-kodlangan displey qiymatlarini chiziqli yorugʻlik intensivligiga oʻzgartiradi.
- Chiziqli qiymatlar inson koʻzining har bir kanalga sezgirligi boʻyicha tortiladi — qizil uchun 0.2126, yashil uchun 0.7152, koʻk uchun 0.0722. Yigʻindi rangning nisbiy yorqinligidir.
- Kontrast nisbati (L1 + 0.05) ÷ (L2 + 0.05), bunda L1 ochiqroq rangning yorqinligi va L2 quyuqroq rangniki. Qoʻshimcha 0.05 formula sof qora rang uchun ham amalda boʻlishini taʼminlaydi.
- Nisbat WCAG chegaralariga nisbatan solishtiriladi: AA normal matn kamida 4.5:1, AA katta matn 3:1, AAA normal matn 7:1 va AAA katta matn 4.5:1 talab qiladi. Katta matn kamida 18pt yoki 14pt qalin maʼnosida.
FAQ
WCAG kontrast tekshiruvi haqida tez-tez soʻraladigan savollar.
AA va AAA oʻrtasidagi farq nima?
AA koʻpchilik veb-kontent uchun minimal moslik darajasidir. U normal matn uchun kamida 4.5:1 va katta matn uchun 3:1 kontrast nisbatini talab qiladi. AAA yuqoriroq standart boʻlib, normal matn uchun 7:1 va katta matn uchun 4.5:1 talab qiladi. Siz AAA ni yangiliklar saytidagi asosiy matn kabi muhim kontent uchun maqsad qilishingiz, kengroq dizayn uchun AA dan foydalanishingiz mumkin. Brend ranglari bilan hamma joyda AAA ga erishish qiyin boʻlishi mumkin, shuning uchun koʻp jamoalar butun proyektda AA ni maqsad qilib, mumkin boʻlgan joylarda asosiy matnni AAA ga koʻtaradilar.
WCAG boʻyicha "katta matn" deb nimaga aytiladi?
WCAG 2.x katta matnni oddiy vazn uchun kamida 18 punkt (24px) yoki qalin vazn uchun 14 punkt (taxminan 19px) deb belgilaydi. Shrift tarkibidagi belgilar va ikonkalar bir xil chegaralarga boʻysunadi. UI-ingizga qaysi chegara tegishli ekanligiga ishonchingiz komil boʻlmasa, ikkalasini ham tekshiring — AA Katta pastroq talabga ega (3:1), shuning uchun AA Normal dan oʻta olmagan rang juftliklari matn yetarlicha katta boʻlganda AA Katta dan oʻtadi.
Nega mening juftlik AA Katta dan oʻtadi, lekin AA Normal dan oʻtmaydi?
Chunki AA Katta faqat 3:1 nisbatni talab qiladi, AA Normal esa 4.5:1 ni talab qiladi. WCAG katta matn uchun pastroq chegara belgilaydi, chunki kattaroq belgilar kamroq kontrast bilan ham oson oʻqiladi. Masalan, 4.0:1 ball olgan rang juftligi AA Katta (3:1 chegara) dan oʻtadi, lekin AA Normal (4.5:1 chegara) dan oʻtmaydi. Bu oq fonlarda old fon sifatida ishlatiladigan ochiq brend ranglarida juda keng tarqalgan.
Accessibility auditi uchun faqat shu vositaga ishonish mumkinmi?
Ushbu vosita bitta narsani tekshiradi — ikki bir xil rang oʻrtasidagi WCAG 2.x kontrast nisbati. Haqiqiy accessibility koʻproq narsani oʻz ichiga oladi: fokus indikatorlari, shrift oʻlchami va vazni, rang maʼlumot yetkazishning yagona usuli sifatida va ekran oʻquvchilar hamda zoom vositalari bilan moslik. Ilovangiz accessibility sining toʻliq tasviri uchun ushbu kontrast tekshiruvini boshqa audit usullari bilan birga ishlating.
Kiritma qanday rang formatlarini qabul qiladi?
Siz 3, 4, 6 yoki 8 xonali hex kodlarni (# bilan yoki #siz), rgb() va rgba() qiymatlarini eski vergul sintaksisida yoki zamonaviy boʻsh joy bilan ajratilgan sintaksisda, hsl() va hsla() ni istalgan standart rang uyushi birligi bilan (deg, rad, grad, turn), hsv(), hwb() va CSS Color Module Level 4 specifikatsiyasidagi 150 ta nomli CSS ranglaridan istalganini joylashtirishingiz mumkin. Rang butunlay qurilmangizda tahlil qilinadi.