কালার টুলস

কম্পেয়ার কালারস এবং WCAG কন্ট্রাস্ট চেকার টুল

ডিজাইনার ও ডেভেলপারদের জন্য একটি পূর্ণাঙ্গ কালার তুলনা করার টুল। ব্যাকগ্রাউন্ড ও টেক্সটের মধ্যকার কন্ট্রাস্ট রেশিও মেপে দেখুন, WCAG ২.১ স্ট্যান্ডার্ড চেক করুন, কালারব্লাইন্ডদের দৃষ্টিতে ডিজাইন কেমন দেখাবে জানুন এবং সহজেই অ্যাক্সেসিবল কালার টিউন করুন।

Background A / Text B

Sample Heading

The quick brown fox jumps over the lazy dog.

Background B / Text A

Sample Heading

The quick brown fox jumps over the lazy dog.

কন্ট্রাস্ট রেশিও

6.83 : 1

✓ Legible for text

সাধারণ টেক্সট (AA/AAA):AA Pass
বড় টেক্সট (AA/AAA):AA Pass
ভিজ্যুয়াল পার্থক্য (Delta E)241.46

লাইভ UI মকআপ প্রিভিউ

App Navigation Header

This live preview renders how body copy, border lines, and interactive button components look when pairing Color A as background and Color B as foreground element.

ডেভেলপার কোড এক্সপোর্ট
:root {
  --color-a: #1E293B;
  --color-b: #38BDF8;
  --contrast-ratio: 6.83;
}

কেন এই টুলটি ব্যবহার করবেন?

কেন এই টুলটি ব্যবহার করবেন?

ওয়েব অ্যাক্সেসিবিলিটি নিশ্চিত করতে ব্যাকগ্রাউন্ড ও টেক্সটের সঠিক কন্ট্রাস্ট অপরিহার্য। এই টুলটি গাণিতিক কন্ট্রাস্ট রেশিও, ভিজ্যুয়াল ডিস্ট্যান্স এবং লাইভ UI প্রিভিউয়ের মাধ্যমে আপনার কালার নির্বাচন সহজ করে দেয়।

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

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

  1. ধাপ 1

    কালার ইনপুট দিন

    Color A এবং Color B বক্সে Hex/RGB কোড লিখুন বা কালার পিকার ব্যবহার করুন।
  2. ধাপ 2

    কন্ট্রাস্ট ও WCAG দেখুন

    কন্ট্রাস্ট রেশিও এবং AA/AAA ব্যাজ চেক করুন।
  3. ধাপ 3

    প্রিভিউ এবং এক্সপোর্ট নিন

    লাইভ UI মকআপ পর্যবেক্ষণ করুন এবং প্রয়োজনীয় CSS variables কপি করে ব্যবহার করুন।

পাশাপাশি কালার ও টেকনিক্যাল তুলনা

Hex, RGB বা HSL কোড ব্যবহার করে যেকোনো ২টি কালার ইনপুট দিন। টুলটি স্বয়ংক্রিয়ভাবে WCAG গাইডলাইন মেনে কন্ট্রাস্ট রেশিও এবং কালার সাইন্স অ্যালগরিদম ব্যবহার করে কালার ২টির পার্থক্য বের করে দেবে।

কালারব্লাইন্ডনেস সিমুলেশন ও UI প্রিভিউ

প্রোটানোপিয়া, ডিউটেরানোপিয়া বা ট্রাইটানোপিয়া আক্রান্ত ব্যক্তিরা আপনার সিলেক্ট করা কালার কম্বিনেশন কীভাবে দেখবে তার প্রিভিউ পান। পাশাপাশি বাটন ও কার্ড এলিমেন্টে টেক্সটের দৃশ্যমানতা পরীক্ষা করুন।

ফিচারগুলো কীভাবে কাজ করে

WCAG ২.১ কন্ট্রাস্ট ম্যাট্রিক্স

সঠিক কন্ট্রাস্ট রেশিও (১:১ থেকে ২১:১) গণনা করে টেক্সটের জন্য অফিশিয়াল AA ও AAA পাসের ব্যাজ প্রদর্শন করে।

