১. ভূমিকা
সর্বশেষ হালনাগাদ: ০৫/১১/২২
ম্যাটেরিয়াল ৩ কালার সিস্টেম ডাইনামিক কালার অ্যালগরিদমের সাহায্যে অ্যাক্সেসিবল কালার স্কিম তৈরি করে, কিন্তু রঙের ক্ষেত্রে অ্যাক্সেসিবিলিটি বলতে কী বোঝায়? ম্যাটেরিয়াল ডিজাইনের নতুন কালার সিস্টেম কীভাবে একটি অ্যাক্সেসিবল কালার স্কিম তৈরি করে এবং কোন টুলগুলো সাহায্য করে?
আপনি যা শিখবেন
- অ্যাক্সেসিবিলিটি এবং কনট্রাস্ট নির্দেশিকার সাথে রঙের সম্পর্ক
- কীভাবে টুলিং একটি অ্যাক্সেসিবল কালার স্কিম তৈরি করতে, সম্পাদনা করতে এবং কনট্রাস্ট পরীক্ষা করতে সাহায্য করতে পারে।
পূর্বশর্ত
এই ল্যাবের জন্য আমরা কিছু মৌলিক ডিজাইন ধারণার ওপর ভিত্তি করে কাজ করব।
- বর্তমান অ্যান্ড্রয়েড কালার স্কিম এবং সেগুলোর ভূমিকা সম্পর্কে জ্ঞান।
- ফিগমা সম্পর্কে জ্ঞান।
আপনার যা যা লাগবে
- ফিগমা অ্যাকাউন্ট
- ফিগমা ডিজাইনল্যাব ফাইল
- ফিগমা প্লাগইন ম্যাটেরিয়াল থিম বিল্ডার
২. শুরু করুন
সেটআপ
শুরু করার জন্য আপনাকে ডিজাইনল্যাব ফিগমা ফাইলটি অ্যাক্সেস করতে হবে। ল্যাবের জন্য আপনার প্রয়োজনীয় সবকিছু ফিগমা ফাইলটির মধ্যেই রয়েছে। আপনি ফাইলটি ডাউনলোড করে ইম্পোর্ট করতে পারেন, অথবা ফিগমা কমিউনিটি থেকে এটির একটি অনুলিপি তৈরি করতে পারেন।
প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।
ফিগমা কমিউনিটি থেকে অনুলিপি
“Designing with accessible colors” ফাইলটিতে যান, অথবা ফিগমা কমিউনিটিতে “Designing with accessible colors” লিখে সার্চ করুন। ফাইলটি আপনার ফোল্ডারে কপি করতে উপরের ডান কোণায় থাকা “Duplicate”- এ ক্লিক করুন।
ফাইল লেআউট
ফাইলটি দেখার সময় খেয়াল করবেন যে, এটি একটি ভূমিকা দিয়ে শুরু হওয়া একটি স্বয়ংসম্পূর্ণ ফাইল। প্রতিটি বিভাগকে পরস্পর সংযুক্ত আর্টবোর্ডের একটি সারিতে ভাগ করা হয়েছে, যেখানে বিভাগটির কিছু মূল ধারণা এবং তারপরে অনুশীলনী দেওয়া আছে। বিভাগগুলো এবং অনুশীলনীগুলো একে অপরের উপর ভিত্তি করে তৈরি এবং এগুলো ক্রমানুসারে সম্পন্ন করতে হবে।
এই কোডল্যাবটি আপনাকে সেই ধারণা এবং অনুশীলনগুলো আরও বিস্তারিতভাবে বুঝিয়ে দেবে। Material You-এর নতুন ফিচারগুলো সম্পর্কে আরও জানতে কোডল্যাবটির সাথে সাথে পড়ুন!
ইন্ট্রো আর্টবোর্ড থেকে শুরু করে, আর্টবোর্ডগুলোকে ক্রমানুসারে সংযুক্ত করার জন্য বাটন রয়েছে। লিঙ্কটি অ্যাক্সেস করতে, বাটনটিতে ক্লিক করুন।
ফিগমা প্লাগইন ইনস্টল করুন
এই কোডল্যাবটি ডাইনামিক কালার স্কিম এবং টোকেন তৈরি করার জন্য একটি নতুন ফিগমা প্লাগইনের উপর ব্যাপকভাবে নির্ভর করে। ফিগমা কমিউনিটি পেজ থেকে সরাসরি প্লাগইনটি ইনস্টল করুন অথবা ফিগমা কমিউনিটিতে 'Material Theme Builder' লিখে সার্চ করুন।
৩. রঙ এবং প্রবেশগম্যতা
সকলের জন্য ডিজাইন করার একমাত্র উপায় হলো প্রবেশগম্যতা, যা নিশ্চিত করে যে আপনার তৈরি পণ্যগুলো সম্ভাব্য সর্বাধিক সংখ্যক দর্শকের কাছে অন্তর্ভুক্তিমূলক।
রঙ নিয়ে ডিজাইন করার সময়, "আমি কি স্ক্রিনে রঙটি দেখতে পাচ্ছি?"—এটিই একমাত্র বিবেচ্য বিষয় নয়। মানুষের দৃষ্টিশক্তির ওপর নির্ভর করে তারা বিভিন্নভাবে রঙ দেখে থাকে।
বর্ণান্ধতার কারণে রঙের সংমিশ্রণ পরীক্ষা করার প্রয়োজন হতে পারে, যাতে UI উপাদানগুলো একে অপরের সাথে মিশে না যায়।
যদিও অস্বচ্ছতা এবং ঘনত্ব কোনো রঙের আক্ষরিক আভা নয়, তবুও রঙটি কীভাবে অনুভূত হয় তার উপর এগুলোর একটি শক্তিশালী দৃশ্যগত প্রভাব রয়েছে।
কম অপাসিটি ব্যবহার করলে রঙ হালকা হয়ে যায়, যার ফলে লেখা অস্পষ্ট হতে পারে। উদাহরণস্বরূপ, কোনো স্বল্পদৃষ্টিসম্পন্ন ব্যক্তির পক্ষে যুক্তিসঙ্গত দূরত্ব থেকে ৩০% অপাসিটিতে সেট করা লেখা পড়া কঠিন হবে।
সতর্কতার সাথে অপাসিটি ব্যবহার করুন এবং কখনোই প্রস্তাবিত নির্দেশিকা অনুযায়ী ব্যবহার করবেন না।
ফন্টের পুরুত্বেরও একই রকম প্রভাব থাকতে পারে, যার কারণে গাঢ় পটভূমিতে সরু ফন্ট ব্যবহার করা হয়। ছাপার ক্ষেত্রে, খুব সরু ফন্ট ব্যবহার করলে কালি তার মধ্যে "ছড়িয়ে" পড়ে, যা লেখাটিকে দমবন্ধকর করে তোলে। আমাদের চোখও স্ক্রিনের ক্ষেত্রে এই একই প্রভাব তৈরি করে, ফাঁকা জায়গাটা পূরণ করার চেষ্টা করে।
গাঢ় পটভূমিতে সরু অক্ষর এক ধরনের বদ্ধ স্থানের অনুভূতি তৈরি করে।
পাঠযোগ্যতা বনাম পঠনযোগ্যতা। এই ল্যাব জুড়ে আমরা লেখার পাঠযোগ্যতার কথা উল্লেখ করব। পাঠযোগ্যতা পরিমাপ করে কোনো লেখা কতটা সহজে দেখা যায়, অন্যদিকে পঠনযোগ্যতা পরিমাপ করে কোনো লেখা কতটা সহজে বোঝা যায়।
৪. রঙের বৈসাদৃশ্য
ডিজাইনার এবং ডেভেলপারদের অন্তর্ভুক্তিমূলক পণ্য তৈরির সর্বোত্তম পদ্ধতি অনুসরণ নিশ্চিত করার জন্য একটি সামঞ্জস্যপূর্ণ ও বিশেষজ্ঞ-চালিত চেকলিস্ট প্রদান করতে অ্যাক্সেসিবিলিটি নির্দেশিকা বিদ্যমান। WCAG হলো প্রচলিত মান এবং এই ল্যাবটি সেটিকেই অনুসরণ করে।
রঙের বৈসাদৃশ্য হলো সম্মুখভাগ এবং পশ্চাৎভাগের উপাদানগুলোর উজ্জ্বলতার পার্থক্য, যা একটি অনুপাত আকারে উপস্থাপন করা হয়। এই অনুপাতের মানদণ্ডকে গ্রেড দেওয়া হয়। উদাহরণস্বরূপ, একটি বাটনের লেখা এবং তার ধারকের মধ্যে বৈসাদৃশ্য পরিমাপ করলে, লেখাটি পাঠযোগ্য হবে কি না তা নির্ধারণ করতে সাহায্য করতে পারে।
রঙের বৈসাদৃশ্য কমে যাওয়ার একটি উদাহরণ।
রঙের বৈসাদৃশ্য নির্দেশিকাগুলোকে পাঠ্য এবং অ-পাঠ্য—এই দুই ভাগে ভাগ করা হয়েছে, এবং প্রত্যেকটির নিজস্ব গ্রেড রয়েছে।
পাঠ্য
এএ | AAA | |
বড় লেখা | ৩:১ | ৪.৫:১ |
সাধারণ লেখা (মূল অংশ) | ৪.৫:১ | ৭:১ |
অ-পাঠ্য
এএ | |
অ-পাঠ্য (গ্রাফিক উপাদান) | ৩:১ |
চলুন কনট্রাস্ট চেক করে দেখি এবং ম্যানুয়ালি কীভাবে এটি ঠিক করা যায় তা জেনে নিই।
- ফিগমাতে, UI এলিমেন্টগুলোর রঙগুলো খুঁজুন। বড় টেক্সট (#C0BEC5) দিয়ে শুরু করলে, এটি (#F5F5FF) রঙের ব্যাকগ্রাউন্ডের উপর রয়েছে। একটি অনলাইন কনট্রাস্ট চেকার ব্যবহার করে, এই রঙগুলোকে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ডে দিলে দেখা যায় যে এটি সব রেটিংয়েই ব্যর্থ হয়।
- ব্যাকগ্রাউন্ডের রঙের তুলনায় লেখাটি খুব বেশি উজ্জ্বল। অনলাইন কনট্রাস্ট চেকারে, কালার পিকার ব্যবহার করে ফোরগ্রাউন্ডের রঙটি আরও গাঢ় করে অ্যাডজাস্ট করুন, যতক্ষণ না এটি AAA মান উত্তীর্ণ হয়।
- ফিগমাতে ফিরে এসে, বড় টেক্সটটিতে নতুন পাসিং কালারটি প্রয়োগ করুন।
- মূল লেখা এবং বাটনগুলোর জন্য একই প্রক্রিয়া অনুসরণ করুন এবং প্রতিটির জন্য লেখার রঙ ও পটভূমির রঙ দুটোই ভালোভাবে দেখে নিতে ভুলবেন না।
- গ্রাফিক্যাল অবজেক্টস এবং ইউজার ইন্টারফেস কম্পোনেন্টস-এর অধীনে প্রাপ্ত ফলাফল ব্যবহার করে আইকনগুলোর ক্ষেত্রে একই প্রক্রিয়া প্রয়োগ করুন।
- প্রতিটি এলিমেন্টের জন্য নতুন রঙটি ফিগমাতে নিয়ে আসুন। এখন সব এলিমেন্টই কনট্রাস্ট রেটিং পাস করবে!
রঙের বৈসাদৃশ্য অতিক্রম করার একটি উদাহরণ।
সম্ভবত এটি একটি দীর্ঘ প্রক্রিয়া বলে মনে হয়েছে, এবং এর ফলে রঙের বিন্যাসটি হয়তো ততটা সামঞ্জস্যপূর্ণ হয়নি। এখানেই টুলিং সাহায্য করতে পারে!
৫. উজ্জ্বলতা দিয়ে নির্মিত
ম্যাটেরিয়াল ডিজাইনের নতুন ডাইনামিক কালার সিস্টেমটি হিউ-এর পরিবর্তে লুমিন্যান্স ব্যবহার করে তৈরি করা হয়েছে। এর মানে হলো, যদি হিউ এবং ক্রোমা সরিয়ে দেওয়া হয়, তাহলে আমরা বিভিন্ন শেডের মাধ্যমে বৈসাদৃশ্য দেখতে পাব।
যখন কোনো রঙ নিষ্কাশন করা হয়, তখন এর ফলে ৫টি পরিবর্তিত মূল রঙ পাওয়া যায়, যেগুলো থেকে টোনাল প্যালেট তৈরি করা হয়। একটি টোনাল প্যালেটে সাদা এবং কালো সহ তেরোটি টোন থাকে। ১০০-এর একটি টোন মান আলোর সর্বোচ্চ মাত্রার ধারণার সমতুল্য এবং এর ফলে সাদা রঙ পাওয়া যায়। ০ থেকে ১০০-এর মধ্যবর্তী প্রতিটি টোন মান রঙটিতে উপস্থিত আলোর পরিমাণ প্রকাশ করে।
যেকোনো কালার স্কিমকে ডিফল্টভাবে ব্যবহারযোগ্য করে তোলার ক্ষেত্রে টোনাল প্যালেট সিস্টেমটি কেন্দ্রীয় ভূমিকা পালন করে।
হেক্স ভ্যালু বা হিউ-এর পরিবর্তে টোনালিটির উপর ভিত্তি করে রঙের সমন্বয় করা হলো অন্যতম প্রধান একটি পদ্ধতি, যা যেকোনো রঙের আউটপুটকে অ্যাক্সেসিবল করে তোলে। ডাইনামিক কালার ব্যবহারকারী পণ্যগুলো প্রয়োজনীয়তা পূরণ করবে, কারণ ব্যবহারকারী যে অ্যালগরিদমিক সমন্বয়গুলো অনুভব করতে পারেন, সেগুলো অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড পূরণের জন্যই ডিজাইন করা হয়েছে।
একই রকম উজ্জ্বলতার উপাদানগুলোর মধ্যে পাঠযোগ্যতার জন্য উপযুক্ত বৈসাদৃশ্য থাকে না, অপরদিকে ভিন্ন উজ্জ্বলতার উপাদানগুলো আরও সহজে আলাদা করা যায়।
Material You-এর ডাইনামিক কালার অপ্রত্যাশিত পরিস্থিতিতে কাজ করার জন্য তৈরি করা হয়েছে। বিভিন্ন দেখার প্রেক্ষাপটে কনট্রাস্ট রেশিও সামঞ্জস্য করতে, লুমিন্যান্স লেভেল হলো মূল বৈশিষ্ট্য যা প্রোডাক্ট টিমের প্রতিটি নির্দিষ্ট রঙের সংমিশ্রণ পরীক্ষা করা ছাড়াই রঙগুলোকে সফলভাবে একত্রিত হতে দেয়।
৬. একটি প্রবেশযোগ্য থিম তৈরি করুন
থিম বিল্ডারটি ফিগমা স্টাইল হিসেবে ম্যাটেরিয়াল ডিজাইন টোকেন তৈরি করে, যা আপনাকে ডাইনামিক রঙ কল্পনা করতে এবং একটি কাস্টম থিম তৈরি করতে দেয়। কালার স্কিমে অ্যাক্সেসিবল রঙগুলো অন্তর্ভুক্ত করা নিশ্চিত করতে ম্যাটেরিয়াল ৩ কালার সিস্টেম অনুসরণ করে এটি করা হয়।
- প্লাগইন মডালে , কাস্টম (Custom) এ ক্লিক করুন। এটি থিমটিকে একটি কাস্টম থিমে পরিবর্তন করে দেবে। ম্যাটেরিয়াল-থিমটি আগে থেকেই তৈরি করা থাকে, তবে আপনি চাইলে একটি নতুন থিমও তৈরি করতে পারেন। আরও জানতে ডাইনামিক কালার ভিজ্যুয়ালাইজিং (visualizing dynamic color ) দেখুন।
- এরপর, একটি প্রাইমারি কী কালার সেট করুন। প্রাইমারি কালারটি আপনার ব্র্যান্ডের প্রধান রঙ অথবা সবচেয়ে বেশি ব্যবহৃত প্রাইমারি অ্যাকসেন্ট কালার হতে পারে। কালার পিকার খুলতে এবং একটি রঙ বেছে নিতে ‘প্রাইমারি’ লেবেলযুক্ত রঙটিতে ক্লিক করুন। ডাইনামিক সেটিং-এর সোর্স কালারের মতোই, প্রাইমারি কালারটি সোর্স কালার হিসেবে ব্যবহৃত হয়।
এমটিবি-তে রঙ যোগ করুন।
- প্রাথমিক রঙের উপর ভিত্তি করে বাকি মূল রঙগুলো স্বয়ংক্রিয়ভাবে চলে আসে। এর মানে হলো, প্রয়োজন না হলে অতিরিক্ত রঙ যোগ করার কোনো দরকার নেই। ইচ্ছা হলে, একটি দ্বিতীয় এবং একটি তৃতীয় রঙ যোগ করতে পারেন।
- কালার স্কিমেটিকটি ইনপুট কালার থেকে নির্ধারিত মূল রঙ, তৈরি হওয়া টোনাল প্যালেট এবং রঙের ভূমিকা সহ চূড়ান্ত কালার স্কিমগুলো দেখায়। হালকা এবং গাঢ় উভয় ধরনের স্কিমই উপলব্ধ!
- কালার স্কিমটি প্রয়োগ করে দেখার জন্য ল্যাবে একটি উদাহরণ UI দেওয়া হয়েছে। App UI কম্পোনেন্টটি সিলেক্ট করা অবস্থায়, প্লাগইনের মধ্যে swap-এ ক্লিক করুন।
সংযুক্ত মকআপ সহ রঙের পরিকল্পনা।
এই অনুশীলনগুলোর জন্য ম্যাটেরিয়াল থিম বিল্ডার ইতিমধ্যেই ফিগমা ফাইলে প্রয়োজনীয় টোকেনগুলো তৈরি করে দিয়েছে।
৭. ম্যাটেরিয়াল থিম বিল্ডারের সাথে বৈসাদৃশ্য যাচাই করুন।
চমৎকার, কিন্তু আমরা বুঝতে পারছি যে আপনি এই স্টাইলগুলোর কয়েকটি ভিন্ন রঙ দিয়ে ম্যানুয়ালি আপডেট করতে চাইবেন। এই ধরনের সিদ্ধান্ত নিতে সাহায্য করার জন্য ম্যাটেরিয়াল থিম বিল্ডারে কোর স্কিম কালারগুলোর জন্য বিল্ট-ইন কনট্রাস্ট চেকিং রয়েছে।
- যেহেতু টোকেনগুলো স্টাইল হিসেবে তৈরি করা হয়, তাই আমরা তৈরি হওয়া রঙের মানও নির্ধারণ করতে পারি। ফিগমা স্টাইলের মধ্যে, বর্তমান থিমের প্রাইমারি রঙে যান এবং ডানদিকে থাকা এডিট স্টাইল আইকনটি নির্বাচন করুন।
- প্রপার্টিজে প্রাইমারি কালারটি আপডেট করুন। এটি কালার আউটপুট এবং অ্যাপ UI-তে প্রতিফলিত হয়। কালার অ্যালগরিদম এই কালারটি তৈরি করেনি, তাই আমরা এর অ্যাক্সেসিবিলিটির নিশ্চয়তা দিতে পারি না।
- প্লাগইন মেনুতে, ‘চেক কনট্রাস্ট’-এ ক্লিক করুন এবং তারপরে প্রাইমারির জন্য ‘এডিট স্টাইল’ মডালটি পুনরায় খুলুন। এটি কনট্রাস্ট পরীক্ষা করে এবং কনট্রাস্ট রেটিং দেখায়।
ফিগমা স্টাইল ডায়ালগে বৈসাদৃশ্য।
৮. অভিনন্দন
চমৎকার! অ্যাক্সেসিবিলিটি আপনার কাজের প্রক্রিয়ার একটি গুরুত্বপূর্ণ অংশ হওয়া উচিত এবং ম্যাটেরিয়াল ডিজাইন ও ম্যাটেরিয়াল থিম বিল্ডারের সাহায্যে এটি আরও সহজ হয়ে যায়।
আপনার কোনো প্রশ্ন থাকলে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় নির্দ্বিধায় আমাদের জিজ্ঞাসা করতে পারেন।
আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ চোখ রাখুন।