Rang kontrasti

---

Nega

Veb-sahifadagi matn va grafik komponentlar foydalanuvchilar ularni idrok eta olishi uchun yaxshi kontrastga ega bo‘lishi kerak. Ba’zilarimizning ko‘rish qobiliyati pasaygan. Boshqalar esa kontrast muhim bo‘lgan vaziyatda, masalan, yorqin quyosh nuri ostida bo‘lishi mumkin.

---

Nima

Biz matn yoki grafika bilan fon rangi o‘rtasidagi kontrastni o‘lchaymiz. Bu kontrast nisbati (contrast ratio) deb ataladi. Oq fondagi oq matnning kontrast nisbati 1 ga teng. Uni idrok etib bo‘lmaydi. Oq fondagi qora matnning kontrast nisbati 21 ga teng.

Ideal nisbat yo‘q. Yuqori kontrast odatda past kontrastga qaraganda o‘qishga qulayroq bo‘lsa-da, nisbat har doim ham iloji boricha yuqori bo‘lishi shart emas. Apple’ning tavsiyasiga ko‘ra, kamida 4.5 ga intilish kerak, ammo 7 afzalroq.

---

Qanday

Rang kontrastini o‘lchashning bir usuli — Contrast Ratio kabi vositadan foydalanish. U RGB, HSL va hex kabi turli rang formatlarini qabul qiladi. Hatto RGBA kabi shaffoflikni ham qo‘llab-quvvatlaydi.

---

---

Foodora misoli

Foodora asosiy brend rangi sifatida Royal Red rangidan foydalanadi. Bu rangning hex kodi #D60265. Oq fonda rang kontrasti 5.17 ga teng. Bu bezaklar, ikonkalar, logotip va tugmalar uchun yaxshi. Agar Foodora bu rangni kattaroq matn qismlari uchun ishlatganida, matnni o‘qish qiyin bo‘lardi.

---

Rasmlar ustidagi matn

Fon rasmi ustidagi matn kontrastini o‘lchash uchun rasmning eng yorug‘ yoki eng qorong‘i qismini topishimiz kerak. Agar matn och rangli bo‘lsa, eng yorug‘ qismini qidiring va aksincha.

Wolt’dan olingan ushbu misolda yorug‘ fon rasmi ustida oq matn bor. Och yashil qismda rang tanlash vositasidan (color picker) foydalansak, #a1ad95 hex qiymatini olamiz. Bu 2.35 kontrast nisbatini beradi. Bu yetarli emas. Mumkin bo‘lgan yaxshilanishlardan biri — rasmning matn joylashgan qismiga rangli qoplama (overlay) qo‘shish. Qoplama to‘liq bo‘yalgan yoki ma’lum darajada shaffof bo‘lishi mumkin.

---

Turli holatlar

Har qanday interaktiv komponent turli holatlarga ega – hover, fokus, faol (active), tashrif buyurilmagan, tashrif buyurilgan va o‘chirilgan (deactivated). Holatlar ham yaxshi kontrastga ega bo‘lishini ta’minlashni unutmang. Holatlar bilan ishlaganda ikki vaziyat haqida o‘ylashimiz kerak:

• Rang kontrasti barcha holatlar uchun yaxshi bo‘lishi kerak.
• Fokussiz holatdan fokusli holatga o‘tishdagi kontrast o‘zgarishi kamida 3 bo‘lishi kerak.

Cos kiyim do‘koni misolida navigatsiyaning rang kontrasti 9.73 ga teng.

Biroq Women ustiga sichqoncha olib borilganda hover kontrasti 2.84 ni tashkil qiladi.

---