WCAG কালার কনট্রাস্ট চেকার — বিনামূল্যের অনলাইন টুল

WCAG কালার কনট্রাস্ট চেকার কী?

ফ্রি অনলাইন WCAG কালার কনট্রাস্ট চেকার। ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড কালার ইনপুট করুন, WCAG 2.1 AA এবং AAA স্ট্যান্ডার্ডের সাথে সামঞ্জস্য চেক করুন। প্রিসেট কালার পেয়ার এবং রিয়েল-টাইম প্রিভিউ অন্তর্ভুক্ত।

রঙের কনট্রাস্ট ওয়েব অ্যাক্সেসিবিলিটির সবচেয়ে উপেক্ষিত দিকগুলোর মধ্যে একটি, তবুও এটি সরাসরি প্রভাবিত করে কোটি ব্যবহারকারী আপনার কনটেন্ট পড়তে পারে কিনা। WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইন) 2.1 কম দৃষ্টিশক্তি, কালার ব্লাইন্ডনেস বা উজ্জ্বল সূর্যের আলোর মতো দেখার অবস্থার ব্যবহারকারীদের পাঠযোগ্যতা নিশ্চিত করতে টেক্সট এবং ব্যাকগ্রাউন্ডের রঙের জন্য নির্দিষ্ট কনট্রাস্ট অনুপাত সংজ্ঞায়িত করে। কালার কনট্রাস্ট চেকার এই মানগুলোর বিরুদ্ধে যেকোনো ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড কালার কম্বিনেশন পরিমাপ করে এবং তা পাস বা ফেইল কিনা তাৎক্ষণিকভাবে জানায়।

HEX কালার পিকার ব্যবহার করে বা সরাসরি hex ভ্যালু টাইপ করে রং লিখুন। টুলটি কনট্রাস্ট অনুপাত গণনা করে — 1:1 (কোনো কনট্রাস্ট নেই) থেকে 21:1 (সর্বোচ্চ কনট্রাস্ট, সাদার উপর কালো) পর্যন্ত একটি সংখ্যা। ফলাফলটি চারটি WCAG থ্রেশহোল্ডের বিরুদ্ধে তুলনা করা হয়: AA সাধারণ টেক্সট (4.5:1), AA বড় টেক্সট (3:1), AAA সাধারণ টেক্সট (7:1) এবং AAA বড় টেক্সট (4.5:1)। প্রতিটি থ্রেশহোল্ড একটি স্পষ্ট পাস বা ফেইল ইন্ডিকেটর দেখায়, যাতে আপনি ঠিক জানেন আপনার কালার পেয়ার কোন মান পূরণ করে।

একটি লাইভ প্রিভিউ প্যানেল আপনার নির্বাচিত রং দিয়ে রেন্ডার করা নমুনা টেক্সট দেখায়, সংখ্যাগত বিশ্লেষণের পাশে একটি ভিজ্যুয়াল চেক দেয়। এটি গুরুত্বপূর্ণ কারণ কিছু কালার কম্বিনেশন গাণিতিকভাবে পাস করলেও পড়তে অস্বস্তিকর দেখাতে পারে (বা এর বিপরীতে)। সাধারণ পরিস্থিতির জন্য আটটি প্রিসেট কালার পেয়ার অন্তর্ভুক্ত রয়েছে — ডার্ক মোড, লাইট মোড, লিংক কালার এবং ওয়ার্নিং ব্যাজ — যাতে আপনি দ্রুত বাস্তব-বিশ্বের কম্বিনেশন পরীক্ষা করতে পারেন।

টুলটি এজ কেসও পরিচালনা করে। রংগুলো খুব একই রকম হলে অনুপাত 3:1-এর নিচে নেমে যায় এবং সব চেক ব্যর্থ হয় — একটি শক্তিশালী সংকেত যে পেয়ারটি টেক্সটের জন্য অপ্রয়োজনীয়। আইকন বা ফর্ম বর্ডারের মতো নন-টেক্সট এলিমেন্টের জন্য পরীক্ষা করলে, WCAG নন-টেক্সট কনট্রাস্ট প্রয়োজনীয়তা বেশি শিথিল (সর্বনিম্ন 3:1), যা এই চেকারটি প্রাথমিক থ্রেশহোল্ডগুলো টেক্সটকে লক্ষ্য করলেও আপনাকে ভিজ্যুয়ালি মূল্যায়ন করতে সাহায্য করতে পারে।

WCAG কালার কনট্রাস্ট চেকার-এর বাস্তব ব্যবহারের উদাহরণ

ল্যান্ডিং পেজে টেক্সট পাঠযোগ্যতা নিশ্চিত

