WCAG 2.1 / 2.2 কনট্রাস্ট নির্দেশিকা বোঝা
ওয়েব অ্যাক্সেসিবিলিটি বা সবার জন্য ওয়েবসাইটের ব্যবহারযোগ্যতা নিশ্চিত করার ক্ষেত্রে রঙের কনট্রাস্ট একটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। "কনট্রাস্ট চেকার" টুলটি মূলত WCAG 2.1 / 2.2 স্ট্যান্ডার্ড বা নির্দেশিকা অনুসরণ করে একটি নির্দিষ্ট টেক্সটের রঙ এবং ব্যাকগ্রাউন্ডের রঙের মধ্যকার কনট্রাস্ট অনুপাত গণনা করে। এই অনুপাতটি ১:১ থেকে ২১:১ পর্যন্ত হতে পারে। ১:১ অনুপাতের অর্থ হলো রঙের মধ্যে কোনো পার্থক্য বা কনট্রাস্ট নেই, আর ২১:১ অনুপাতটি সর্বোচ্চ কনট্রাস্ট নির্দেশ করে, যা সাধারণত সাদার ওপর কালো রঙের ক্ষেত্রে দেখা যায়।
ডিজাইনার, ডেভেলপার এবং কন্টেন্ট টিমগুলোর জন্য এই কনট্রাস্ট অনুপাত বজায় রাখা অত্যন্ত জরুরি। ডিজাইনাররা এর মাধ্যমে টেক্সট ও বিভিন্ন উপাদানের পঠনযোগ্যতা যাচাই করতে পারেন, ডেভেলপাররা অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড বা নিয়মাবলী মেনে কোড লিখতে পারেন এবং কন্টেন্ট টিমগুলো তাদের প্রকাশিত উপকরণের রঙের সামঞ্জস্য পরীক্ষা করতে পারেন।
ইনপুট ফরম্যাট এবং প্রাথমিক সেটিংস
এই টুলটিতে ব্যবহারকারীরা সহজেই বিভিন্ন কালার ফরম্যাট ব্যবহার করে টেক্সট এবং ব্যাকগ্রাউন্ডের রঙ ইনপুট দিতে পারেন। গ্রহণযোগ্য ফরম্যাটগুলোর মধ্যে রয়েছে:
- হেক্স (Hex) মান: যেমন
#1a1a1a - rgb() মান: যেমন
rgb(26, 26, 26) - hsl() মান
টুলটিতে একটি সোয়াপ বাটন রয়েছে যা দিয়ে টেক্সট এবং ব্যাকগ্রাউন্ডের রঙ নিজেদের মধ্যে অদলবদল করা যায়। টুলটি চালু করার সময় প্রাথমিক টেক্সটের রঙ হিসেবে #4f46e5 এবং ব্যাকগ্রাউন্ডের রঙ হিসেবে #ffffff সেট করা থাকে, যার ফলে প্রাথমিক কনট্রাস্ট অনুপাত পাওয়া যায় ৬.২৯।
যদি ইনপুট ফিল্ডে কোনো ভুল বা অগ্রহণযোগ্য রঙ দেওয়া হয়, তবে টুলটি নির্দিষ্ট ত্রুটি বার্তা প্রদর্শন করে। টেক্সটের রঙের ক্ষেত্রে ভুল হলে একটি সঠিক টেক্সট রঙ লিখুন, যেমন: #1a1a1a বা rgb(26, 26, 26)। বার্তাটি দেখায়। একইভাবে ব্যাকগ্রাউন্ডের রঙ ভুল হলে একটি সঠিক ব্যাকগ্রাউন্ড রঙ লিখুন, যেমন: #ffffff বা rgb(255, 255, 255)। বার্তাটি প্রদর্শিত হয়।
AA এবং AAA অ্যাক্সেসিবিলিটি লেভেলের পার্থক্য
WCAG নির্দেশিকায় অ্যাক্সেসিবিলিটির দুটি প্রধান স্তর বা লেভেল হলো AA এবং AAA। এই দুটি লেভেলের জন্য কনট্রাস্টের প্রয়োজনীয়তা ভিন্ন:
| টেক্সটের ধরন | AA লেভেলের জন্য ন্যূনতম অনুপাত | AAA লেভেলের জন্য ন্যূনতম অনুপাত |
|---|---|---|
| স্বাভাবিক টেক্সট | ৪.৫:১ | ৭:১ |
| বড় টেক্সট | ৩:১ | ৪.৫:১ |
স্বাভাবিক টেক্সটের তুলনায় বড় টেক্সট সহজে পড়া যায় বলে এর জন্য কনট্রাস্টের প্রয়োজনীয়তা কিছুটা শিথিল করা হয়েছে। অ্যাক্সেসিবিলিটির নিয়ম অনুযায়ী, ১৮pt (প্রায় ২৪px) বা তার চেয়ে বড় টেক্সটকে বড় টেক্সট হিসেবে গণ্য করা হয়। তবে টেক্সটটি যদি বোল্ড বা মোটা হরফের হয়, সে ক্ষেত্রে ১৪pt (প্রায় ১৮.৫px) সাইজের টেক্সটকেও বড় টেক্সট হিসেবে বিবেচনা করা যায়।
UI উপাদান এবং গ্রাফিক্সের জন্য কনট্রাস্টের গুরুত্ব
শুধুমাত্র সাধারণ বা বড় টেক্সটই নয়, ওয়েবসাইটের বিভিন্ন ইউজার ইন্টারফেস (UI) উপাদান এবং গ্রাফিক্সের জন্যও কনট্রাস্ট অত্যন্ত গুরুত্বপূর্ণ। এই টুলটিতে UI এবং গ্রাফিক্সের জন্য একটি একক থ্রেশহোল্ড বা সীমা নির্ধারণ করা হয়েছে।
UI এবং গ্রাফিক্সের ক্ষেত্রে কোনো আলাদা AA বা AAA লেভেল নেই। এর জন্য ন্যূনতম ৩:১ কনট্রাস্ট অনুপাত প্রয়োজন। টুলটি এই একটি মাত্র সীমার ওপর ভিত্তি করে ফলাফল প্রদর্শন করে এবং এর জন্য আলাদা কোনো স্তরের বিভাজন দেখায় না।
ফলাফলের ব্যাখ্যা এবং চূড়ান্ত সিদ্ধান্ত
টুলটি ইনপুট করা রঙের ওপর ভিত্তি করে কনট্রাস্ট অনুপাত গণনা করে এবং তা "X:1" ফরম্যাটে প্রদর্শন করে। প্রতিটি পরীক্ষার ফলাফলে পাস অথবা ব্যর্থ সূচকটি দেখানো হয়।
সবশেষে, রঙের সংমিশ্রণের ওপর ভিত্তি করে টুলটি একটি চূড়ান্ত সিদ্ধান্ত বা সামারি মেসেজ প্রদান করে:
- যদি রঙ দুটি স্বাভাবিক টেক্সটের জন্য উভয় লেভেল পাস করে, তবে বার্তা দেখায়: স্বাভাবিক টেক্সটের জন্য AA এবং AAA পাস করেছে।
- যদি শুধুমাত্র AA লেভেল পাস করে, তবে বার্তা দেখায়: স্বাভাবিক টেক্সটের জন্য AA পাস করেছে।
- যদি স্বাভাবিক টেক্সটের সীমা পার না হয়ে কেবল বড় টেক্সটের জন্য পাস করে, তবে দেখায়: শুধুমাত্র বড় টেক্সটের জন্য AA পাস করেছে।
- যদি কনট্রাস্ট অনুপাত ন্যূনতম সীমার নিচে থাকে, তবে বার্তা আসে: AA ন্যূনতম সীমার নিচে — কনট্রাস্ট বাড়ান।
ব্রাউজার-ভিত্তিক প্রসেসিং এবং গোপনীয়তা
এই টুলটি ব্যবহারের ক্ষেত্রে ব্যবহারকারীর তথ্যের গোপনীয়তা বজায় থাকে। প্রতিটি পরীক্ষা সম্পূর্ণভাবে আপনার ব্রাউজারে সম্পন্ন হয়। আপনার কোনো ইনপুট BroBroGo-তে আপলোড করা হয় না।
সাধারণ জিজ্ঞাসা (FAQ)
AA এবং AAA ফলাফলের অর্থ কী?
বেশিরভাগ সাইট AA লেভেল অর্জনের লক্ষ্য রাখে: সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ এবং বড় টেক্সটের জন্য ৩:১ অনুপাত প্রয়োজন। AAA আরও কঠোর — সাধারণ টেক্সটের জন্য ৭:১ এবং বড় টেক্সটের জন্য ৪.৫:১ অনুপাত প্রয়োজন। এই অনুপাত ১:১ (কোনো কনট্রাস্ট নেই) থেকে ২১:১ (সাদার ওপর কালো) পর্যন্ত হতে পারে।
কোন টেক্সট বড় টেক্সট (large text) হিসেবে গণ্য হয়?
১৮pt (প্রায় ২৪px) থেকে শুরু হওয়া টেক্সট, অথবা বোল্ড হলে ১৪pt (প্রায় ১৮.৫px) টেক্সট। বড় টেক্সট কম কনট্রাস্টেও সহজে পড়া যায়, তাই এটি কঠোর সাধারণ টেক্সটের সীমার পরিবর্তে ৩:১ অনুপাতে AA এবং ৪.৫:১ অনুপাতে AAA পাস করে।
আমি কোন কোন কালার ফরম্যাট ইনপুট দিতে পারব?
একটি হেক্স মান যেমন #1a1a1a, একটি rgb() মান যেমন rgb(26, 26, 26), অথবা একটি hsl() মান লিখুন — অথবা রঙ বেছে নিতে যেকোনো সোয়াচে ক্লিক করুন। টেক্সট এবং ব্যাকগ্রাউন্ডের রঙ অদলবদল করতে সোয়াপ বাটনটি ব্যবহার করুন।
এটি কি WCAG 2 নাকি নতুন APCA পদ্ধতি?
এটি WCAG 2.1 / 2.2 ফর্মুলা ব্যবহার করে, যা বর্তমানে অ্যাক্সেসিবিলিটি নিয়ম এবং অডিটের ক্ষেত্রে রেফারেন্স হিসেবে ব্যবহৃত হয়। APCA হলো একটি নতুন পদ্ধতি যা WCAG 3-এর জন্য ড্রাফট করা হচ্ছে — এটি আশাব্যঞ্জক হলেও এখনো কমপ্লায়েন্স স্ট্যান্ডার্ড নয়, তাই এখানকার ফলাফলে এটি ব্যবহার করা হয়নি।