ImageColorPicker.com

Rang kontrasti tekshiruvchisi

Kirish imkoniyatini ta'minlash uchun old va fon ranglari orasidagi kontrast nisbatini sinab ko'ring.

Ranglaringizni tekshiring

Matn o'qilishi uchun WCAG kirish standartlariga javob berishini ta'minlash uchun rang kombinatsiyalarini sinab ko'ring.

6.47:1
Kontrast
AA
Matn natijasi
Yaxshi

Taqqoslandi: #FFFFFF fon ustida #8631C3

Matn

16px, Regular (400)

Normal matn deb hisoblanadi.

  • AA (WCAG 1.4.3): kamida 4.5:1

    O'tdi

  • AAA (WCAG 1.4.6): kamida 7:1

    Yana 0.53 kerak

    Muvaffaqiyatsiz

Foydalanuvchi interfeysi elementlari va grafikalar

Piktogrammalar, input chegaralari, fokus ko‘rsatkichlari va interfeysdan foydalanish uchun ko‘rish kerak bo‘lgan boshqa qismlar.

  • AA (WCAG 1.4.11): kamida 3:1

    O'tdi
6.47 dan 1 ga. Matn: AA ga mos keladi, AAA talabiga javob bermaydi. UI komponentlari: mos keladi.
Qanday tekshiriladi
Taqqoslangan ranglar (aralashgandan keyin)
Matn #FFFFFF fon #8631C3 ustida
Nisbiy yoritilish (luminans)
Matn 1.0000, fon 0.1120
Formula
(L1 + 0.05) / (L2 + 0.05) bu yerda L1 yorqinroq rangning luminansi, L2 esa qorong‘i rangning luminansidir.
Aniq nisbat
6.4794 to 1, ko'rsatilganidek 6.47 to 1. Ko'rsatilgan qiymat kesib tashlangan, yaxlitlanmagan, shuning uchun u hech qachon haqiqiydan yaxshi ko'rinmaydi. Aniq qiymat talab bilan solishtiriladi.

Matn o'lchami: 16px, Regular (400)

Normal matn deb hisoblanadi. Katta matn kamida 24px (18pt) yoki qalin bo‘lsa (qalinligi 700 yoki undan yuqori) kamida 18.67px (14pt) bo‘ladi. O‘lchamlar kesilgan holda ko‘rsatiladi, yaxlitlanmaydi.

Normal matn deb hisoblanadi. Katta matn kamida 24px (18pt) yoki qalin bo‘lsa (qalinligi 700 yoki undan yuqori) kamida 18.67px (14pt) bo‘ladi. O‘lchamlar kesilgan holda ko‘rsatiladi, yaxlitlanmaydi.

Aa
Oldindan ko'rish sarlavhasi

Tez jigarrang tulki yalqov it ustidan sakraydi

Kichik matn misoli (12px)

Matn
#ffffff
Fon
#8631c3

WCAG standartlari

AA darajasi

Oddiy matn uchun 4.5:1 minimal kontrast nisbati va katta matn uchun 3:1. Ko'pgina veb-saytlar uchun talab qilinadi.

AAA darajasi

Oddiy matn uchun 7:1 kuchaytirilgan kontrast nisbati va katta matn uchun 4.5:1. Eng yaxshi kirish imkoniyatini ta'minlash uchun tavsiya etiladi.

Rang kontrasti tekshiruvchisi

Matn va fon ranglarining kontrast nisbatini hisoblang.

Matn va fon rangi uchun rang tanlang yoki RGB o'n oltilik formatda rang kiriting (masalan, #259 yoki #2596BE). Siz rangni tanlash uchun slayderni sozlashingiz mumkin. Veb-kontentga kirish imkoniyati bo'yicha yo'riqnomada (WCAG) ko'rish qobiliyatiga ega foydalanuvchilar uchun matn o'qilishi mumkinligini aniqlash uchun maxsus qo'llanma mavjud. Bu mezon rang kombinatsiyalarini solishtiriladigan nisbatlarga xaritalash uchun maxsus algoritmdan foydalanadi. Ushbu formuladan foydalanilgan holda, WCAG matn va uning fonidagi 4.5:1 rang kontrasti nisbati oddiy (asosiy) matn uchun mos ekanligini va katta matn (18+ pt oddiy yoki 14+ pt qalin) kamida 3:1 rang kontrasti nisbati bo'lishi kerakligini belgilaydi.

Asosiy xususiyatlar

  • Real vaqtda kontrast nisbatini hisoblash
  • WCAG AA & AAA moslikni tekshirish
  • Nozik sozlash uchun HSL slayderlari
  • Bir nechta ko'rish formatlari

Ilg'or vositalar

  • Avtomatik rang tuzatish
  • Matn va fon namunalar
  • Rang nomini aniqlash
  • Natijalarni eksport qilish

Ko'p so'raladigan savollar

WCAG AA muvofiqligi uchun oddiy matn kamida 4,5:1 kontrast nisbatini talab qiladi, katta matn (18pt yoki 14pt qalin) esa 3:1 ni talab qiladi.

WCAG AAA yuqoriroq kontrast nisbatlarini talab qiladi: oddiy matn uchun 7:1 va katta matn uchun 4,5:1, AA uchun esa mos ravishda 4,5:1 va 3:1.

Dizayn maqsadingizni saqlab qolgan holda matn yoki fon rangini sozlash uchun avtomatik tuzatish funksiyasidan foydalaning yoki AA/AAA muvofiqligi uchun optimal hududlarni vizual ko'rsatkichlar bilan ko'rsatuvchi HSL slayderlari orqali ranglarni qo'lda sozlang.

Yashil hududlar va AA/AAA belgilari WCAG muvofiqligi uchun optimal diapazonlarni ko'rsatadi. Yo'nalish maslahatlari (ochroq/to'qroq) joriy rang birikmangizga qarab yaxshiroq kontrastga yo'naltiradi.

Ha, istalgan HEX rang kodini kiritishingiz yoki maxsus ranglarni tanlash uchun rang tanlagichdan foydalanishingiz mumkin. URL avtomatik yangilanadi, shuning uchun aniq rang birikmalarini ulashishingiz mumkin.