Veb-dizayndagi kontrastli fon va fon ranglarini ishlatish

Veb-saytingizning okunabilirliğini va foydalanuvchi tajribasini etarli kontrast bilan yaxshilang

Har qanday veb-sayt dizayni muvaffaqiyatida kontrast muhim rol o'ynaydi. Ushbu saytning tipografiyasidan , sayt bo'ylab ishlatiladigan tasvirlarga, poydevor elementlari va fon ranglari orasidagi kontrastqa - yaxshi mo'ljallangan sayt sifatli foydalanuvchi tajribasini va uzoq muddatli sayt muvaffaqiyatini ta'minlash uchun barcha sohalarda etarli kontrastga ega bo'lishi kerak.

Past kontrasti yomon o'qish tajribasini tenglashtiradi

Aksincha, juda kam bo'lgan veb-saytlar har qanday saytning muvaffaqiyatiga salbiy ta'sir ko'rsatadigan o'qish va foydalanish qiyin bo'lishi mumkin. Kam rang kontrasti masalalari ko'pincha aniqlash oson. Odatda, veb-brauzerida ko'rsatiladigan sahifani ko'rib chiqishingiz va matni yomon rang tanlash tufayli o'qish uchun juda qiyinligini ko'rishingiz mumkin. Shunga qaramay, qanday ranglarning birgalikda ishlashini aniqlash osonroq bo'lsa ham, ranglarning boshqalarnikidan farqli ravishda qanday ishlashini aniqlash juda qiyin bo'lishi mumkin. Ishlamasligingiz mumkin emas, lekin nima ishlayotganingizni qanday aniqlaysiz? Ushbu maqoladagi rasm sizga turli xil ranglarni aks ettirishi va oldingi va orqa fon ranglari sifatida qanday farqlanishini ko'rsatishi kerak. Siz ba'zi "yaxshi" juftlarni va ayrim "yomon" juftlarni ko'rishingiz mumkin, bu sizning loyihalaringizda to'g'ri rang tanlashingizga yordam beradi.

Kontrast haqida

Bir narsani ta'kidlash kerakki, kontrast fon rangi bilan qanchalik yorqinroq bo'lishidan qat'i nazar. Yuqorida keltirilgan tasvirda ko'rib turganingizdek, bu ranglarning ba'zilari juda yorqin va fon rangida jonli ravishda namoyon bo'ladi - qora kabi ko'k kabi, lekin men uni hali ham zaif kontrastga ega deb belgiladi. Buni qildim, chunki yorqin bo'lishi mumkin bo'lsa-da, rang kombinatsiyasi hali matnni o'qishni qiyinlashtiradi. Agar siz qora fonda barcha ko'k matda sahifani yaratmoqchi bo'lsangiz, o'quvchilaringiz juda tez ko'zga tashlanadi. Shuning uchun kontrast faqatgina qora va oq emas (ha, bu punlama mo'ljallangan). Kontrastlar uchun qoidalar va eng yaxshi amaliyotlar mavjud, ammo dizayner sifatida ular sizning muayyan ishingizda ishlayotganligiga ishonch hosil qilish uchun har doim ushbu qoidalarni baholashingiz kerak.

Ranglarni tanlash

Kontrast - bu sizning veb-saytingiz dizayni uchun ranglarni tanlashda e'tiborga olish kerak bo'lgan omillardan biridir, ammo bu muhim ahamiyatga ega. Ranglarni tanlayotganda, kompaniyaning tovar standartlarini yodda tuting, shuningdek, ranglar sxemasiga murojaat qiling, ular tashkilotning ko'rsatmalariga mos kelishi mumkin bo'lsa-da, onlayn tarzda ishlamang. Masalan, har doim sariq va yorqin ko'katlarni veb-saytlarda samarali foydalanish juda qiyin bo'lgan. Agar bu ranglar kompaniyaning brend ko'rsatmalarida bo'lsa, ular aksincha ranglar sifatida ishlatilishi kerak, chunki bu bilan ham yaxshi kontrastli ranglarni topish oson emas.

Shunga o'xshash, tovaringiz ranglari qora va oq bo'lsa, bu juda katta kontrastni bildiradi, lekin sizda uzoq matnli sayt mavjud bo'lsa, oq matnli qora fonni o'qish juda qiyin bo'ladi. Hatto qora va oq o'rtasidagi farq katta, oq matni qora fonda uzoq vaqt o'tishi uchun ko'z siqilishiga olib keladi. Bunday holda, men oq fonda oq matni ishlatish uchun ranglarni o'zgartirardim. Bu vizual tarzda qiziqish bo'lmasligi mumkin, ammo siz bundan ko'ra yaxshiroq kontrastni topa olmaysiz!

Onlayn vositalar

O'zingizning dizayningizdan tashqari sizning saytingizning rangi tanlovini sinovdan o'tkazish uchun foydalanishingiz mumkin bo'lgan ba'zi onlayn vositalar mavjud.

CheckMyColors.com saytdagi barcha ranglarni tekshiradi va sahifadagi elementlarning kontrasti darajasi haqida hisobot beradi.

Bundan tashqari, ranglarni tanlash haqida o'ylashganda, shuningdek, veb-saytning mavjudligi va rangli ko'rni ko'rgan kishilarni ham ko'rib chiqishingiz kerak. WebAIM.org bunga yordam berishi mumkin, chunki siz WCAG ko'rsatmalari bo'yicha tanlovingizni sinovdan o'tkazadigan ContrastChecker.com bo'lishi mumkin.