متن اور پس منظر کے رنگ کے درمیان WCAG کنٹراسٹ تناسب جانچیں — معمول کے متن، بڑے متن اور UI اجزاء کے لیے AA/AAA پاس-فیل گریڈ دیکھیں، لائیو پریویو اور قابلِ رسائی رنگ کی تجاویز کے ساتھ۔

متن کا رنگ
ٹِنٹ
پس منظر کا رنگ
ٹِنٹ
کنٹراسٹ تناسب
--:1
معمول کا متن
۱۸px سے کم متن (یا ۱۴px بولڈ سے کم)
AA AAA
بڑا متن
۱۸px+ باقاعدہ، یا ۱۴px+ بولڈ
AA AAA
UI اجزاء
آئیکن، بارڈرز، فارم کنٹرولز اور گرافکس
AA AAA
لائیو پریویو

The quick brown fox

بڑا متن آرام سے پڑھا جاتا ہے جب کنٹراسٹ کافی ہو۔

یہ معمول کے متن کا ایک نمونہ پیراگراف ہے۔ اچھا رنگ کنٹراسٹ آپ کا مواد سب کے لیے قابلِ پڑھ رکھتا ہے، بشمول کم بینائی یا رنگ اندھا پن والے افراد۔ ایک نمونہ لنک.

چھوٹا پرنٹ اور کیپشن سب سے مشکل ہیں — انہیں سب سے زیادہ کنٹراسٹ چاہیے۔
نمونہ بٹن نمونہ بٹن
تجویز

سب کچھ WCAG 2.x نسبتی لیومینینس فارمولے کا استعمال کرتے ہوئے آپ کے براؤزر میں لائیو حساب ہوتا ہے — کوئی اپ لوڈ نہیں، کوئی سائن اپ نہیں، مکمل مفت۔


رنگ کنٹراسٹ چیکر کے بارے میں

کلر کنٹراسٹ چیکر ٹیکسٹ رنگ اور بیک گراؤنڈ رنگ کے درمیان WCAG کنٹراسٹ ریشو ناپتا ہے، پھر عام ٹیکسٹ، بڑے ٹیکسٹ اور UI اجزاء کے لیے جوڑے کو AA اور AAA رسائی کی سطحوں کے مقابلے میں درجہ بندی کرتا ہے۔ آپ کے کسی بھی رنگ کو ایڈجسٹ کرنے کے ساتھ ہی ریشو اور ہر پاس/فیل نتیجہ فوری طور پر اپ ڈیٹ ہوتا ہے۔

ایک حقیقت پسندانہ پیش منظر پینل آپ کے منتخب کردہ ترکیب میں ہیڈنگز، باڈی کاپی، چھوٹا پرنٹ، ایک بٹن اور ایک لنک رینڈر کرتا ہے، تاکہ آپ خلاصہ سویچز کے بجائے حقیقی مواد سے پڑھنے کی صلاحیت جانچ سکیں۔ جب کوئی جوڑا فیل ہو تو ٹول قریب ترین قابلِ رسائی ٹیکسٹ رنگ تجویز کرتا ہے جو 4.5:1 کی AA حد تک پہنچتا ہے، جسے ایک کلک سے لاگو کیا جا سکتا ہے۔

ریاضی WCAG 2.x کے متعلقہ چمک (relative-luminance) فارمولے کی پیروی کرتی ہے اور مکمل طور پر آپ کے براؤزر میں چلتی ہے — کچھ بھی اپ لوڈ نہیں ہوتا اور چیک مفت ہیں۔ آپ رسائی کے جائزے یا پل ریکویسٹ میں پیسٹ کرنے کے لیے ریشو اور درجہ بندیوں کی مختصر ٹیکسٹ رپورٹ بھی کاپی کر سکتے ہیں۔

رنگ کنٹراسٹ چیکر استعمال کرنے کا طریقہ

  1. پکرز یا ویلیوز ٹائپ کر کے اپنا ٹیکسٹ رنگ اور بیک گراؤنڈ رنگ مقرر کریں۔
  2. عام ٹیکسٹ، بڑے ٹیکسٹ اور UI اجزاء کے لیے کنٹراسٹ ریشو اور AA/AAA نتائج پڑھیں۔
  3. اپنے رنگوں میں حقیقی ہیڈنگز، پیراگراف، بٹنز اور لنکس دیکھنے کے لیے لائیو پیش منظر معائنہ کریں۔
  4. اگر جوڑا فیل ہو جائے تو تجویز کردہ قابلِ رسائی ٹیکسٹ رنگ لاگو کریں یا دونوں رنگ بدل دیں۔
  5. ریشو اور تعمیل کے نتائج شیئر کرنے کے لیے "Copy report" پر کلک کریں۔

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

WCAG AA کو عام ٹیکسٹ کے لیے 4.5:1 اور بڑے ٹیکسٹ اور آئیکنز و فارم بارڈرز جیسے UI اجزاء کے لیے 3:1 درکار ہے۔ سخت تر AAA سطح کو عام ٹیکسٹ کے لیے 7:1 اور بڑے ٹیکسٹ کے لیے 4.5:1 درکار ہے۔

باقاعدہ وزن میں 18px یا اس سے بڑا، یا بولڈ ہونے پر 14px اور اس سے بڑا ٹیکسٹ۔ چونکہ بڑے حروف پہچاننا آسان ہوتا ہے، WCAG انہیں AA سطح پر 3:1 کا کم کنٹراسٹ ریشو اجازت دیتا ہے۔

جی ہاں۔ ہر چیک WCAG کے متعلقہ چمک فارمولے کا استعمال کرتے ہوئے آپ کے براؤزر میں فوری طور پر حساب کیا جاتا ہے، بغیر کسی سائن اپ، استعمال کی حد یا لاگت کے۔

بلٹ ان تجویز استعمال کریں: ٹول آپ کے ٹیکسٹ رنگ کی قریب ترین قسم تلاش کرتا ہے جو موجودہ بیک گراؤنڈ کے مقابلے میں AA پاس کرے اور آپ کو اسے براہ راست لاگو کرنے دیتا ہے۔ اگر ٹیکسٹ رنگ کی کوئی قسم پاس نہ ہو سکے تو بجائے اس کے بیک گراؤنڈ ایڈجسٹ کریں۔

یہ کلر کنٹراسٹ کے معیار کا احاطہ کرتا ہے، جو سب سے عام رسائی ناکامیوں میں سے ہیں، لیکن سب کچھ نہیں۔ آپ کو اب بھی فوکس اسٹیٹس، معلومات کی رنگ سے آزادی، فونٹ سائز اور یہ چیک کرنا چاہیے کہ کلر بلائنڈنس سیمولیشن کے تحت پیلیٹ کیسا نظر آتا ہے۔

نہیں۔ دونوں رنگ، ریشو اور تجاویز سب مقامی طور پر آپ کے براؤزر میں حساب کیے جاتے ہیں — کام کرتے وقت صفحہ کوئی سرور ریکویسٹ نہیں بھیجتا۔

شیئر کریں

مقبول تلاشیں
کلر کنٹراسٹ چیکر wcag کنٹراسٹ تناسب رسائی کنٹراسٹ چیکر ٹیکسٹ کنٹراسٹ چیکر aa aaa کنٹراسٹ ٹیسٹ کلر کنٹراسٹ آن لائن چیک کریں
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

اس مفت ٹول کو اپنی ویب سائٹ پر شامل کریں — نیچے دیا گیا کوڈ کاپی اور پیسٹ کریں۔