Delta E ভিজ্যুয়াল পার্থক্য

গাণিতিক ডিস্ট্যান্স অ্যালগরিদমের মাধ্যমে মানুষের চোখে কালার ২টি কতটা আলাদা তা প্রদর্শন করে।

কালারব্লাইন্ডনেস সিমুলেটর

প্রোটানোপিয়া, ডিউটেরানোপিয়া এবং ট্রাইটানোপিয়া আক্রান্তদের ভিজ্যুয়াল অভিজ্ঞতা লাইভ সিমুলেট করে।

স্মার্ট অ্যাক্সেসিবিলিটি অটো-ফিক্স

এক ক্লিকে কালারের লাইটনেস টিউন করে WCAG AA স্ট্যান্ডার্ড পাস করানোর অপশন।

কী কী কাজে ব্যবহার করা যায়?

ওয়েব অ্যাক্সেসিবিলিটি অডিট

কোডিং করার আগে বাটন টেক্সট ও ব্যাকগ্রাউন্ড কালার WCAG গাইডলাইন পাস করে কিনা নিশ্চিত করা।

ব্র্যান্ড কালার নির্বাচন

ব্র্যান্ডের প্রাইমারি কালারের সাথে সেকেন্ডারি কালারের মানানসই ও দৃশ্যমানতা পরীক্ষা করা।

টুলের বিস্তারিত তথ্য

সাপোর্টেড ফরম্যাটHex, RGB, HSL
স্ট্যান্ডার্ডWCAG 2.1 (AA & AAA)
কালার ডিস্ট্যান্স ইঞ্জিনCIE76 / Perceptual Delta E
প্রসেসিং১০০% ব্রাউজার প্রসেসিং

সুবিধা

  • WCAG অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ডের তাৎক্ষণিক ফলাফল।
  • কালারব্লাইন্ড সিমুলেশন সুবিধা।
  • এক ক্লিকে CSS Variables ও Tailwind snippet প্রস্তুতকরণ।

সীমাবদ্ধতা

  • গণনাগুলো আদর্শ sRGB কালার স্পেসের উপর ভিত্তি করে তৈরি।

সম্পূর্ণ নিরাপদ স্থানীয় প্রসেসিং

টুলটির সমস্ত কন্ট্রাস্ট গণনা ও প্রসেসিং সরাসরি আপনার ডিভাইসের ব্রাউজারেই সম্পন্ন হয়।

ডাটা প্রাইভেসি

আপনার ইনপুট দেওয়া কালার ভ্যালু বা প্রিভিউ ডাটা কোথাও সংরক্ষণ বা ট্র্যাক করা হয় না।

টিপস

  • প্যারাগ্রাফ টেক্সট সহজে পড়ার জন্য অন্তত ৪.৫:১ কন্ট্রাস্ট রেশিও রাখার চেষ্টা করুন।
  • Swap বাটন ব্যবহার করে ব্যাকগ্রাউন্ড এবং টেক্সটের কালার পজিশন দ্রুত উল্টে দেখুন।

সাধারণ প্রশ্ন ও উত্তর

টেক্সটের জন্য আদর্শ WCAG কন্ট্রাস্ট রেশিও কত?

সাধারণ টেক্সটের জন্য WCAG AA পাসের জন্য সর্বনিম্ন ৪.৫:১ রেশিও এবং AAA পাসের জন্য ৭:১ রেশিও প্রয়োজন।

Delta E ভ্যালু কী নির্দেশ করে?

Delta E দিয়ে ২টি কালারের গাণিতিক পার্থক্য বোঝায়। ১.০ এর নিচে থাকলে চোখে পার্থক্য ধরা পড়ে না, আর ৫.০ এর বেশি হলে কালার দুটি একদম আলাদা দেখায়।

এই টুলটি ব্যবহারের জন্য কোনো রেজিস্ট্রেশন লাগবে কি?

না, টুলটি সম্পূর্ণ ফ্রি এবং অ্যাকাউন্ট ছাড়াই ব্যবহারযোগ্য।