WCAG কনট্রাস্ট চেকার — AA/AAA অনলাইন _

WCAG কনট্রাস্ট পরীক্ষা কয়েকটি সরল ধাপের মধ্য দিয়ে চলে। কিছুই আপনার ব্রাউজার ছেড়ে যায় না।

1. আপনি একটি অগ্রভূমি এবং একটি পটভূমির রং প্রবেশ করেন। টুলটি hex, rgb(), hsl() বা নামযুক্ত CSS রংগুলিকে তাদের লাল, সবুজ এবং নীল চ্যানেল মানগুলিতে পার্স করে।
2. প্রতিটি RGB চ্যানেলকে sRGB ট্রান্সফার ফাংশন ব্যবহার করে লিনিয়ারাইজ করা হয়। এটি গামা-এনকোডেড ডিসপ্লে মানগুলিকে লিনিয়ার আলোর তীব্রতায় রূপান্তর করে।
3. লিনিয়ার মানগুলি প্রতিটি চ্যানেলে মানুষের চোখের সংবেদনশীলতা অনুসারে ওজন করা হয় — লালের জন্য 0.2126, সবুজের জন্য 0.7152, নীলের জন্য 0.0722। যোগফল হল রঙের আপেক্ষিক লুমিন্যান্স।
4. কনট্রাস্ট অনুপাত হল (L1 + 0.05) ÷ (L2 + 0.05), যেখানে L1 হল হালকা রঙের লুমিন্যান্স এবং L2 হল গাঢ় রঙের। অতিরিক্ত 0.05 সূত্রটিকে বিশুদ্ধ কালোর জন্য বৈধ রাখে।
5. অনুপাতটি WCAG থ্রেশহোল্ডের বিরুদ্ধে তুলনা করা হয়: AA স্বাভাবিক টেক্সটের জন্য কমপক্ষে 4.5:1, AA বড় টেক্সটের জন্য 3:1, AAA স্বাভাবিক টেক্সটের জন্য 7:1 এবং AAA বড় টেক্সটের জন্য 4.5:1 প্রয়োজন। বড় টেক্সট বলতে কমপক্ষে 18pt বা 14pt বোল্ড বোঝায়।

FAQ

WCAG কনট্রাস্ট পরীক্ষা সম্পর্কে সাধারণ প্রশ্ন।

AA এবং AAA-এর মধ্যে পার্থক্য কী?

AA হল বেশিরভাগ ওয়েব কন্টেন্টের জন্য ন্যূনতম কনফরমেন্স লেভেল। এটির জন্য স্বাভাবিক টেক্সটে কমপক্ষে 4.5:1 এবং বড় টেক্সটের জন্য 3:1 কনট্রাস্ট অনুপাত প্রয়োজন। AAA একটি উচ্চতর মান যা স্বাভাবিক টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1 প্রয়োজন। আপনি মূল কন্টেন্টের জন্য AAA লক্ষ্য করতে পারেন যেমন একটি নিউজ সাইটের বডি কপি, যখন বিস্তৃত ডিজাইনের জন্য AA ব্যবহার করেন। ব্র্যান্ড রঙের সাথে সর্বত্র AAA পূরণ করা কঠিন হতে পারে, তাই অনেক টিম সর্বত্র AA লক্ষ্য করে এবং যেখানে সম্ভব মূল টেক্সটকে AAA-তে উন্নীত করে।

WCAG-এর অধীনে "বড় টেক্সট" হিসেবে কী গণনা করা হয়?

WCAG 2.x বড় টেক্সটকে সংজ্ঞায়িত করে নিয়মিত ওজনের জন্য কমপক্ষে 18 পয়েন্ট (24px) বা বোল্ড ওজনের জন্য 14 পয়েন্ট (প্রায় 19px) হিসেবে। ফন্ট ফেসের অংশ যে প্রতীক ও আইকনগুলি একই থ্রেশহোল্ড অনুসরণ করে। আপনার UI-তে কোন থ্রেশহোল্ড প্রযোজ্য তা নিশ্চিত না হলে, উভয়ই পরীক্ষা করে দেখুন — AA Large-এর নিম্ন বার (3:1) রয়েছে, তাই বেশিরভাগ রঙের জোড়া যা AA Normal-এ ফেল করে তা AA Large-এ পাস করে যখন টেক্সট যথেষ্ট বড় হয়।

কেন আমার জোড়া AA Large পাস করে কিন্তু AA Normal-এ ফেল করে?

কারণ AA Large-এর জন্য শুধুমাত্র 3:1 অনুপাত প্রয়োজন যখন AA Normal-এর জন্য 4.5:1 প্রয়োজন। WCAG বড় টেক্সটের জন্য কম থ্রেশহোল্ড সেট করে কারণ বড় অক্ষর এমনকি কম কনট্রাস্টেও পড়া সহজ। একটি রঙের জোড়া যা, ধরা যাক, 4.0:1 স্কোর করে সেটি AA Large (3:1 থ্রেশহোল্ড) পাস করে কিন্তু AA Normal (4.5:1 থ্রেশহোল্ড) ফেল করে। সাদা পটভূমিতে হালকা ব্র্যান্ড রঙের সাথে এটি খুব সাধারণ।

আমি কি অ্যাক্সেসিবিলিটি অডিটিংয়ের জন্য শুধুমাত্র এই টুলের উপর নির্ভর করতে পারি?

এই টুলটি একটি জিনিস পরীক্ষা করে — দুটি কঠিন রঙের মধ্যে WCAG 2.x কনট্রাস্ট অনুপাত। প্রকৃত অ্যাক্সেসিবিলিটি আরও বেশি কিছু জড়িত: ফোকাস ইন্ডিকেটর, ফন্ট সাইজ এবং ওয়েট, তথ্য জানানোর একমাত্র উপায় হিসেবে রঙ এবং স্ক্রিন রিডার ও জুম টুলের সাথে সামঞ্জস্য। আপনার অ্যাপ্লিকেশনের অ্যাক্সেসিবিলিটির সম্পূর্ণ চিত্র পাওয়ার জন্য এই কনট্রাস্ট পরীক্ষাটি অন্যান্য অডিট পদ্ধতির পাশাপাশি ব্যবহার করুন।

ইনপুট কী কী রঙের ফরম্যাট গ্রহণ করে?

আপনি 3, 4, 6 বা 8-অঙ্কের হেক্স কোড (# সহ বা ছাড়া), লেগেসি কমা সিনট্যাক্স বা আধুনিক স্পেস-বিভক্ত সিনট্যাক্সে rgb() এবং rgba() মান, যেকোনো স্ট্যান্ডার্ড হিউ ইউনিট (deg, rad, grad, turn) সহ hsl() এবং hsla(), hsv(), hwb() এবং CSS কালার মডিউল লেভেল 4 স্পেক থেকে যেকোনো 150টি নামযুক্ত CSS রং পেস্ট করতে পারেন। রঙটি সম্পূর্ণরূপে আপনার ডিভাইসে পার্স করা হয়।