1:1 to 21:1 · AA · AAA
کنٹراسٹ چیکر
سفید پر سیاہ کا WCAG کنٹراسٹ ریشیو 21:1 ہے، جو ممکنہ حد ہے، اور #0060fd پر سفید کا 5.13:1۔ اپنا جوڑا جانچنے کے لیے متن کا رنگ اور پس منظر لکھیں۔
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
ٹائپ کرتے ہی ریشیو اور پانچوں جانچیں اپ ڈیٹ ہوتی ہیں۔ ریشیو دو اعشاریوں پر کاٹا جاتا ہے، کبھی اوپر گول نہیں ہوتا، اس لیے 4.499 کا 4.49:1 دکھتا ہے اور 4.5:1 کی جانچ میں ناکام ہوتا ہے۔
Scanned by 
NortonTM Safe Web
ایک نظر میں
- قیمت
- کوئی چارج نہیں
- اکاؤنٹ
- ضرورت نہیں
- اپ لوڈ
- لاگو نہیں — آپ رنگ لکھتے ہیں، کہیں کچھ نہیں بھیجا جاتا
- فارمولا
- (ہلکی لومیننس + 0.05) ÷ (گہری لومیننس + 0.05)
- حدیں
- AA: عام 4.5:1 اور بڑا متن 3:1؛ AAA: عام 7:1 اور بڑا متن 4.5:1؛ انٹرفیس کے حصوں کے لیے 3:1
- معیار
- ریلیٹو لومیننس اور کنٹراسٹ ریشیو کی WCAG 2.2 تعریفیں
معروف جوڑوں کے کنٹراسٹ ریشیو
یہ صفیں چیکر والے ہی کوڈ سے بنی ہیں۔ ٹک کا نشان بتاتا ہے کہ جوڑا تقاضا پورا کرتا ہے؛ کراس کا مطلب ہے کہ نہیں کرتا۔
| متن کا رنگ | پس منظر | ریشیو | AA عام | AA بڑا | AAA عام | AAA بڑا | انٹرفیس کے حصے |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| جانچ | کم از کم ریشیو |
|---|---|
| AA، عام متن | 4.5:1 |
| AA، بڑا متن | 3:1 |
| AAA، عام متن | 7:1 |
| AAA، بڑا متن | 4.5:1 |
| AA، انٹرفیس کے حصے اور گرافکس | 3:1 |
رنگوں کا جوڑا کیسے جانچیں
دونوں رنگ لکھیں
متن کا رنگ اور پس منظر کا رنگ کسی بھی CSS طرز میں لکھیں، یا پکر استعمال کریں۔ سواپ بٹن دونوں کو بدل دیتا ہے، جو گہرے پس منظر پر ہلکے متن کے لیے مفید ہے۔
ریشیو پڑھیں
ریشیو 1:1 (یکساں رنگ) سے 21:1 (سفید پر سیاہ) تک ہوتا ہے۔ خانوں کے نیچے کا نمونہ جوڑے کو 16 px اور 24 px پر دکھاتا ہے، تاکہ آپ نتیجہ اپنی آنکھ سے پرکھ سکیں۔
پانچوں جانچیں دیکھیں
ہر ٹائل ایک WCAG تقاضے کے لیے پاس یا فیل بتاتی ہے: عام متن کے لیے AA اور AAA، بڑے متن کے لیے AA اور AAA، اور انٹرفیس کے حصوں کے لیے AA۔ اگر عام متن AA میں فیل ہو تو صفحہ قریب ترین ایسا متن رنگ تجویز کرتا ہے جو پاس ہو۔
کنٹراسٹ ریشیو کیسے شمار ہوتا ہے
WCAG کنٹراسٹ کو ریلیٹو لومیننس سے ناپتا ہے، یعنی رنگ کی چمک 0 (سیاہ) سے 1 (سفید) تک۔ ہر سرخ، سبز اور نیلے چینل کو 255 پر تقسیم کیا جاتا ہے؛ 0.04045 تک کی قدر کو 12.92 پر تقسیم کیا جاتا ہے، اور بڑی قدر پر طاقت لگتی ہے: (قدر + 0.055) تقسیم 1.055، پھر طاقت 2.4۔ پھر لومیننس 0.2126 ضرب سرخ جمع 0.7152 ضرب سبز جمع 0.0722 ضرب نیلا ہے، جو ظاہر کرتا ہے کہ آنکھ ہر ایک پر کتنی شدت سے ردعمل دیتی ہے۔ کنٹراسٹ ریشیو ہلکی لومیننس جمع 0.05 کو گہری لومیننس جمع 0.05 پر تقسیم کرنے سے ملتا ہے۔
WCAG 2 لیول AA پر عام متن کے لیے کم از کم 4.5:1 اور بڑے متن کے لیے 3:1 مانگتا ہے، اور لیول AAA پر 7:1 اور 4.5:1۔ بڑا متن کم از کم 18 پوائنٹ ہے، جو 24 CSS پکسل ہے، یا بولڈ میں کم از کم 14 پوائنٹ، تقریباً 18.66 پکسل۔ کامیابی کا معیار 1.4.11 انٹرفیس کے ان حصوں اور گرافکس کے لیے 3:1 مانگتا ہے جنہیں قاری کو دیکھنا ضروری ہو، جیسے خانے کی حد یا چارٹ کی لکیر۔ ریشیو کا ہر حد سے موازنہ گول کیے بغیر ہوتا ہے۔ اگر رنگ میں شفافیت ہو تو ناپنے سے پہلے شفاف پس منظر سفید پر اور شفاف متن رنگ پس منظر پر رکھا جاتا ہے۔ یہ صفحہ صرف WCAG 2.x نافذ کرتا ہے؛ یہ APCA شمار نہیں کرتا، جس پر ہدایات کے بعد کے ورژن کے لیے بات ہو رہی ہے۔
کنٹراسٹ کے سوالات
WCAG متن کے لیے کون سا کنٹراسٹ ریشیو مانگتا ہے؟
لیول AA پر عام متن کو کم از کم 4.5:1 اور بڑے متن کو کم از کم 3:1 چاہیے۔ لیول AAA پر عام متن کے لیے 7:1 اور بڑے متن کے لیے 4.5:1 ہے۔ ریشیو متن کے رنگ اور اس کے عین پیچھے کے رنگ کے درمیان ناپا جاتا ہے۔
بڑا متن کسے کہتے ہیں؟
WCAG بڑے متن کو کم از کم 18 پوائنٹ، یعنی 24 CSS پکسل، یا بولڈ میں کم از کم 14 پوائنٹ، یعنی تقریباً 18.66 CSS پکسل قرار دیتا ہے۔ اس سے چھوٹا ہر متن عام متن شمار ہوتا ہے اور اسے زیادہ ریشیو چاہیے۔
سفید پر AA پاس کرنے والا سب سے ہلکا سرمئی کون سا ہے؟
سفید پر #767676 کا ریشیو 4.54:1 ہے اور وہ عام متن کی 4.5:1 جانچ پاس کرتا ہے۔ اگلا ہلکا سرمئی #777777 4.47:1 لاتا ہے اور فیل ہوتا ہے۔ 7:1 (AAA) کے لیے سب سے ہلکا سرمئی #595959 ہے، جو 7.00:1 لاتا ہے۔
4.49 فیل کیوں ہوتا ہے جبکہ وہ 4.5 جیسا لگتا ہے؟
جانچیں عین ریشیو کا حد سے موازنہ کرتی ہیں۔ 4.499 کا ریشیو 4.5 سے کم ہے، اس لیے فیل ہوتا ہے، اور صفحہ اسے اوپر گول کرنے کے بجائے 4.49:1 چھاپتا ہے۔ سفید پر خالص سرخ ایک حقیقی مثال ہے: 3.99:1 عام متن کی 4.5:1 جانچ میں فیل ہوتا ہے، حالانکہ قریب ہے۔
آئیکنز، حدود اور فارم کے خانوں کو کتنا کنٹراسٹ چاہیے؟
کامیابی کا معیار 1.4.11 Non-text Contrast، جو WCAG 2.1 میں شامل ہوا، انٹرفیس کے ان حصوں یا گرافکس اور ان کے ساتھ والے رنگوں کے درمیان کم از کم 3:1 مانگتا ہے جنہیں قاری کو دیکھنا ضروری ہو، جیسے خانے کی حد، فوکس رنگ یا چارٹ کی لکیر۔ غیر فعال کنٹرول اور محض آرائشی گرافکس مستثنیٰ ہیں۔
کیا پاس ہونے والا ریشیو صفحے کو قابل رسائی بنا دیتا ہے؟
نہیں۔ کنٹراسٹ بہت سے تقاضوں میں سے ایک ہے۔ فونٹ کا سائز اور موٹائی، لائنوں کا فاصلہ، صرف رنگ کے ذریعے معنی پہنچانا، فوکس کی نمایاں حالت، تصویروں اور گریڈینٹ پر متن، اور مختلف رنگی بصارت والے لوگ صفحہ کیسے دیکھتے ہیں، یہ سب بھی اہم ہیں۔ اس نتیجے کو ایک معلومات سمجھیں اور صفحے کو اصل مواد کے ساتھ جانچیں۔