কালার কনভার্টার - HEX, RGB, HSL ও WCAG কনট্রাস্ট
কালার কনভার্টার ও কনট্রাস্ট পরীক্ষক
HEX, rgb(), hsl() বা CSS রঙের নাম — চারটিই পড়া হয়।
শেড
একই রঙের এগারোটি উজ্জ্বলতা ধাপ। ক্লিক করলে সেটিই বর্তমান রং হয়।
কনট্রাস্ট
দুই রঙের মধ্যেকার অনুপাত, WCAG যেভাবে সংজ্ঞায়িত করে সেভাবেই মাপা।
| জোড়া | অনুপাত | AA (৪.৫:১) | AAA (৭:১) |
|---|
এই টুল কী করে
একটি রংকে এক লিখনরীতি থেকে অন্যটিতে বদলানো পাঁচ লাইনের পাটিগণিত। কঠিন প্রশ্নটি হলো ওই রঙের লেখা সত্যিই পড়া যায় কি না, আর সেই উত্তরের জন্য এমন একটি ধাপ লাগে যা বেশিরভাগ টুল এড়িয়ে যায়। দুটোই এই পাতায় আছে, আপনি যে রং লিখেছেন সেটির উপরেই।
কীভাবে ব্যবহার করবেন
- 1 যেকোনো রীতিতে রং লিখুন, বা পিকার ব্যবহার করুন।
- 2 যে রীতিটি দরকার তা কপি করুন, বা কোনো শেডে ক্লিক করে সেখানে যান।
- 3 কনট্রাস্ট টেবিলটি পড়ুন। যেটিতে “অনুত্তীর্ণ” লেখা, সেটি কারও না কারও পক্ষে পড়া কঠিন হবে।
একই রং HSL-এ আলাদা দেখায় কেন
HSL পূর্ণ ডিগ্রি ও পূর্ণ শতাংশে গোল করে, তাই HSL-এ নিয়ে আবার ফিরিয়ে আনলে সবসময় শুরুর বাইট মানই ফেরে না। এ কারণেই এখানে দেখানো HEX সবসময় আপনার দেওয়া মান থেকেই আসে, HSL ঘুরে আসা মান থেকে নয় — নইলে প্রতিটি ক্লিকে ঘরটি এক ধাপ করে সরে যেত।
কনট্রাস্টের সংখ্যাগুলো কী বোঝায়
অনুপাত দুটি একই রঙের ১:১ থেকে শুরু করে খাঁটি সাদার উপর খাঁটি কালোর ২১:১ পর্যন্ত যায়। নিচের সীমাগুলোই এই টুলের রায় দেওয়ার ভিত্তি।
| 4.5:1 | সাধারণ মূল লেখা, WCAG AA |
| 3:1 | বড় বা মোটা লেখা, WCAG AA |
| 7:1 | সাধারণ মূল লেখা, WCAG AAA |
| 21:1 | সম্ভাব্য সর্বোচ্চ অনুপাত: সাদার উপর কালো |
যে ধাপটি বেশিরভাগ টুল এড়িয়ে যায়
আপেক্ষিক ঔজ্জ্বল্য চ্যানেল মানের গড় নয়। প্রতিটি চ্যানেল আগে রৈখিক করতে হয়, কারণ HEX কোডের সংখ্যাগুলো গামা-এনকোডেড, আলোর সঙ্গে সমানুপাতিক নয়। এই ধাপ বাদ দিলে অনুপাত তবুও বিশ্বাসযোগ্য একটি সংখ্যা হিসেবে আসে, কেবল ভুল; আর ভুলটা সবচেয়ে বড় হয় মধ্যম টোনে, যেখানে ইন্টারফেসের বেশিরভাগ রং থাকে।
কনট্রাস্ট আবশ্যক, যথেষ্ট নয়
কোনো জোড়া ৪.৫:১ পার করেও খারাপ পছন্দ হতে পারে: বর্ণান্ধতা কিছু জোড়াকে উচ্চ অনুপাতেও আলাদা করতে দেয় না, আর অর্থ কখনোই শুধু রঙের কাঁধে চাপানো উচিত নয়। এখানকার “উত্তীর্ণ”-কে সর্বনিম্ন সীমা পার করা হিসেবে দেখুন, নকশার রায় হিসেবে নয়।