رنگ کنورٹر اور کنٹراسٹ چیکر

کنورٹر ایک رنگ کو HEX (#rrggbb)، RGB (rgb(r, g, b))، اور HSL (hsl(h, s%, l%)) کے درمیان ریئل ٹائم میں ترجمہ کرتا ہے، لہذا آپ جو بھی فارمیٹ آپ کا ڈیزائن سسٹم استعمال کرتا ہے پیسٹ کر سکتے ہیں اور دوسرے دو حاصل کر سکتے ہیں۔ کنٹراسٹ چیکر فور گراؤنڈ اور بیک گراؤنڈ لیتا ہے، دونوں کو sRGB گاما وکر کے ذریعے لینیئرائز کرتا ہے، اور عام اور بڑے متن کے سائز کے لیے AA / AAA فیصلوں کے ساتھ WCAG 2.x کنٹراسٹ تناسب رپورٹ کرتا ہے۔

مثال

ان پٹ — ایک عام برانڈ نیلا:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

سفید (#ffffff) کے خلاف بطور بیک گراؤنڈ جوڑا:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

اس رنگ کے جوڑے کے لیے WCAG AAA کیوں ناکام ہوتا ہے؟

یہ سب سے عام کنٹراسٹ اور کنورژن کے نقصانات ہیں جن پر نظر رکھنے کے قابل ہیں:

• AA large کو AA normal سے الجھانا۔ بڑے متن کو صرف 3:1 چاہیے، لہذا ایک لنک جو H1 میں اچھا پڑھتا ہے وہ بھی باڈی سائز پر ناکام ہو سکتا ہے۔ اگر ایک جوڑا 3.5:1 پر پہنچتا ہے، یہ ہیڈ لائنز پاس کرتا ہے لیکن پیراگرافس میں ناکام ہوتا ہے۔
• کنٹراسٹ کے بجائے HSL lightness کو استعمال کرنا۔ hsl(0, 100%, 50%) (سرخ) اور hsl(240, 100%, 50%) (نیلا) دونوں کی L=50% ہے لیکن بہت مختلف لیومیننس۔ کنٹراسٹ ہمیشہ RGB ویلیوز سے حساب کریں، HSL lightness سے نہیں۔
• الفا کمپوزیٹنگ بھول جانا۔ سفید پر rgba(0, 0, 0, 0.6) کا متن مؤثر طور پر #666666 ہے۔ سیمی-ٹرانسپیرنٹ ویلیو نہیں، فلیٹنڈ HEX چیک کریں۔
• غلط hex لمبائی۔ #fff #ffffff تک پھیلتا ہے، لیکن #ffff ایک الفا بائٹ کے ساتھ 4 ہندسوں کی مختصر شکل ہے۔ جب HEX فیلڈ خاموشی سے ان پٹ مسترد کرے تو ہندسوں کی تعداد دوبار چیک کریں۔
• display-P3 اور sRGB ملانا۔ وائڈ-گیمٹ موڈ میں Figma جیسے ڈیزائن ٹولز سے لیے گئے رنگ sRGB رینج سے باہر ہو سکتے ہیں، اور براؤزر انہیں کلپ کریں گے۔ HEX کاپی کرنے سے پہلے سورس ٹول میں sRGB میں کنورٹ کریں۔
• کنٹراسٹ کو صرف خالص سفید کے خلاف ٹیسٹ کرنا۔ اگر حقیقی لے آؤٹ متن کو #f3f4f6 پر یا تصویر پر رکھتا ہے، تو نظر آنے والا کنٹراسٹ کم ہے۔ اصل بیک گراؤنڈ کے ساتھ ٹیسٹ کریں۔

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

WCAG 2.1 AA کو عام باڈی متن کے لیے 4.5:1 اور بڑے متن کے لیے 3:1 کی ضرورت ہے، جہاں بڑا کا مطلب کم از کم 18 pt (24 px) ریگولر یا 14 pt (18.66 px) بولڈ ہے۔ UI اجزاء اور گرافیکل آبجیکٹس کو ان کے بیک گراؤنڈ کے خلاف 3:1 چاہیے۔ AAA عام متن کے لیے 7:1 اور بڑے متن کے لیے 4.5:1 تک بار بلند کرتا ہے۔

میں جو HSL دوبارہ ٹائپ کرتا ہوں وہ کچھ مختلف RGB ویلیوز کیوں دیتا ہے؟

HSL زیادہ تر ٹولز میں عددی فیصد کے طور پر محفوظ ہوتا ہے، لہذا RGB سے HSL سے RGB تک راؤنڈ ٹرپ ہر چینل پر ایک یونٹ تبدیل ہو سکتا ہے۔ وہ بہاؤ JND کے اندر ہے اور اسکرین پر غیر مرئی، لیکن اگر آپ کو درست راؤنڈ ٹرپ وفاداری چاہیے، HEX یا RGB ویلیو کو سچ کے ذریعہ کے طور پر رکھیں اور HSL کو ایک نظارے کے طور پر پرکھیں۔

کیا یہ ٹول کنٹراسٹ کے لیے sRGB گاما کریکشن استعمال کرتا ہے؟

جی ہاں۔ کنٹراسٹ کا حساب WCAG 2.x فارمولے کی پیروی کرتا ہے، جو ہر sRGB چینل کو گاما وکر کے ساتھ لینیئرائز کرتا ہے، نسبتی لیومیننس کا حساب لگاتا ہے، اور (L1 + 0.05) / (L2 + 0.05) لیتا ہے۔ چینلز کا سادہ اوسط یا سادہ HSL lightness گمراہ کن نمبرز دیتا ہے اور WCAG کے نتیجے سے میل نہیں کھائے گا۔

میں الفا یا سیمی-ٹرانسپیرنٹ رنگوں کو کیسے سنبھالوں؟

WCAG کنٹراسٹ ٹھوس بیک گراؤنڈ کے خلاف طے کیا گیا ہے، لہذا پہلے اصل بیک گراؤنڈ پر فور گراؤنڈ کو کمپوزیٹ کر کے کسی بھی الفا کو فلیٹ کریں۔ مثال کے طور پر، سفید صفحے پر 50% سیاہ متن بلاک مؤثر طور پر #ffffff پر #808080 ہے۔ سیمی-ٹرانسپیرنٹ ویلیو کے بجائے وہ فلیٹنڈ HEX چیکر میں پاس کریں۔

کیا HEX #rgb #rrggbb کے برابر ہے؟

جی ہاں۔ 3 ہندسوں کی مختصر شکل ہر نبل کو دہرا کر پھیلاتی ہے، لہذا #f0c #ff00cc بن جاتا ہے۔ 4 ہندسوں اور 8 ہندسوں کی شکلیں الفا چینل شامل کرتی ہیں۔ یہ ٹول 3 ہندسوں، 6 ہندسوں، اور 8 ہندسوں کے HEX کو قبول کرتا ہے، اور الفا بائٹ کو کنٹراسٹ کے لیے صرف معلوماتی طور پر پرکھتا ہے کیونکہ WCAG کو ٹھوس کمپوزیٹڈ رنگ کی ضرورت ہے۔

کیا آپ ان رنگوں کو محفوظ کرتے ہیں جو میں ٹائپ یا منتخب کرتا ہوں؟

نہیں۔ ہم ان رنگوں کا کوئی ریکارڈ نہیں رکھتے جنہیں آپ ٹیسٹ، کنورٹ یا کنٹراسٹ کے لیے چیک کرتے ہیں۔ آپ جو بھی پکر میں ٹائپ یا گھسیٹتے ہیں وہ ٹیب بند کرتے ہی ضائع ہو جاتا ہے — کوئی لاگنگ نہیں، آپ کی رنگ کی ویلیوز پر کوئی اینالیٹکس نہیں۔ اگر آپ خود دیکھنا چاہیں تو اپنے براؤزر کے developer tools میں جھانک لیں۔