আপনার ডিজাইনার হিরো সেকশনের জন্য সাদা ব্যাকগ্রাউন্ডে হালকা ধূসর টেক্সট (#999) বেছে নিয়েছেন। এটি এখানে পরীক্ষা করুন: অনুপাত প্রায় 2.8:1 — এটি সব টেক্সট সাইজের জন্য WCAG AA ব্যর্থ করে। ফোরগ্রাউন্ডটি গাঢ় ধূসরে (#595959) সামঞ্জস্য করুন এবং সাধারণ টেক্সটের জন্য AA (4.5:1+) পাস না হওয়া পর্যন্ত পুনরায় পরীক্ষা করুন। লাইভ প্রিভিউ এক নজরে পাঠযোগ্যতা নিশ্চিত করে।

ডার্ক মোড কালার স্কিম ভ্যালিডেট করা

একটি ডার্ক মোড UI গাঢ় নীল ব্যাকগ্রাউন্ডে সাদা টেক্সট ব্যবহার করে। কম্বিনেশনটি পরীক্ষা করুন: নেভি (#0A1628) এর উপর সাদা (#FFFFFF) সাধারণত 10:1-এর উপরে অনুপাত দেয়, সহজেই AAA পাস করে। তবে, ডার্ক মোডে লিংক কালার খুব সূক্ষ্ম হতে পারে — বড় টেক্সটের জন্য অন্তত AA পূরণ করে কিনা যাচাই করতে একই গাঢ় ব্যাকগ্রাউন্ডে আপনার নীল লিংক (#4A90D9) পরীক্ষা করুন।

অ্যাক্সেসিবল বাটন ও ব্যাজ কালার নির্বাচন

আপনার নোটিফিকেশন ব্যাজ লাল ব্যাকগ্রাউন্ডে সাদা টেক্সট ব্যবহার করে। সঠিক লাল শেডটি পরীক্ষা করুন — সব লাল কনট্রাস্ট প্রয়োজনীয়তা পাস করে না। একটি উজ্জ্বল লাল (#E53E3E) সাদা টেক্সটসহ সাধারণত বড় টেক্সটের জন্য AA পাস করে তবে ছোট ব্যাজ লেবেলের জন্য ব্যর্থ হতে পারে। ব্যাজটি অন-ব্র্যান্ড এবং অ্যাক্সেসিবল উভয়ই না হওয়া পর্যন্ত লাল শেডটি সামঞ্জস্য করে পুনরায় পরীক্ষা করুন।

কেন WCAG কালার কনট্রাস্ট চেকার ব্যবহার করবেন?

WCAG 2.1 AA and AAA compliance for normal and large text
লাইভ text preview with your color combination
8 preset color pairs for common scenarios
pass/fail indicators with required ratios পরিষ্কার করুন।

WCAG কালার কনট্রাস্ট চেকার কীভাবে ব্যবহার করবেন — ধাপে ধাপে

foreground (text) and background colors. লিখুন।

the contrast ratio and WCAG compliance results. দেখুন।

preset color pairs for common scenarios. ব্যবহার করুন।

colors until all checks pass. সামঞ্জস্য করুন।

WCAG কালার কনট্রাস্ট চেকার কার জন্য সেরা?

web accessibility
UI design
WCAG compliance
color selection

WCAG কালার কনট্রাস্ট চেকার-এর জন্য প্রো টিপস

1ন্যূনতম মান হিসেবে AA সম্মতির জন্য ডিজাইন করুন। AAA আদর্শ তবে সব কনটেন্টের জন্য প্রয়োজন নয় — পাঠযোগ্যতা গুরুত্বপূর্ণ এমন দীর্ঘ-ফরম্যাট পড়ার প্রসঙ্গের জন্য AAA সংরক্ষণ করুন।
2বড় টেক্সট (18px+ নিয়মিত বা 14px+ বোল্ড) কম কনট্রাস্ট প্রয়োজনীয়তা (AA-এর জন্য 3:1) রয়েছে। হেডলাইন, বাটন এবং লেবেলের জন্য এটি ব্যবহার করুন যেগুলো বড় করে স্টাইল করা যেতে পারে।
3তথ্য জানাতে কখনই শুধু রঙের উপর নির্ভর করবেন না। কনট্রাস্ট পাস করলেও কালার ব্লাইন্ডনেসে আক্রান্ত ব্যবহারকারীদের অবস্থা আলাদা করার জন্য আইকন, আন্ডারলাইন বা লেবেলের মতো অতিরিক্ত সংকেত প্রয়োজন।
4ডেভেলপমেন্টের পরে নয় বরং ডিজাইন প্রক্রিয়ার শুরুতে কালার পেয়ার পরীক্ষা করুন। CSS-এ কনট্রাস্ট সমস্যা ঠিক করা সহজ; একটি ব্র্যান্ড কালার চূড়ান্ত হওয়ার পরে ঠিক করা অনেক কঠিন।

WCAG কালার কনট্রাস্ট চেকার — প্রায়শই জিজ্ঞাসিত প্রশ্ন

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is WCAG কালার কনট্রাস্ট চেকার really free to use?

Yes, WCAG কালার কনট্রাস্ট চেকার is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.