অন্যান্য CSS বৈশিষ্ট্যের সাথে contrast-color() inferring css-tricks

আপনার কাছে একটি কনফিগারযোগ্য পটভূমির রঙ সহ একটি উপাদান রয়েছে এবং আপনি গণনা করতে চান যে অগ্রভাগের পাঠ্যটি হালকা বা অন্ধকার হওয়া উচিত। যথেষ্ট সহজ বলে মনে হচ্ছে, বিশেষ করে জেনেছি যে আমাদের অ্যাক্সেসযোগ্যতার বিষয়ে কতটা সচেতন হতে হবে।

সম্প্রতি এই কার্যকারিতার জন্য ফাংশন স্পেসিফিকেশনের কিছু খসড়া করা হয়েছে, contrast-color() (পূর্বে color-contrast()) লেভেল 5 ড্রাফ্টে CSS কালার মডিউল। কিন্তু সাফারি এবং ফায়ারফক্সই একমাত্র ব্রাউজার যা এখনও পর্যন্ত এটি প্রয়োগ করেছে, এই কার্যকারিতার চূড়ান্ত সংস্করণ সম্ভবত এখনও দূরে রয়েছে। ইতিমধ্যে CSS-এ অনেক কার্যকারিতা যোগ করা হয়েছে; এতটাই যে আমি দেখতে চেয়েছিলাম আজকে আমরা ক্রস-ব্রাউজার বন্ধুত্বপূর্ণ উপায়ে এটি বাস্তবায়ন করতে পারি কিনা। আমার যা আছে তা এখানে:

color: oklch(from  round(1.21 - L) 0 0);

আমি এখানে কিভাবে এসেছি তা আমাকে ব্যাখ্যা করুন।

WCAG 2.2

WCAG দুটি RGB রঙের মধ্যে বৈসাদৃশ্য গণনা করতে ব্যবহৃত সূত্র প্রদান করে এবং Stacy Arellano এটিকে বিশদভাবে বর্ণনা করেছেন। এটি পুরানো পদ্ধতির উপর ভিত্তি করে, গণনা করে উজ্জ্বলতা রঙের (এগুলি উপলব্ধিগতভাবে কতটা উজ্জ্বল দেখায়) এবং এমনকি মনিটর এবং স্ক্রিন ফ্লেয়ারের সীমাবদ্ধতাগুলি ক্যাপচার করার চেষ্টা করে:

L1 + 0.05 / L2 + 0.05

…যেখানে হালকা রঙ (L1) শীর্ষে রয়েছে। উজ্জ্বলতার রেঞ্জ 0 থেকে 1 পর্যন্ত, এবং এই ভগ্নাংশটি 1 (1.05/1.05) থেকে 21 (1.05/.05) পর্যন্ত বৈসাদৃশ্য অনুপাতের জন্য দায়ী৷

আরজিবি রঙের উজ্জ্বলতা গণনা করার সূত্রগুলি আরও অগোছালো, তবে আমি শুধু নির্ধারণ করার চেষ্টা করছি যে সাদা বা কালো একটি প্রদত্ত রঙের সাথে উচ্চতর বৈসাদৃশ্য থাকবে এবং কিছুটা সরলীকরণ করে এটি থেকে মুক্তি পেতে পারি। আমরা এই মত কিছু সঙ্গে শেষ:

L = 0.1910(R/255+0.055)^2.4 + 0.6426(G/255+0.055)^2.4 + 0.0649(B/255+0.055)^2.4

যা আমরা করতে পারে এইভাবে CSS এ রূপান্তর করুন:

calc(.1910*pow(r/255 + .055,2.4)+.6426*pow(g/255 + .055,2.4)+.0649*pow(b/255 + .055,2.4))

আমরা 1 বা 0 ব্যবহার করে এই পুরো জিনিসটিকে রাউন্ড করতে পারি round()সাদা জন্য 1 এবং কালো জন্য 0:

round(.67913 - .1910*pow(r/255 + .055, 2.4) - .6426*pow(g/255 + .055, 2.4) - .0649*pow(b/255 + .055, 2.4))

আসুন এটিকে 255 দ্বারা গুণ করি এবং আপেক্ষিক রঙের সিনট্যাক্স সহ তিনটি চ্যানেলের জন্য এটি ব্যবহার করি। আমরা এটি দিয়ে শেষ করি:

color: rgb(from   
  round(173.178 - 48.705*pow(r/255 + .055, 2.4) - 163.863*pow(g/255 + .055, 2.4) - 16.5495*pow(b/255 + .055, 2.4), 255)  
  round(173.178 - 48.705*pow(r/255 + .055, 2.4) - 163.863*pow(g/255 + .055, 2.4) - 16.5495*pow(b/255 + .055, 2.4), 255)  
  round(173.178 - 48.705*pow(r/255 + .055, 2.4) - 163.863*pow(g/255 + .055, 2.4) - 16.5495*pow(b/255 + .055, 2.4), 255)  
);

