Color Contrast Checker

পুরোটাই আপনার ব্রাউজারে চলে - কিছু আপলোড নেই, সাইন-আপ নেই।

টেক্সট রঙ

ব্যাকগ্রাউন্ড রঙ

Contrast ratio

পাসAA · সাধারণ টেক্সটদরকার 4.5:1

পাসAA · বড় টেক্সটদরকার 3:1

ফেলAAA · সাধারণ টেক্সটদরকার 7:1

পাসAAA · বড় টেক্সটদরকার 4.5:1

বড় = ১৮pt (২৪px), অথবা ১৪pt (১৮.৬৬px) bold।

Color contrast checker কী?

Color contrast checker একটি টুল যা টেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে contrast ratio মাপে এবং সেটি WCAG accessibility স্ট্যান্ডার্ড পূরণ করছে কিনা জানায়। রেজাল্ট ১:১ থেকে ২১:১ এর মধ্যে আসে, এবং সাধারণ ও বড় টেক্সটের জন্য আলাদাভাবে AA ও AAA পাস বা ফেল দেখায়।

যেভাবে ব্যবহার করবেন

1রঙ দিন. টেক্সট ও ব্যাকগ্রাউন্ডের জন্য hex code, rgb() মান বা CSS color name টাইপ করুন, অথবা color swatch থেকে বেছে নিন।
2Ratio দেখুন. Contrast ratio সাথে সাথে আপডেট হয়, সাথে ব্যাকগ্রাউন্ডে টেক্সটের প্রিভিউও দেখা যায়।
3Badge চেক করুন. প্রতিটি badge সাধারণ ও বড় টেক্সটের জন্য WCAG AA ও AAA পাস বা ফেল দেখায়।

কাদের জন্য

ডিজাইনার যারা ব্র্যান্ড কালার ডেভেলপমেন্টে যাওয়ার আগে পরীক্ষা করতে চান।
Front-end ডেভেলপার যারা বাটন, লিঙ্ক ও লেবেলের রঙ WCAG AA-তে যাচাই করেন।
Accessibility অডিটর যারা সঠিক ratio সহ contrast সমস্যা নথিভুক্ত করেন।
কন্টেন্ট ও ইমেইল টিম যারা রঙিন ব্যাকগ্রাউন্ডে টেক্সট পাঠযোগ্য আছে কিনা নিশ্চিত করেন।

এই চেকার WCAG-এর অফিশিয়াল relative-luminance ফর্মুলা ব্যবহার করে, তাই এর নম্বর WebAIM checker এবং বেশিরভাগ accessibility অডিটের সাথে মেলে। সব কিছু ব্রাউজারেই চলে - রঙের তথ্য কোথাও আপলোড হয় না, কোনো সীমাবদ্ধতা নেই।

সাধারণ প্রশ্ন

এই color contrast checker কি বিনামূল্যে?

হ্যাঁ - সম্পূর্ণ বিনামূল্যে, কোনো সাইন-আপ নেই, কোনো সীমাবদ্ধতা নেই। সব কিছু ব্রাউজারেই চলে।

WCAG AA-র জন্য কত contrast ratio দরকার?

WCAG 2.1 Level AA-তে সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ এবং বড় টেক্সটের জন্য ৩:১ ratio লাগে। Level AAA-তে সাধারণ টেক্সটের জন্য ৭:১ এবং বড় টেক্সটের জন্য ৪.৫:১ দরকার।

বড় টেক্সট বলতে কী বোঝায়?

বড় টেক্সট মানে সাধারণ ওজনে কমপক্ষে ১৮pt (প্রায় ২৪px), অথবা bold-এ ১৪pt (প্রায় ১৮.৬৬px)। বড় অক্ষর পড়তে সহজ বলে এর জন্য কম contrast ratio যথেষ্ট।

Contrast ratio কীভাবে হিসাব হয়?

সূত্র হলো (L1 + 0.05) / (L2 + 0.05), যেখানে L1 ও L2 হলো হালকা ও গাঢ় রঙের relative luminance। Luminance হিসাব হয় sRGB এর লাল, সবুজ ও নীল channel থেকে, WCAG 2.x সংজ্ঞা অনুযায়ী।

Hex, RGB ও color name সব সাপোর্ট করে?

হ্যাঁ। ৩, ৪, ৬ বা ৮ সংখ্যার hex, rgb() ও rgba() মান এবং যেকোনো CSS color name যেমন 'teal' দেওয়া যায়। Native color swatch দিয়েও রঙ বেছে নেওয়া যায়।

একই ratio কখনো পাস, কখনো ফেল হয় কেন?

প্রয়োজনীয় ratio নির্ভর করে টেক্সটের আকার ও লক্ষ্য মাত্রার উপর। ৩.৫:১ ratio সাধারণ টেক্সটে AA ফেল করে, কিন্তু বড় টেক্সটে AA পাস করে - তাই সবসময় আপনার ব্যবহারের আকার ও মাত্রা অনুযায়ী চেক করুন।