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

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

রঙের কনট্রাস্ট চেকার হলো ডিজাইনার, ডেভেলপার ও অ্যাক্সেসিবিলিটি টেস্টারদের জন্য একটি বিনামূল্যের অনলাইন WCAG ও APCA কনট্রাস্ট চেকার। এটি রঙ HEX (#rgb, #rrggbb এবং আলফাসহ 8-অঙ্কের #rrggbbaa), rgb()/rgba() ও hsl()/hsla() হিসেবে গ্রহণ করে, পরিমাপের আগে আধা-স্বচ্ছ ফোরগ্রাউন্ডকে ব্যাকগ্রাউন্ডের উপর মিশিয়ে দেয়, এবং WCAG 2.1 অনুপাত (1:1 থেকে 21:1) ও APCA Lc উজ্জ্বলতা-কনট্রাস্ট স্কোর দুটোই জানায়। এটি WCAG 2.1 স্তর AA (সাধারণ 4.5:1, বড় 3:1) ও AAA (সাধারণ 7:1, বড় 4.5:1) চিহ্নিত করে, অ-টেক্সট UI উপাদান ও গ্রাফিক্সের জন্য 3:1 ব্যাজ যোগ করে, এবং নিকটতম উত্তীর্ণ ফোরগ্রাউন্ড পরামর্শ দিতে পারে — শুধু এর উজ্জ্বলতা AA বা AAA পূরণ না হওয়া পর্যন্ত সমন্বয় করে — যা আপনি এক ক্লিকে প্রয়োগ করেন।

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

1. ফোরগ্রাউন্ড (টেক্সট) রঙ HEX, rgb() বা hsl() হিসেবে দিন — আলফাসহ 8-অঙ্কের HEX বা rgba গ্রহণযোগ্য — অথবা দৃশ্যত বেছে নিতে কালার পিকারে ক্লিক করুন।
2. একই উপায়ে ব্যাকগ্রাউন্ড রঙ দিন; কনট্রাস্ট পরিমাপের আগে আধা-স্বচ্ছ ফোরগ্রাউন্ড এর উপর (এবং ব্যাকগ্রাউন্ড সাদার উপর) মেশানো হয়।
3. ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড যেকোনো সময় উল্টাতে অদলবদল বোতাম ব্যবহার করুন।
4. WCAG 2.1 কনট্রাস্ট অনুপাত এবং তার ঠিক পাশে দেখানো APCA Lc স্কোর পড়ুন।
5. সাধারণ ও বড় টেক্সটের জন্য AA ও AAA ব্যাজ, এবং UI উপাদান ও গ্রাফিক্সের জন্য 3:1 ব্যাজ যাচাই করুন।
6. কোনো জোড়া ব্যর্থ হলে, নিকটতম AA বা AAA উত্তীর্ণ রঙ দেখুন এবং ফোরগ্রাউন্ড হালনাগাদ করতে প্রয়োগ করুন-এ ক্লিক করুন।

উদাহরণ

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

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

ফোরগ্রাউন্ড #00000080 (50% কালো) #ffffff-এর উপর

প্রথমে একটি নিরেট ধূসরে মেশানো, তারপর WCAG অনুপাত ও APCA Lc গণনা

ফোরগ্রাউন্ড #999999, #ffffff-এর উপর — 2.85:1, AA ব্যর্থ

নিকটতম AA রঙ খুলুন এবং একই বর্ণ ধরে রেখে 4.5:1-এ পৌঁছাতে প্রয়োগ করুন-এ ক্লিক করুন

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

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

WCAG 2.1 স্তর AA-এর জন্য সাধারণ টেক্সটে কমপক্ষে 4.5:1 ও বড় টেক্সটে 3:1 প্রয়োজন; স্তর AAA-এর জন্য 7:1 ও 4.5:1। অ-টেক্সট UI উপাদান ও গ্রাফিক অবজেক্ট (SC 1.4.11)-এর জন্য 3:1 প্রয়োজন। এই চেকার এই প্রতিটি সীমার জন্য একটি উত্তীর্ণ/ব্যর্থ ব্যাজ দেখায়।

APCA Lc স্কোর কী?

APCA (অ্যাক্সেসিবল পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম) হলো WCAG 3-এর জন্য প্রস্তাবিত কনট্রাস্ট পদ্ধতি। এটি প্রায় 0 থেকে 108 পর্যন্ত একটি উজ্জ্বলতা-কনট্রাস্ট (Lc) মান দেয়, যেখানে বেশি মানে বেশি কনট্রাস্ট, এবং এটি পোলারিটি (হালকার উপর গাঢ় বনাম গাঢ়র উপর হালকা) বিবেচনা করে। এটি WCAG 2.1 অনুপাতের পাশে দেখানো হয় এবং একটি একক উত্তীর্ণ/ব্যর্থের বদলে নিজস্ব নির্দেশিকা স্তর ব্যবহার করে।

নিকটতম উত্তীর্ণ রঙের পরামর্শ কীভাবে কাজ করে?

এটি ফোরগ্রাউন্ডের বর্ণ ও স্যাচুরেশন ধরে রাখে এবং শুধু এর উজ্জ্বলতা হালকা বা গাঢ় করে যতক্ষণ না ব্যাকগ্রাউন্ডের সাপেক্ষে কনট্রাস্ট AA (4.5:1) বা AAA (7:1) পূরণ করে, তারপর আপনি এক ক্লিকে প্রয়োগ করতে পারেন। ব্যাকগ্রাউন্ড মধ্য-টোনের হলে এবং লক্ষ্যে পৌঁছানো না গেলে, এটি পরিবর্তে সম্ভাব্য নিকটতম রঙ দেখায়।

আমি কোন কোন রঙ ফরম্যাট দিতে পারি?

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

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

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