একটি সূত্র যা, রঙ দেওয়া হলে, WCAG 2-এর উপর ভিত্তি করে সাদা বা কালো ফেরত দেয়। এটি পড়া সহজ নয়, তবে এটি কাজ করে… ব্যতীত যে APCA ভবিষ্যতের WCAG নির্দেশিকাগুলিতে এটিকে একটি নতুন, উন্নত সূত্র দিয়ে প্রতিস্থাপন করতে সেট করা হয়েছে। আমরা আবার গণিত করতে পারি, যদিও APCA একটি আরও জটিল সূত্র। আমরা এটিকে কিছুটা পরিষ্কার করার জন্য CSS ফাংশনগুলির সুবিধা নিতে পারি, তবে শেষ পর্যন্ত এই বাস্তবায়নটি অ্যাক্সেসযোগ্য, পড়া কঠিন এবং বজায় রাখা কঠিন হবে।

নতুন পদ্ধতি

আমি একধাপ পিছিয়ে গিয়ে ভাবলাম আমাদের কাছে আর কি পাওয়া যায়। আমাদের আরেকটি নতুন বৈশিষ্ট্য রয়েছে যা আমরা চেষ্টা করতে পারি: রঙের স্থান। “L*CIELAB কালার স্পেসে মান দেখায় উপলব্ধিগত হালকাতা. এটি আমাদের চোখ যা দেখতে পারে তা প্রতিফলিত করার জন্য বোঝানো হয়েছে। এটি উজ্জ্বলতার মতো নয়, তবে এটি কাছাকাছি। সম্ভবত আমরা অনুমান করতে পারি যে ইন্দ্রিয়গত হালকাতার উপর ভিত্তি করে আরও ভাল বৈসাদৃশ্যের জন্য কালো বা সাদা ব্যবহার করতে হবে; আসুন দেখি আমরা এমন একটি সংখ্যা খুঁজে পেতে পারি যেখানে কম উজ্জ্বলতার সাথে আমরা কালো ব্যবহার করি এবং বেশি উজ্জ্বলতার সাথে যে কোনো রঙ আমরা সাদা ব্যবহার করি।

আপনি স্বজ্ঞাতভাবে মনে করতে পারেন এটি 50% বা .5 হওয়া উচিত, কিন্তু তা নয়। অনেক রং, এমনকি যদি তারা উজ্জ্বল হয়, এখনও কালো থেকে সাদা ভাল মেলে. এখানে কিছু উদাহরণ ব্যবহার করা হচ্ছে lch()রঙ একই রেখে ধীরে ধীরে হালকাতা বাড়ান:

ট্রানজিশন পয়েন্ট যেখানে সাদা থেকে কালো টেক্সট পড়া সহজ হয় সাধারণত 60-65 এর মধ্যে থাকে। সুতরাং, কন্ট্রাস্ট গণনা করার জন্য APCA ব্যবহার করার সময়, কাট অফ কোথায় হওয়া উচিত তা গণনা করতে Colorjs.io ব্যবহার করে আমি একটি দ্রুত নোড অ্যাপ তৈরি করেছি।

জন্য oklch()আমি খুঁজে পেয়েছি যে পরিসীমা .65 এবং .72 এর মধ্যে, যার গড় .69।

অন্য কথায়:

• যখন OKLCH লাইটনেস .72 বা তার বেশি হয়, কালো সবসময় সাদার চেয়ে ভালো কনট্রাস্ট দেবে।
• .65 এর নিচে, সাদা সবসময় কালো থেকে ভালো কনট্রাস্ট দেবে।
• .65 এবং .72 এর মধ্যে, কালো এবং সাদা উভয় ক্ষেত্রেই বৈসাদৃশ্য সাধারণত 45-60 এর মধ্যে থাকে।

সুতরাং, শুধু ব্যবহার round() এবং .72 এর উপরের সীমাতে, আমরা একটি নতুন, ছোট বাস্তবায়ন করতে পারি:

color: oklch(from  round(1.21 - L) 0 0);

আপনি যদি ভাবছেন যে 1.21 কোথা থেকে এসেছে, সেটা হল .72 রাউন্ড ডাউন এবং .71 রাউন্ড আপ: 1.21 - .72 = .49 বৃত্তাকার নিচে, এবং 1.21 - .71 = .5 চারপাশে বৃত্ত

এই সূত্রটি খুব ভাল কাজ করে, এই সূত্রটির কয়েকটি পুনরাবৃত্তি উৎপাদনে করার পরে। এটি পড়া এবং বজায় রাখা সহজ। এটি বলেছে, এই সূত্রটি WCAG-এর চেয়ে APCA-এর সাথে বেশি মেলে, তাই এটি কখনও কখনও WCAG-এর সাথে একমত নয়। উদাহরণস্বরূপ, ডাব্লুসিএজি বলে যে কালোকে কালোতে রাখলে বেশি বৈসাদৃশ্য থাকে (সাদা 4.3 এর তুলনায় 4.70)। #407ac2যেখানে APCA এর বিপরীত বলে: কালোর বৈসাদৃশ্য রয়েছে 33.9, এবং সাদার বৈসাদৃশ্য রয়েছে 75.7। নতুন CSS সূত্র APCA এর সাথে মেলে এবং সাদা দেখায়:

