রঙের কনট্রাস্ট চেকার

রঙের কনট্রাস্ট চেকার কী?

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

রঙের কনট্রাস্ট চেকার কীভাবে ব্যবহার করবেন

1. ফোরগ্রাউন্ড (টেক্সট) রঙটি HEX মান হিসেবে টাইপ বা পেস্ট করুন, অথবা দৃশ্যত বেছে নিতে এর নেটিভ কালার পিকারে ক্লিক করুন।
2. টেক্সট যে ব্যাকগ্রাউন্ড রঙের উপর বসে তার জন্যও একই কাজ করুন।
3. কনট্রাস্ট অনুপাত আউটপুট পড়ুন, যা 4.5:1-এর মতো একটি মান হিসেবে দেখানো হয় (1:1 মানে অভিন্ন রঙ, 21:1 মানে সাদার উপর বিশুদ্ধ কালো)।
4. কোন স্তরগুলো উত্তীর্ণ হয় তা দেখতে সাধারণ টেক্সট ও বড় টেক্সটের (18pt / 14pt বোল্ড ও তার বেশি) AA ও AAA ব্যাজ যাচাই করুন।
5. টেক্সট স্বচ্ছন্দে পাঠযোগ্য কি না তা নিশ্চিত করতে আপনার দুটি রঙ দিয়ে রেন্ডার করা নমুনা-টেক্সট প্রিভিউটি দেখুন।
6. আপনার ডিজাইনের প্রয়োজনীয় কনট্রাস্ট স্তরে না পৌঁছানো পর্যন্ত যেকোনো একটি রঙ সমন্বয় করুন।

উদাহরণ

ফোরগ্রাউন্ড #595959, ব্যাকগ্রাউন্ড #ffffff

অনুপাত 7.00:1 — সাধারণ ও বড় টেক্সটের জন্য AA ও AAA উত্তীর্ণ

ফোরগ্রাউন্ড #999999, ব্যাকগ্রাউন্ড #ffffff

অনুপাত 2.85:1 — AA সাধারণ ও AAA ব্যর্থ, বডি টেক্সটের জন্য প্রয়োজনীয় কিছুই উত্তীর্ণ হয় না

ফোরগ্রাউন্ড #767676, ব্যাকগ্রাউন্ড #ffffff

অনুপাত 4.54:1 — AA সাধারণ ও AA বড় উত্তীর্ণ, কিন্তু AAA সাধারণ ব্যর্থ

সচরাচর জিজ্ঞাসিত প্রশ্ন

WCAG কোন কনট্রাস্ট অনুপাত দাবি করে?

WCAG 2.1 স্তর AA-এর জন্য সাধারণ টেক্সটে কমপক্ষে 4.5:1 ও বড় টেক্সটে 3:1 প্রয়োজন। স্তর AAA আরও কঠোর: সাধারণ টেক্সটে 7:1 ও বড় টেক্সটে 4.5:1। এই চেকার ওই চারটি সীমার প্রতিটির জন্য একটি উত্তীর্ণ/ব্যর্থ ব্যাজ দেখায়।

কোনটিকে বড় টেক্সট ধরা হয়?

WCAG বড় টেক্সটকে 18pt (প্রায় 24px) ও তার বেশি, অথবা বোল্ড হলে 14pt (প্রায় 18.66px) ও তার বেশি হিসেবে সংজ্ঞায়িত করে। বড় টেক্সটের কনট্রাস্ট প্রয়োজনীয়তা কম কারণ বড় গ্লিফ পড়া সহজ, এ কারণেই সাধারণ টেক্সটের ব্যাজ ব্যর্থ হলেও বড় টেক্সটের ব্যাজ উত্তীর্ণ হতে পারে।

কনট্রাস্ট অনুপাত কীভাবে গণনা করা হয়?

এটি অফিসিয়াল WCAG সূত্র ব্যবহার করে: প্রতিটি রঙের আপেক্ষিক ল্যুমিন্যান্স তার রৈখিকীকৃত sRGB চ্যানেল থেকে গণনা করা হয়, এবং অনুপাত হলো (উজ্জ্বলতর + 0.05) / (গাঢ়তর + 0.05)। ফলাফল 1:1 (অভিন্ন রঙ) থেকে 21:1 (সাদার উপর কালো) পর্যন্ত হয়।

এটি কি আলফা, RGB বা নামকৃত রঙ সমর্থন করে?

ইনপুট শুধু HEX (#rgb সংক্ষিপ্ত বা #rrggbb), প্রতিটি ফিল্ডের জন্য একটি নেটিভ কালার পিকার সহ। এটি আলফা/অস্বচ্ছতা বা আংশিক স্বচ্ছতা বিবেচনা করে না — প্রথমে আধা-স্বচ্ছ স্তরগুলোকে একটি নিরেট রঙে মিলিয়ে নিন, তারপর সেটি যাচাই করুন।

আমার রঙ কি কোনো সার্ভারে পাঠানো হয়?

না। ল্যুমিন্যান্স ও অনুপাতের গণনা সম্পূর্ণরূপে আপনার ব্রাউজারে JavaScript দিয়ে চলে — কোনো রঙ আপলোড হয় না এবং সার্ভারে কিছুই পাঠানো হয় না, তাই এটি গোপনীয়ভাবে এবং পেজ একবার লোড হওয়ার পর অফলাইনেও কাজ করে।