ڈیزائنرز کے لیے WCAG رنگ کنٹراسٹ
4.5:1 کا اصول، کنٹراسٹ ریشو کا حساب، اور کسی بھی رنگ کے جوڑے کو جانچنے کے مفت ٹولز۔
اگر آپ کا متن WCAG AA کنٹراسٹ میں ناکام ہوتا ہے، تو اندازاً 285 ملین بصارت سے محروم افراد اسے نہیں پڑھ سکتے۔ اس کے علاوہ، EU اور US میں آپ تیزی سے غیر مستحکم قانونی بنیاد پر ہیں۔ اچھی خبر: اصول آسان ہے۔
4.5:1 کا اصول
باڈی ٹیکسٹ کا اپنے پس منظر کے خلاف کم از کم 4.5:1 کا کنٹراسٹ ریشو ہونا ضروری ہے تاکہ WCAG AA پاس ہو سکے۔ بڑے متن (24px+ عام یا 18px+ بولڈ) کے لیے کم بار 3:1 ہے۔
AAA کی تعمیل کے لیے: باڈی کے لیے 7:1، بڑے متن کے لیے 4.5:1۔
کنٹراسٹ ریشو کا حساب کیسے لگایا جاتا ہے
WCAG رشتہ دار روشنی (relative luminance) استعمال کرتا ہے — ہر رنگ کو ایک مخصوص فارمولے کا استعمال کرتے ہوئے روشنی کی قدر (0 = سیاہ، 1 = سفید) میں تبدیل کریں، پھر (L1 + 0.05) / (L2 + 0.05) کا حساب لگائیں، جہاں L1 ہلکا رنگ ہے۔
آپ کو حساب کرنے کی ضرورت نہیں ہے — ہمارا مفت کنٹراسٹ چیکر استعمال کریں تاکہ کسی بھی دو رنگوں کو ڈال کر ریشو دیکھ سکیں۔
عام ناکامی کے کیسز
- سفید پر ہلکا سرمئی — #999 on #fff = 2.85 (ناکام)۔ #767676 on #fff = 4.54 (پاس)۔
- پیلے پر سفید — تقریباً ہمیشہ ناکام ہوتا ہے۔ پیلے پر گہرا متن استعمال کریں۔
- باڈی ٹیکسٹ میں رنگین لنکس — زیادہ تر نیلے لنکس سفید پر پاس ہوتے ہیں لیکن ہلکے سرمئی پر ناکام ہوتے ہیں۔ اصل ارد گرد کے پس منظر کو جانچیں۔
- برانڈ رنگ جو بہت اچھے لگتے ہیں — وہ اکثر ناکام ہوتے ہیں۔ آف وائٹ پس منظر شامل کریں یا متن کو گہرا کریں۔
قابل رسائی رنگ کے جوڑے چننا
تین قابل اعتماد نمونے:
- روشن پر گہرا — #1f2937 on #fff = 14:1 (بہترین)۔
- گہرے پر سفید — #fff on #1f2937 = 14:1 (بہترین)۔
- ایکسنٹ پر گہرا — #1f2937 on #fbbf24 = 9:1 (بٹنوں کے لیے بہترین)۔
متن سے آگے
WCAG 2.1 کو غیر متن عناصر (بٹن، فوکس رنگ، فارم بارڈرز) کے لیے بھی 3:1 کی ضرورت ہے۔ چیکر دونوں کو ہینڈل کرتا ہے۔
وال پیپرز جو آپ کے ویجٹس سے نہیں لڑیں گے
اگر آپ ایک ڈیزائنر ہیں جو کلاک ویجٹس اور نوٹیفیکیشنز کے پیچھے وال پیپرز لگا رہے ہیں، تو ویجٹ زونز میں 5:1 سے کم کنٹراسٹ والے وال پیپرز چنیں۔ ہمارا Gaussian blur ٹول کسی بھی وال پیپر کے مصروف علاقوں کو ویجٹ کی پڑھنے کی اہلیت کے لیے نرم کر سکتا ہے۔
ہمارے مفت ٹولز آزمائیں
ان میں سے زیادہ تر گائیڈز ایک عملی ٹول کے ساتھ آتی ہیں جسے آپ ابھی استعمال کر سکتے ہیں — پہلی بار استعمال کے لیے سائن اپ کی ضرورت نہیں:
- امیج ریسائزر — پکسل پرفیکٹ ڈاؤن اسکیل + اپ اسکیل۔
- WebP میں تبدیل کریں — JPG سے 30-50% چھوٹی فائلیں۔
- پس منظر ہٹانے والا — ایک کلک کٹ آؤٹ، شفاف PNG۔
- Favicon جنریٹر — ایک ذریعہ سے ہر براؤزر سائز۔
- سوشل میڈیا ریسائزر — ہر پلیٹ فارم کے عین مطابق طول و عرض۔
- بلک پروسیسنگ — ایک بار میں 200 تصاویر تک کسی بھی ٹول کا اطلاق کریں۔
مکمل ٹول کیٹلاگ براؤز کریں۔