তর্কাতীতভাবে, এই সূত্রটি WCAG 2.0 এর চেয়ে ভাল কাজ করতে পারে কারণ এটি APCA এর সাথে আরও ঘনিষ্ঠভাবে মেলে। এটি বলেছে, আপনাকে এখনও অ্যাক্সেসযোগ্যতা পরীক্ষা করতে হবে, এবং আপনি যদি APCA এর পরিবর্তে WCAG-তে আইনত থাকেন, তাহলে এই নতুন সহজ সূত্রটি আপনার জন্য কম উপযোগী হতে পারে।

এলসিএইচ বনাম ওকেএলসিএইচ

আমি উভয়ের জন্যই নম্বরগুলি চালিয়েছিলাম, এবং OKLCH-কে LCH-এর জন্য একটি ভাল প্রতিস্থাপনের জন্য ডিজাইন করা ছাড়াও, আমি আরও দেখতে পেয়েছি যে সংখ্যাগুলি সমর্থন করে যে OKLCH একটি ভাল বিকল্প।

LCH এর সাথে, কালোর জন্য খুব অন্ধকার এবং সাদার জন্য খুব হালকা এর মধ্যে পার্থক্য প্রায়শই বড় হয় এবং পার্থক্যটি আরও বৃদ্ধি পায়। যেমন, #e862e5 মাধ্যমে #fd76f9 কালো থেকে অনেক গাঢ় এবং সাদা থেকে অনেক হালকা। LCH এর সাথে, এই হালকাতা 63 থেকে 70 এর মধ্যে চলে; OKLCH এর জন্য, এটি .7 থেকে .77। OKLCH লাইটনেসের স্কেলিং APCA-এর সাথে আরও ভাল মেলে।

এক ধাপ এগিয়ে

যদিও “মোস্ট-কনট্রাস্ট” অবশ্যই ভাল হবে, আমরা আরেকটি কৌশল প্রয়োগ করতে পারি। আমাদের বর্তমান যুক্তি শুধু আমাদের সাদা বা কালো দেয় (যা color-contrast() ফাংশনটি বর্তমানে সীমিত), তবে আমরা সাদা বা অন্য প্রদত্ত রঙ দিতে এটি পরিবর্তন করতে পারি। সুতরাং, উদাহরণস্বরূপ, সাদা বা মূল পাঠ্য রঙ। দিয়ে শুরু:

color: oklch(from  round(1.21 - L) 0 0);  

/* becomes: */

--white-or-black: oklch(from  round(1.21 - L) 0 0);  
color: rgb(  
  from color-mix(in srgb, var(--white-or-black), )  
  calc(2*r) calc(2*g) calc(2*b)  
);

এটি কিছু চতুর গণিত, কিন্তু এটি পড়া আনন্দদায়ক নয়:

• যদি --white-or-black সাদা হয়, color-mix() এর ফলাফল rgb(127.5, 127.5, 127.5) বা উজ্জ্বল; আমরা ডবল rgb(255, 255, 255) বা উচ্চতর, যা একেবারে সাদা।
• যদি --white-or-black কালো হয়, color-mix() প্রতিটি RGB চ্যানেলের মান 50% হ্রাস করে; দ্বিগুণ করে আমরা আসল মান ফিরে এসেছি .

দুর্ভাগ্যবশত, এই সূত্রটি Safari 18 এবং তার নিচে কাজ করে না, তাই আপনাকে Chrome, Safari 18+ এবং Firefox টার্গেট করতে হবে। যাইহোক, এটি আমাদেরকে সাদা এবং বেস টেক্সট রঙের পরিবর্তে সাদা এবং কালো রঙের পরিবর্তে বিশুদ্ধ CSS এর সাথে পরিবর্তন করার একটি উপায় দেয় এবং আমরা Safari-এ সাদা এবং কালোতে ফিরে যেতে পারি।

আপনি CSS কাস্টম ফাংশন ব্যবহার করে এই দুটিই পুনরায় লিখতে পারেন, তবে এগুলি এখনও সর্বত্র সমর্থিত নয়:

@function --white-black(--color) {  
  result: oklch(from var(--color) round(1.21 - l) 0 0);  
}

@function --white-or-base(--color, --base) {  
  result: rgb(from color-mix(in srgb, --white-black(var(--color)), var(--base)) calc(2*r) calc(2*g) calc(2*b));  
}

উপসংহার

আমি আশা করি এই কৌশলটি আপনার জন্য ভাল কাজ করবে, এবং আমি পুনরায় বলতে চাই যে এই পদ্ধতির উদ্দেশ্য – একটি পরিসর এবং একটি সহজ সূত্রের সন্ধান করা – হল বাস্তবায়নকে নমনীয় করা এবং আপনার প্রয়োজনের সাথে খাপ খাইয়ে নেওয়া সহজ। আপনার জন্য সবচেয়ে ভাল কাজ করে আপনি সহজেই পরিসরটি সামঞ্জস্য করতে পারেন।