رنگوں کے ٹولز

رنگ کنٹراسٹ چیکر: WCAG AA اور AAA تناسب – مفت

مفت، سائن اپ کی ضرورت نہیں، آپ کے براؤزر میں چلتا ہے۔ متن کا رنگ اور پس منظر کا رنگ لکھیں تاکہ WCAG کنٹراسٹ تناسب اور AA اور AAA کے پاس یا فیل نتائج دیکھیں۔ فیل ہو تو قریب ترین پاس ہونے والا رنگ کلک کریں۔

بڑا متن اس طرح نظر آتا ہے

عام متن ایسا نظر آتا ہے۔ A quick brown fox jumps over the lazy dog، اور کیپشن جیسا چھوٹا متن نیچے ہوتا ہے۔

چھوٹا متن: 14px کا کیپشن۔

بٹن
کنٹراسٹ تناسب13.08:1
  • عام متن، AA: کامیابمتن کے لیے کم از کم 4.5:1
  • عام متن، AAA: کامیاببہتر، کم از کم 7:1
  • بڑا متن، AA: کامیاب18pt+ یا 14pt+ بولڈ، کم از کم 3:1
  • بڑا متن، AAA: کامیاببہتر، کم از کم 4.5:1
  • آئیکن اور کنٹرولز، AA: کامیاببٹن، بارڈر، چارٹ لائنز: 3:1

WCAG 2 کنٹراسٹ فارمولا استعمال ہوتا ہے۔ تناسب کبھی اوپر گول نہیں کیے جاتے، اس لیے 4.49:1 کو 4.5:1 نہیں مانا جاتا۔ جانچ آپ کے آلے پر ہوتی ہے۔

رنگ کنٹراسٹ چیکر کیوں استعمال کریں

100% مفت
جتنی بار چاہیں استعمال کریں۔ سائن اپ نہیں، واٹر مارک نہیں، کچھ انسٹال نہیں کرنا۔
ڈیزائن سے نجی
جو آپ لکھتے ہیں وہ آپ کے براؤزر میں رہتا ہے اور کبھی ہمیں نہیں بھیجا جاتا۔
ہر آلے پر کام کرتا ہے
Windows، Mac، Linux، Android اور iPhone پر آپ کے براؤزر میں چلتا ہے۔ کسی ایپ کی ضرورت نہیں۔

رنگ کنٹراسٹ چیکر کیسے استعمال کریں

  1. متن کا رنگ اور پس منظر HEX، rgb()، hsl() یا navy جیسے نام میں لکھیں، یا نمونوں سے چنیں۔ انہیں الٹنے کے لیے “بدلیں” استعمال کریں۔
  2. کنٹراسٹ تناسب اور پانچ نتائج پڑھیں: عام متن AA اور AAA، بڑا متن AA اور AAA، اور آئیکنز اور کنٹرولز۔
  3. لائیو پیش نظارہ میں عنوان، متن، چھوٹی تحریر اور بٹن اپنے رنگوں میں دیکھیں۔
  4. اگر کوئی سطح فیل ہو تو “پاس ہونے والے قریب ترین رنگ” میں سے کوئی کلک کریں۔ یہ آپ کا ہیو برقرار رکھتا ہے اور صرف متن کی روشنی یا گہرائی بدلتا ہے۔

اکثر پوچھے جانے والے سوالات

مجھے کتنا کنٹراسٹ تناسب چاہیے؟

WCAG AA عام متن کے لیے 4.5:1 اور بڑے متن اور بٹنوں، بارڈرز اور آئیکنز جیسے انٹرفیس حصوں کے لیے 3:1 مانگتا ہے۔ AAA عام متن کے لیے 7:1 اور بڑے متن کے لیے 4.5:1 مانگتا ہے۔

بڑا متن کسے شمار کیا جاتا ہے؟

کم از کم 18 پوائنٹ (24px) عام، یا 14 پوائنٹ (تقریباً 18.7px) بولڈ۔

کنٹراسٹ تناسب کیسے نکالا جاتا ہے؟

WCAG 2 فارمولے سے: ہر رنگ کی ریلیٹو لومنینس نکالی جاتی ہے، پھر ہلکے رنگ میں 0.05 جمع کر کے گہرے رنگ میں 0.05 جمع کرنے سے تقسیم کیا جاتا ہے۔ نتیجہ 1:1 (کوئی کنٹراسٹ نہیں) سے 21:1 (سیاہ پر سفید) تک ہوتا ہے۔

4.49:1 کیوں فیل ہوتا ہے؟

WCAG کہتا ہے کہ تناسب کو اوپر گول نہیں کیا جا سکتا، اس لیے 4.5:1 سے کم کوئی بھی عام متن کے لیے AA پر پورا نہیں اترتا۔ یہ ٹول کبھی تناسب اوپر گول نہیں کرتا۔

فیل ہونے والا رنگ کیسے درست کروں؟

“پاس ہونے والے قریب ترین رنگ” کے تحت ٹول AA کے لیے ایک متن رنگ اور AAA کے لیے ایک تجویز کرتا ہے۔ ہر ایک آپ کا ہیو اور سیچوریشن برقرار رکھتا ہے اور صرف لائٹنس بدلتا ہے، تاکہ آپ کا برانڈ رنگ پہچانا جا سکے۔ استعمال کے لیے ایک پر کلک کریں۔

کیا یہ شفاف متن کے رنگ سنبھالتا ہے؟

جی ہاں۔ شفاف متن کا رنگ، جیسے rgba(26, 20, 70, 0.6)، کنٹراسٹ ناپنے سے پہلے پس منظر کے ساتھ ملایا جاتا ہے۔ پس منظر کی شفافیت نظرانداز ہوتی ہے اور اسے ٹھوس سمجھا جاتا ہے۔

کیا بٹنوں اور آئیکنز کو بھی کنٹراسٹ چاہیے؟

جی ہاں۔ WCAG 2.1 انٹرفیس حصوں (بٹن کے بارڈرز، فارم فیلڈز، آئیکنز، چارٹ کی لکیریں) اور ان کے ساتھ والے رنگوں کے درمیان 3:1 مانگتا ہے۔ “آئیکنز اور کنٹرولز” کا نتیجہ یہی جانچتا ہے۔

کیا پاس ہونے کا مطلب ہے کہ میری سائٹ قابلِ رسائی ہے؟

اس کا مطلب ہے کہ رنگوں کی یہ جوڑی WCAG کنٹراسٹ کے اصول پر پوری اترتی ہے۔ قابلِ رسائی ہونا اس سے کہیں زیادہ ہے، جیسے متن کا سائز، فوکس کی حالت، alt متن اور کی بورڈ کا استعمال، اس لیے اسے کئی جانچوں میں سے ایک سمجھیں۔

کیا رنگ کنٹراسٹ چیکر مفت ہے؟

جی ہاں۔ یہ استعمال کے لیے مفت ہے، سائن اپ کی ضرورت نہیں اور کچھ انسٹال نہیں کرنا۔

مدد اور طریقہ کار کی گائیڈز (انگریزی میں)

متعلقہ ٹولز