কনট্রাস্ট চেকার দুটি রঙের মধ্যে WCAG 2.1 কনট্রাস্ট রেশিও গণনা করে এবং সাধারণ ও বড় টেক্সট উভয়ের জন্য AA/AAA থ্রেশহোল্ডের বিপরীতে গ্রেড দেয়। লাইভ প্রিভিউ বেছে নেওয়া রঙে রেন্ডার করা টেক্সট দেখায়, এবং একটি "pick page background" বাটন বর্তমান পেজ থেকে নমুনা নেয়।
অ্যাক্সেসিবিলিটি ক্রমশই বাধ্যতামূলক হয়ে উঠছে — অনেক এখতিয়ারে WCAG মেনে চলা একটি আইনি প্রয়োজনীয়তা, আর যেখানে তা নয় সেখানেও দুর্বল কনট্রাস্ট ব্যবহারকারীদের দূরে ঠেলে দেয়। কনট্রাস্ট চেকার তাৎক্ষণিকভাবে জানায় যেকোনো দুটি রঙ WCAG মান পূরণ করে কিনা। কালার পিকার দিয়ে একটি ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড বেছে নিন বা hex ভ্যালু পেস্ট করুন; টুলটি অফিসিয়াল WCAG luminance ফর্মুলা ব্যবহার করে কনট্রাস্ট রেশিও গণনা করে এবং চারটি থ্রেশহোল্ডের বিপরীতে গ্রেড দেয়: AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), এবং AAA large (≥4.5:1)। প্রতিটি থ্রেশহোল্ডে স্পষ্ট Pass/Fail ব্যাজ দেখা যায়। একটি লাইভ প্রিভিউ বেছে নেওয়া রঙে বড় ও সাধারণ টেক্সট রেন্ডার করে, যাতে আপনি প্রকৃত ভিজ্যুয়াল প্রভাব দেখতে পারেন। একটি সুবিধাজনক বাটন বর্তমান পেজের body ব্যাকগ্রাউন্ডের নমুনা নেয় — কোনো আসল সাইটে একটি রঙের সংমিশ্রণ পাস করছে কিনা তা যাচাই করার জন্য উপযোগী। সবকিছু আপনার ব্রাউজারে লোকালি চলে, কোনো আপলোড নেই।
কনট্রাস্ট রেশিও গণনা করতে অফিসিয়াল WCAG luminance ফর্মুলা ব্যবহার করে। ফলাফল নির্ভুল এবং প্রতিটি কমপ্লায়েন্ট অ্যাক্সেসিবিলিটি চেকারের সাথে মেলে।
AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4.5:1)-এর জন্য pass/fail — সবকিছু একটি গ্রিডে দেখানো হয়।
আপনার বেছে নেওয়া রঙে আসল বড় ও সাধারণ টেক্সট রেন্ডার করে, যাতে সংখ্যাগত রেশিওর পাশাপাশি ভিজ্যুয়াল প্রভাবও দেখতে পান।
এক ক্লিকে বর্তমান পেজের গণনাকৃত body ব্যাকগ্রাউন্ড রঙের নমুনা নেয় — বাস্তব-বিশ্বের সংমিশ্রণ পরীক্ষার জন্য উপযোগী।
একটি hex ভ্যালু টাইপ করুন বা নেটিভ কালার পিকার ব্যবহার করুন। যেকোনোটি এডিট করলে ভ্যালুগুলো দুই দিকেই সিঙ্ক হয়।
এক ক্লিকে সুইচ ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড উল্টে দেয় — ইনভার্টেড থিম বা হোভার স্টেট যাচাই করার সময় উপযোগী।
একটি কালার প্যালেট চূড়ান্ত করার আগে, প্রতিটি টেক্সট রঙ তার ব্যাকগ্রাউন্ডের বিপরীতে চেক করে WCAG AA কমপ্লায়েন্স নিশ্চিত করুন — পরে পুনরায় কাজ করা এড়ায়।
একটি লাইভ সাইটে "pick page background" ব্যবহার করুন, তারপর আসল টেক্সট রঙ পেস্ট করুন — Lighthouse না খুলেই মিনিটের মধ্যে a11y লঙ্ঘন খুঁজে বের করুন।
যখন একটি ব্র্যান্ড এমন রঙ বেছে নেয় যা a11y ফেইল করতে পারে, তখন নিকটতম কমপ্লায়েন্ট ভ্যারিয়েন্ট (গাঢ়/হালকা শেড) খুঁজতে চেকার ব্যবহার করুন।
যাচাই করুন হোভার/অ্যাক্টিভ/ডিসেবলড স্টেট রঙও কনট্রাস্ট প্রয়োজনীয়তা পূরণ করে, শুধু ডিফল্ট রঙ নয়।
ডার্ক থিমে প্রায়ই ধূসর-ওপর-ধূসর টেক্সটে কনট্রাস্ট ফেইল হয়। এগুলো ধরতে আপনার সবচেয়ে গাঢ় ধূসর রঙকে সবচেয়ে গাঢ় ব্যাকগ্রাউন্ডের বিপরীতে চেক করুন।
DevSuite Pro ডকে Contrast আইকনে ক্লিক করুন। ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড কালার ফিল্ড সহ একটি প্যানেল খুলবে।
প্রতিটির জন্য কালার পিকার ব্যবহার করুন বা একটি hex ভ্যালু পেস্ট করুন। রঙ বদলানোর সাথে সাথে লাইভ প্রিভিউ আপডেট হয়।
বড় সংখ্যাটি (যেমন 4.8:1) হলো কনট্রাস্ট রেশিও। যত বেশি তত ভালো। 3 হলো ন্যূনতম; সাধারণ টেক্সটের জন্য টার্গেট 4.5।
AA ও AAA, সাধারণ ও বড় টেক্সট সাইজের জন্য Pass/fail ব্যাজ এক নজরে দেখায় আপনার সংমিশ্রণ কোন যোগ্যতা পূরণ করে।
ফেইল হলে, রঙ পরিবর্তন করুন। টার্গেট টায়ার Pass না দেখানো পর্যন্ত ফোরগ্রাউন্ড গাঢ় করুন বা ব্যাকগ্রাউন্ড হালকা করুন (বা উল্টোটা)।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
