کنٹراسٹ چیکر کا تعارف اور کام کرنے کا طریقہ
کنٹراسٹ چیکر ایک ایسا ٹول ہے جو آپ کو متن کے رنگ اور پس منظر کے رنگ کو درج کرنے کی سہولت دیتا ہے تاکہ WCAG 2.1 / 2.2 کے معیارات کے مطابق ان کے کنٹراسٹ ریشو کا تعین کیا جا سکے۔ یہ ٹول آپ کو دکھاتا ہے کہ رنگوں کا یہ امتزاج عام متن، بڑے متن اور UI اجزاء کے لیے رسائی کے کن لیولز (AA اور AAA) پر پورا اترتا ہے۔
اس ٹول کے بنیادی ان پٹس درج ذیل ہیں:
- متن کا رنگ: رنگ کی کوئی بھی ویلیو۔ اس کے لیے قبول شدہ فارمیٹس میں ہیکس ویلیوز (جیسے
#1a1a1a)،rgb()ویلیوز (جیسےrgb(26, 26, 26))، یاhsl()ویلیوز شامل ہیں۔ - پس منظر کا رنگ: رنگ کی کوئی بھی ویلیو۔ اس کے لیے بھی قبول شدہ فارمیٹس میں ہیکس ویلیوز (جیسے
#1a1a1a)،rgb()ویلیوز (جیسےrgb(26, 26, 26))، یاhsl()ویلیوز شامل ہیں۔
جب آپ ٹول کو استعمال کرتے ہیں، تو یہ درج ذیل آؤٹ پٹس فراہم کرتا ہے:
- کنٹراسٹ کا تناسب: متن اور پس منظر کے رنگوں کے درمیان حساب کردہ تناسب، جسے "X:1" کی شکل میں دکھایا جاتا ہے۔
- عام متن: یہ AA اور AAA لیولز کے لیے "پاس" یا "ناکام" کو ظاہر کرتا ہے۔
- بڑا متن: یہ بھی AA اور AAA لیولز کے لیے "پاس" یا "ناکام" کو ظاہر کرتا ہے۔
- UI اور گرافکس: یہ سنگل 3:1 کی حد کے خلاف "پاس" یا "ناکام" کو ظاہر کرتا ہے۔ اس قطار میں AA یا AAA کا کوئی فرق نہیں ہوتا — ٹول اس کے لیے صرف ایک نتیجہ دکھاتا ہے، دو نہیں۔
- خلاصہ (Verdict): ایک خلاصہ پیغام جو سب سے اونچے پاس ہونے والے لیول کی نشاندہی کرتا ہے، جیسے:
- "عام متن کے لیے AA اور AAA پاس کرتا ہے۔"
- "عام متن کے لیے AA پاس کرتا ہے۔"
- "صرف بڑے متن کے لیے AA پاس کرتا ہے۔"
- "AA کے کم از کم معیار سے نیچے — کنٹراسٹ بڑھائیں۔"
ٹول کے ابتدائی رنگ متن کے لیے #4f46e5 اور پس منظر کے لیے #ffffff مقرر ہیں، جس کے نتیجے میں 6.29 کا کنٹراسٹ ریشو حاصل ہوتا ہے۔ اس میں موجود سویپ بٹن متن اور پس منظر کے رنگوں کو آپس میں بدل دیتا ہے۔
کنٹراسٹ ریشو کے قوانین اور حدود
کنٹراسٹ ریشو کا حساب کتاب مخصوص ریاضیاتی حدود اور قوانین کے تحت کیا جاتا ہے:
- کنٹراسٹ ریشو کی حد 1:1 (کوئی کنٹراسٹ نہیں) سے لے کر 21:1 (سفید پر سیاہ) تک ہوتی ہے۔
- عام متن کے لیے AA لیول حاصل کرنے کے لیے کم از کم 4.5:1 کا تناسب درکار ہوتا ہے۔
- عام متن کے لیے AAA لیول حاصل کرنے کے لیے کم از کم 7:1 کا تناسب درکار ہوتا ہے۔
- بڑے متن کے لیے AA لیول حاصل کرنے کے لیے کم از کم 3:1 کا تناسب درکار ہوتا ہے۔
- بڑے متن کے لیے AAA لیول حاصل کرنے کے لیے کم از کم 4.5:1 کا تناسب درکار ہوتا ہے۔
- UI اور گرافکس کی قطار کے لیے کم از کم 3:1 کا تناسب درکار ہوتا ہے، اور یہ واحد قطار ہے جس میں الگ الگ AA اور AAA لیولز کے بجائے صرف ایک ہی حد ہوتی ہے۔
اگر صارف کی طرف سے غلط رنگ درج کیے جائیں تو ٹول درج ذیل خرابیوں کے پیغامات دکھاتا ہے:
- اگر متن کا رنگ غلط درج کیا جائے تو پیغام ظاہر ہوتا ہے: "درست متن کا رنگ درج کریں، جیسے #1a1a1a یا rgb(26, 26, 26)۔"
- اگر پس منظر کا رنگ غلط درج کیا جائے تو پیغام ظاہر ہوتا ہے: "درست پس منظر کا رنگ درج کریں، جیسے #ffffff یا rgb(255, 255, 255)۔"
عام متن اور بڑے متن کا فرق
ایکسیسبیلٹی کے معیارات میں متن کے سائز کی بنیاد پر کنٹراسٹ کی شرائط بدل جاتی ہیں۔ بڑے متن کو پڑھنا نسبتاً آسان ہوتا ہے، اس لیے اس کے لیے کم کنٹراسٹ ریشو کی ضرورت ہوتی ہے۔
- بڑا متن: اس سے مراد وہ متن ہے جو 18pt (تقریباً 24px) یا اس سے زیادہ ہو، یا بولڈ ہونے کی صورت میں 14pt (تقریباً 18.5px) یا اس سے زیادہ ہو۔
- عام متن: اس سائز سے کم کا تمام متن عام متن کے زمرے میں آتا ہے جس کے لیے زیادہ سخت کنٹراسٹ ریشو (جیسے AA کے لیے 4.5:1 اور AAA کے لیے 7:1) درکار ہوتا ہے۔
اس ٹول کی ضرورت کسے ہے؟
رنگوں کے کنٹراسٹ کو چیک کرنا ویب کو سب کے لیے قابل رسائی بنانے کا ایک اہم حصہ ہے۔ اس ٹول کی ضرورت درج ذیل افراد کو ہوتی ہے:
- ڈیزائنرز: جو متن اور مختلف اجزاء کے پڑھنے کے قابل ہونے (readability) کو چیک کرتے ہیں۔
- ڈویلپرز: جو اس بات کو یقینی بناتے ہیں کہ تیار کردہ ویب سائٹس ایکسیسبیلٹی کے معیارات پر پوری اترتی ہیں۔
- کنٹینٹ ٹیمیں: جو اپنے مواد کے لیے استعمال ہونے والے رنگوں کے کنٹراسٹ کی تصدیق کرتی ہیں۔
پرائیویسی اور ڈیٹا پروسیسنگ
اس ٹول کو استعمال کرتے وقت آپ کے ڈیٹا کی مکمل پرائیویسی برقرار رہتی ہے۔ ہر چیک براہ راست آپ کے براؤزر میں ہوتا ہے، اور آپ کی درج کردہ کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
اکثر پوچھے گئے سوالات (FAQ)
AA اور AAA کے نتائج کا کیا مطلب ہے؟
AA وہ لیول ہے جس کا ہدف زیادہ تر سائٹس رکھتی ہیں: اس کے لیے عام متن کے لیے کم از کم 4.5:1 اور بڑے متن کے لیے 3:1 کا تناسب درکار ہوتا ہے۔ AAA زیادہ سخت ہے — عام متن کے لیے 7:1 اور بڑے متن کے لیے 4.5:1۔ یہ تناسب 1:1 (کوئی کنٹراسٹ نہیں) سے 21:1 (سفید پر سیاہ) تک ہوتا ہے۔
بڑا متن (large text) کسے مانا جاتا ہے؟
18pt (تقریباً 24px) سے شروع ہونے والا متن، یا بولڈ ہونے کی صورت میں 14pt (تقریباً 18.5px)۔ بڑا متن کم کنٹراسٹ پر بھی پڑھنے کے قابل رہتا ہے، اس لیے یہ عام متن کی سخت حدوں کے بجائے 3:1 پر AA اور 4.5:1 پر AAA پاس کر لیتا ہے۔
میں کون سے رنگوں کے فارمیٹس درج کر سکتا ہوں؟
ہیکس ویلیو جیسے #1a1a1a، ایک rgb() ویلیو جیسے rgb(26, 26, 26)، یا hsl() ویلیو ٹائپ کریں — یا رنگ منتخب کرنے کے لیے کسی بھی پٹی پر کلک کریں۔ متن اور پس منظر کے رنگوں کو آپس میں بدلنے کے لیے سویپ بٹن کا استعمال کریں۔
کیا یہ WCAG 2 ہے یا نیا APCA طریقہ؟
یہ WCAG 2.1 / 2.2 فارمولا استعمال کرتا ہے، جس کا حوالہ آج کل ایکسیسبیلٹی کے قوانین اور آڈٹس میں دیا جاتا ہے۔ APCA ایک نیا، زیادہ حسی طریقہ ہے جو ابھی WCAG 3 کے لیے تیار کیا جا رہا ہے — یہ امید افزا ہے، لیکن ابھی تک تعمیل کا معیار نہیں ہے، اس لیے یہاں کامیابی کے نتائج اس کا استعمال نہیں کرتے۔