রঙ রূপান্তরকারী ও কনট্রাস্ট চেকার

রূপান্তরকারী রিয়েল টাইমে HEX (#rrggbb), RGB (rgb(r, g, b)), এবং HSL (hsl(h, s%, l%)) এর মধ্যে একটি একক রঙ অনুবাদ করে, তাই আপনি আপনার ডিজাইন সিস্টেম যে ফরম্যাট ব্যবহার করে তা পেস্ট করে অন্য দুটি পেতে পারেন। কনট্রাস্ট চেকার একটি অগ্রভাগ ও পটভূমি নেয়, sRGB গামা বক্ররেখার মাধ্যমে উভয়কে লিনিয়ারাইজ করে এবং সাধারণ ও বড় টেক্সট সাইজের জন্য AA / AAA রায়সহ WCAG 2.x কনট্রাস্ট অনুপাত রিপোর্ট করে।

উদাহরণ

ইনপুট — একটি সাধারণ ব্র্যান্ড নীল:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

পটভূমি হিসেবে সাদা (#ffffff)-এর বিরুদ্ধে জোড়া:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

এই রঙ জোড়ার জন্য WCAG AAA কেন ব্যর্থ হয়?

এগুলি সবচেয়ে সাধারণ কনট্রাস্ট এবং রূপান্তরের সমস্যা যা লক্ষ্য রাখার যোগ্য:

• AA large-কে AA normal-এর সাথে গুলিয়ে ফেলা। বড় টেক্সটের জন্য শুধুমাত্র 3:1 দরকার, তাই H1-এ ভালো পড়া একটি লিংক বডি সাইজে ব্যর্থ হতে পারে। একটি জোড়া যদি 3.5:1 আঘাত করে, এটি শিরোনাম পাস করে কিন্তু প্যারাগ্রাফে ব্যর্থ হয়।
• কনট্রাস্টের পরিবর্তে HSL লাইটনেস ব্যবহার করা। hsl(0, 100%, 50%) (লাল) এবং hsl(240, 100%, 50%) (নীল) উভয়ের L=50% কিন্তু লুমিন্যান্স খুব ভিন্ন। HSL লাইটনেস থেকে নয়, সর্বদা RGB মান থেকে কনট্রাস্ট গণনা করুন।
• আলফা কম্পোজিটিং ভুলে যাওয়া। সাদায় rgba(0, 0, 0, 0.6)-এ টেক্সট কার্যত #666666। সেমি-ট্রান্সপারেন্ট মান নয়, ফ্ল্যাটেন্ড HEX চেক করুন।
• ভুল hex দৈর্ঘ্য। #fff #ffffff-এ প্রসারিত হয়, কিন্তু #ffff একটি আলফা বাইট সহ একটি 4-সংখ্যার সংক্ষিপ্ত রূপ। যখন একটি HEX ফিল্ড নীরবে ইনপুট প্রত্যাখ্যান করে তখন সংখ্যা গণনা ডাবল-চেক করুন।
• display-P3 এবং sRGB মিশ্রিত করা। ওয়াইড-গ্যামাট মোডে Figma-এর মতো ডিজাইন টুল থেকে নেওয়া রঙ sRGB রেঞ্জের বাইরে হতে পারে, এবং ব্রাউজার তাদের ক্লিপ করবে। HEX কপি করার আগে সোর্স টুলে sRGB-তে রূপান্তর করুন।
• শুধু বিশুদ্ধ সাদার বিরুদ্ধে কনট্রাস্ট পরীক্ষা করা। যদি আসল লেআউট #f3f4f6-এ বা একটি ছবিতে টেক্সট রাখে, দৃশ্যমান কনট্রাস্ট কম। আসল পটভূমির সাথে পরীক্ষা করুন।

WCAG AA পাস করতে আমার কোন কনট্রাস্ট অনুপাত দরকার?

WCAG 2.1 AA সাধারণ বডি টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1 প্রয়োজন, যেখানে বড় মানে কমপক্ষে 18 pt (24 px) রেগুলার বা 14 pt (18.66 px) মোটা। UI উপাদান এবং গ্রাফিকাল অবজেক্টের পটভূমির বিরুদ্ধে 3:1 দরকার। AAA সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1-এ বার বাড়ায়।

আমি যে HSL টাইপ করি তা কেন কিছুটা ভিন্ন RGB মান ফেরত দেয়?

HSL বেশিরভাগ টুলে পূর্ণসংখ্যা শতাংশ হিসাবে সংরক্ষিত হয়, তাই RGB থেকে HSL থেকে RGB রাউন্ড-ট্রিপ প্রতিটি চ্যানেলে এক একক পরিবর্তন করতে পারে। সেই ড্রিফট একটি JND-এর মধ্যে এবং স্ক্রিনে অদৃশ্য, কিন্তু যদি আপনার সঠিক রাউন্ড-ট্রিপ বিশ্বস্ততা দরকার, HEX বা RGB মানকে সত্যের উৎস হিসাবে রাখুন এবং HSL-কে ভিউ হিসাবে বিবেচনা করুন।

এই টুলটি কি কনট্রাস্টের জন্য sRGB গামা সংশোধন ব্যবহার করে?

হ্যাঁ। কনট্রাস্ট গণনা WCAG 2.x সূত্র অনুসরণ করে, যা গামা বক্ররেখার সাথে প্রতিটি sRGB চ্যানেলকে লিনিয়ারাইজ করে, আপেক্ষিক লুমিন্যান্স গণনা করে এবং (L1 + 0.05) / (L2 + 0.05) নেয়। চ্যানেলের সরল গড় বা নিষ্পাপ HSL লাইটনেস বিভ্রান্তিকর সংখ্যা দেয় এবং WCAG ফলাফলের সাথে মেলে না।

আমি কীভাবে আলফা বা সেমি-ট্রান্সপারেন্ট রঙ পরিচালনা করব?

WCAG কনট্রাস্ট একটি সলিড পটভূমির বিরুদ্ধে সংজ্ঞায়িত, তাই প্রথমে আসল ব্যাকড্রপের উপর অগ্রভাগটি কম্পোজিট করে যেকোনো আলফা ফ্ল্যাটেন করুন। উদাহরণস্বরূপ, একটি সাদা পৃষ্ঠায় 50% কালো টেক্সট ব্লক কার্যত #ffffff-এ #808080। সেমি-ট্রান্সপারেন্ট মানের পরিবর্তে সেই ফ্ল্যাটেন্ড HEX চেকারে পাস করুন।

HEX #rgb কি #rrggbb-এর মতো?

হ্যাঁ। 3-সংখ্যার সংক্ষিপ্ত রূপ প্রতিটি নিবল পুনরাবৃত্তি করে প্রসারিত করে, তাই #f0c #ff00cc হয়। 4-সংখ্যা এবং 8-সংখ্যার রূপ একটি আলফা চ্যানেল যোগ করে। এই টুলটি 3-সংখ্যা, 6-সংখ্যা, এবং 8-সংখ্যার HEX গ্রহণ করে, এবং কনট্রাস্টের জন্য আলফা বাইটকে শুধু তথ্যমূলক হিসাবে বিবেচনা করে যেহেতু WCAG একটি সলিড কম্পোজিটেড রঙ প্রয়োজন।

আপনি কি আমি টাইপ বা বাছাই করা রঙ সংরক্ষণ করেন?

না। আপনি যে রঙ পরীক্ষা, রূপান্তর বা কনট্রাস্টের জন্য চেক করেন তার কোনো রেকর্ড আমরা রাখি না। আপনি যা টাইপ বা পিকারে টেনে আনেন তা ট্যাব বন্ধ করলে বাতিল হয় — কোনো লগিং নেই, আপনার রঙের মানগুলিতে কোনো অ্যানালিটিক্স নেই। নিজে দেখতে চাইলে আপনার ব্রাউজারের developer tools-এ উঁকি দিন।