جنریٹرز افادیت

100% آن ڈیوائس • فائلیں آپ کے براؤزر کو کبھی نہیں چھوڑتی ہیں۔

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

پیش منظر اور پس منظر کے رنگوں کا انتخاب کریں اور جہاز بھیجنے سے پہلے ان کے درمیان تضاد کو چیک کریں۔ پیش نظارہ جوڑے کو حقیقی متن کے طور پر دکھاتا ہے، لہذا آپ ہیکس کوڈز سے اندازہ لگانے کے بجائے براہ راست پڑھنے کی اہلیت کا فیصلہ کر سکتے ہیں۔

Live Text Contrast Preview

Sample paragraph text demonstrating visual contrast between selected text and background colors.

WCAG Contrast Ratio

13.98 : 1

AA: Pass ✓AAA: Pass ✓

Text Color (Foreground)

Background Color

یہ کیسے کام کرتا ہے۔

1
ایک پیش منظر (ٹیکسٹ) رنگ منتخب کریں۔
2
پس منظر کا رنگ منتخب کریں جس پر یہ بیٹھے گا۔
3
پیش نظارہ کو اصل متن کے بطور اصلی سائز پر پڑھیں بجائے اس کے کہ دو نمونوں کی طرح۔
4
اقدار کو اپنی اسٹائل شیٹ، ڈیزائن ٹوکن فائل یا تھیم کنفیگریشن میں کاپی کریں۔

کلیدی فوائد اور فوائد

سیاق و سباق میں فیصلہ کیا۔

رنگوں کو پس منظر پر متن کے طور پر دکھایا جاتا ہے، جو یہ دیکھنے کا واحد طریقہ ہے کہ آیا جوڑا حقیقی طور پر پڑھنے کے قابل ہے۔

رسائی پر مبنی

کنٹراسٹ کے مسائل صارفین تک پہنچنے یا قابل رسائی آڈٹ سے پہلے واضح ہو جاتے ہیں۔

کاپی کے لیے تیار اقدار

سی ایس ایس، ایک ڈیزائن ٹوکن فائل یا جزو لائبریری تھیم میں ہیکس ویلیوز کو لے جائیں۔

فوری تکرار

کسی بھی رنگ کو ایڈجسٹ کریں اور فوری طور پر اثر دیکھیں، بغیر کسی تعمیر یا دوبارہ لوڈ کے۔

لوگ اسے کس کے لیے استعمال کرتے ہیں۔

ڈیزائن سسٹم میں اترنے سے پہلے برانڈ کے رنگ کی جوڑی کی جانچ کرنا۔
لائٹ ہاؤس یا ایکسیسبیلٹی رپورٹ میں جھنڈے والے کم کنٹراسٹ متن کو درست کرنا۔
ہلکے اور گہرے تھیم کے لیے پڑھنے کے قابل لنک اور جسمانی رنگوں کا انتخاب کرنا۔
عین مطابق ہیکس اقدار کے ساتھ اسٹائل گائیڈ میں رنگین جوڑے کی دستاویز کرنا۔

تعاون یافتہ فارمیٹس اور اختیارات

کلر ان پٹ	مقامی رنگ چننے والے یا براہ راست اندراج کے ذریعے ہیکس اقدار
پیش نظارہ	لائیو پیش منظر پر پس منظر متن کا نمونہ

رازداری اور ڈیٹا ہینڈلنگ

رنگ کا انتخاب اور پیش نظارہ مکمل طور پر صفحہ میں ہوتا ہے۔ کوئی قدر سرور کو نہیں بھیجی جاتی ہے اور نہ ہی موجودہ ٹیب سے باہر ذخیرہ کی جاتی ہے۔

حدود اور جاننے کی چیزیں

متضاد تقاضوں کا انحصار متن کے سائز اور وزن پر ہے — بڑے متن کی باڈی کاپی سے کم حد ہوتی ہے، اس لیے جوڑی کو اس سائز پر پرکھیں جو آپ اصل میں استعمال کریں گے۔
ٹول ایک ہی پیش منظر اور پس منظر کے جوڑے کو چیک کرتا ہے۔ کسی تصویر یا گریڈینٹ پر متن میں تضادات کی ایک حد ہوتی ہے، اور اسے بدترین حصے کے خلاف چیک کیا جانا چاہیے۔
رنگ کے انتخاب رنگین وژن کی کمی والے صارفین کو بھی متاثر کرتے ہیں۔ معنی رکھنے کے لیے کبھی بھی اکیلے ہیو پر انحصار نہ کریں۔

خرابی کا سراغ لگانا

ایپ میں رنگ یہاں سے مختلف نظر آتا ہے۔

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

چننے والا نہیں کھلے گا۔

مقامی رنگ کے ان پٹ کو ایک براؤزر کی ضرورت ہے جو ان پٹ قسم = رنگ کو سپورٹ کرے۔ اگر سوئچ نہیں کھلتا ہے تو براہ راست ہیکس ویلیو ٹائپ کریں۔

Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.

HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.

Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.

اکثر پوچھے گئے سوالات

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.

Why does the colour look different in my app?

Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.

Is contrast enough for accessibility?

It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.

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

WCAG AA معیارات کے تحت نارمل ٹیکسٹ کے لیے 4.5:1 کا کنٹراسٹ ریشو درکار ہے۔

مجھے کنٹراسٹ ریشو کی ضرورت ہے؟

WCAG AA باڈی ٹیکسٹ کے لیے 4.5:1 اور بڑے ٹیکسٹ کے لیے 3:1 مانگتا ہے (تقریباً 24px، یا 19px بولڈ)۔ جوڑی کا اندازہ اس سائز پر کریں کہ آپ اصل میں بھیجیں گے، کیونکہ اس کے ساتھ حد بدل جاتی ہے۔

میری ایپ میں رنگ مختلف کیوں نظر آتا ہے؟

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

کیا کنٹراسٹ رسائی کے لیے کافی ہے؟

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