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

যেকোনো দুটি রঙ লিখুন এবং তাদের WCAG 2.1 কনট্রাস্ট রেশিও দেখুন, সেই সঙ্গে জানুন যে সেগুলি টেক্সট ও UI উপাদানের জন্য AA বা AAA অ্যাক্সেসিবিলিটি মান পূরণ করে কিনা। সম্পূর্ণভাবে আপনার ব্রাউজারে চলে — কিছুই আপলোড হয় না।

WCAG 2.1 কনট্রাস্ট সীমা

কনট্রাস্ট রেশিও কীভাবে গণনা করা হয়

WCAG 2.1 কনট্রাস্ট রেশিও আপেক্ষিক লুমিন্যান্স ব্যবহার করে, যা মডেল করে যে একটি স্ট্যান্ডার্ড মনিটরে কোনো রঙ মানব-চোখের কাছে কতটা উজ্জ্বল দেখায়।

1. প্রতিটি RGB চ্যানেল স্বাভাবিক করুন — 0–255 মানকে 255 দিয়ে ভাগ করুন যাতে 0 ও 1-এর মধ্যে একটি সংখ্যা পাওয়া যায়।
2. রৈখিক করুন (গামা সরান) — 0.04045-এর সমান বা কম মানকে 12.92 দিয়ে ভাগ করা হয়; তার বেশি মান হয় ((c + 0.055) / 1.055)^2.4। এটি স্ক্রিন দ্বারা ব্যবহৃত sRGB গামা এনকোডিং উল্টে দেয়।
3. লুমিন্যান্স গণনা করুন — L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin। এই সহগগুলি মানবিক উপলব্ধি প্রতিফলিত করে: আমরা সবুজ আলোর প্রতি সবচেয়ে বেশি এবং নীলের প্রতি সবচেয়ে কম সংবেদনশীল।
4. রেশিও গণনা করুন — (L_lighter + 0.05) / (L_darker + 0.05)। 0.05 অফসেট শূন্য দিয়ে ভাগ প্রতিরোধ করে এবং কোনো আলোকিত পরিবেশে ক্ষুদ্রতম অনুভবযোগ্য পার্থক্যের হিসাব রাখে।

বাস্তব উদাহরণ — #f0f4f8-এর উপর #1a2e4a:
ফোরগ্রাউন্ড: R=26, G=46, B=74 → L ≈ 0.0268।
ব্যাকগ্রাউন্ড: R=240, G=244, B=248 → L ≈ 0.8893।
রেশিও = (0.8893 + 0.05) / (0.0268 + 0.05) = 0.9393 / 0.0768 ≈ 12.23:1 — 7:1 AAA সীমার অনেক উপরে।

WCAG কনট্রাস্ট নিয়মের সংক্ষিপ্ত ইতিহাস

উপরে আপনি যে কনট্রাস্ট রেশিও দেখছেন তা ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) থেকে আসে, যা ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) প্রকাশ করে। WCAG 2.0 11 ডিসেম্বর 2008-এ চূড়ান্ত করা হয় এবং পরে হুবহু একটি আন্তর্জাতিক মান, ISO/IEC 40500:2012, হিসেবে গৃহীত হয়। উল্লেখযোগ্যভাবে, দুটি টেক্সট-কনট্রাস্ট নিয়ম — সাকসেস ক্রাইটেরিয়ন 1.4.3 (কনট্রাস্ট মিনিমাম, AA স্তর) এবং 1.4.6 (কনট্রাস্ট এনহ্যান্সড, AAA স্তর) — 2008 থেকে অপরিবর্তিত। জুন 2018-এ প্রকাশিত WCAG 2.1 এগুলি বজায় রাখে এবং বোতাম, আইকন ও ফর্ম ফিল্ডের জন্য সাকসেস ক্রাইটেরিয়ন 1.4.11 (নন-টেক্সট কনট্রাস্ট) যোগ করে। এরপর অক্টোবর 2023-এ WCAG 2.2 আসে, যা আবারও কনট্রাস্টের গণিত অপরিবর্তিত রাখে। তাই এই টুল যে 4.5:1 ও 7:1 সীমা যাচাই করে সেগুলি কোনো প্রবণতা নয় — এগুলি একটি স্থিতিশীল, আন্তর্জাতিকভাবে অনুমোদিত মান যা পনেরো বছরেরও বেশি সময় ধরে ওয়েব ডিজাইনকে পথ দেখিয়েছে।

ভালো কনট্রাস্টের উপর আসলে কারা নির্ভর করে

কনট্রাস্ট সেই অল্প কয়েকটি অ্যাক্সেসিবিলিটি বৈশিষ্ট্যের একটি যা নীরবে প্রায় সবাইকে সাহায্য করে, এই কারণেই নিয়মগুলি ডিজাইনারের রুচির বদলে পরিমাপযোগ্য লুমিন্যান্সের চারপাশে গঠিত। সবচেয়ে বেশি প্রভাবিত মানুষদের মধ্যে রয়েছেন:

• কম দৃষ্টিসম্পন্ন মানুষ — ছানি, গ্লুকোমা, ডায়াবেটিক রেটিনোপ্যাথি বা ম্যাকুলার ডিজেনারেশনের মতো অবস্থার কারণে — যাদের কাছে কম-কনট্রাস্ট টেক্সট কার্যত অদৃশ্য হতে পারে।
• বয়স্ক পাঠক। বয়সের সঙ্গে চোখের লেন্স হলদে হয়ে যায় এবং কম আলো প্রবেশ করতে দেয়, তাই যে কনট্রাস্ট 25 বছর বয়সে স্বাচ্ছন্দ্যদায়ক তা 65-এ সংগ্রাম হয়ে উঠতে পারে — এবং 65-ঊর্ধ্ব দলটি প্রতিটি শ্রোতা-শ্রেণির একটি বড় ও ক্রমবর্ধমান অংশ।
• রঙ-দৃষ্টি ত্রুটিসম্পন্ন মানুষ। সারা বিশ্বে আনুমানিক 300 মিলিয়ন মানুষ — মোটামুটি 12 জনে 1 জন পুরুষ এবং 200 জনে 1 জন নারী — রঙ ভিন্নভাবে দেখেন। যেহেতু WCAG রেশিও রঙ (hue)-এর বদলে হালকাত্বের উপর ভিত্তি করে, এটি পাস করা টেক্সট তখনও পাঠযোগ্য থাকে যখন দুটি রঙ একই রকম দেখায়।
• ভুল পরিস্থিতিতে সবাই। ফোনে তীব্র রোদ, কোনো সস্তা বা কমানো ল্যাপটপ প্যানেল, আলোকিত ঘরে প্রোজেক্টর, বা লো-ব্যাটারি "উজ্জ্বলতা কমান" মোড — এই সবই কার্যকর কনট্রাস্ট কমিয়ে দেয়। মান অনুযায়ী ডিজাইন করার অর্থ হলো আপনার ইন্টারফেস বাস্তব দুনিয়ায় টিকে থাকে, কেবল কোনো ক্যালিব্রেটেড স্টুডিও মনিটরে নয়।

নন-টেক্সট কনট্রাস্ট: UI ও গ্রাফিক্সের জন্য 3:1 নিয়ম

টেক্সটই একমাত্র জিনিস নয় যা ব্যবহারকারীদের দেখতে হয়। WCAG 2.1-এর সাকসেস ক্রাইটেরিয়ন 1.4.11 কনট্রাস্ট প্রয়োজনীয়তাকে নন-টেক্সট উপাদান পর্যন্ত প্রসারিত করে: কোনো বোতাম বা ইনপুট ফিল্ডের দৃশ্যমান সীমানা, ফোকাস আউটলাইন, টগল, চেকবক্স, অর্থবহ কোনো আইকন, বা কোনো চার্টের রেখা ও বার। এগুলিকে তাদের পাশে যা কিছু থাকে তার তুলনায় কমপক্ষে 3:1-এ পৌঁছাতে হবে। কম সীমা এই বিষয়টি প্রতিফলিত করে যে কোনো অক্ষরের সূক্ষ্ম রেখার তুলনায় একটি নিরেট আকৃতি বোঝা সহজ — কিন্তু এটি একটি বাস্তব প্রয়োজনীয়তা, এবং সবচেয়ে বেশি বাদ পড়া প্রয়োজনীয়তাগুলির একটি। সাদা কার্ডের উপর ফ্যাকাশে-ধূসর ইনপুট বর্ডার, বা হালকা-ধূসর "নিষ্ক্রিয়" ট্যাব প্রায়ই 1.4.11-এ ব্যর্থ হয়, যদিও পেজের বডি টেক্সট স্বাচ্ছন্দ্যে পাস করে। উপরের চেকারটি কেবল আপনার অনুচ্ছেদে নয়, আপনার বর্ডার, আইকন ও ফোকাস রিংয়েও ব্যবহার করুন।

রঙ-অন্ধতার জন্য ডিজাইন: কখনো কেবল রঙ (hue)-এর উপর নির্ভর করবেন না

কনট্রাস্ট ও রঙ সম্পর্কিত কিন্তু ভিন্ন অ্যাক্সেসিবিলিটি উদ্বেগ। সবুজ ব্যাকগ্রাউন্ডে লাল "ত্রুটি" বার্তার হালকাত্ব-এর কনট্রাস্ট সম্পূর্ণ পর্যাপ্ত হতে পারে, তবুও রেড-গ্রিন রঙ-অন্ধতাসম্পন্ন কারও কাছে এটি প্রায় অভেদ্য হতে পারে (ডিউটেরানোপিয়া, সবচেয়ে সাধারণ প্রকার, একাই প্রায় 1% পুরুষকে প্রভাবিত করে)। এর সমাধান সেই একই নীতি যা WCAG অন্যত্র প্রয়োগ করে: তথ্য বহনের একমাত্র উপায় হিসেবে কখনো রঙ ব্যবহার করবেন না।

1. রঙের সঙ্গে একটি দ্বিতীয় সংকেত যুক্ত করুন — একটি আইকন (✓ / ✗), একটি টেক্সট লেবেল, আন্ডারলাইন, একটি প্যাটার্ন, বা আকৃতিতে পরিবর্তন — যাতে রঙ ছাড়াও অর্থ টিকে থাকে।
2. ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ডের মধ্যে হালকাত্বের শক্তিশালী পার্থক্য বজায় রাখুন, যা ঠিক সেটাই যা উপরের রেশিও পরিমাপ করে এবং যা রঙ-অন্ধ ব্যবহারকারীদের সবচেয়ে বেশি সাহায্য করে।
3. ক্লাসিক সমস্যা-জোড়া এড়িয়ে চলুন — লাল/সবুজ, এবং কিছুটা কম মাত্রায় নীল/বেগুনি ও সবুজ/বাদামি — এমন যেকোনো কিছুর জন্য যা এক নজরে আলাদা করা উচিত।

যেখানে WCAG AA আইন

WCAG 2.1 স্তর AA পূরণ করা — এই কনট্রাস্ট সীমাসহ — কেবল ভালো অনুশীলন নয়; বিশ্বের অনেক অংশে এটি একটি আইনি বাধ্যবাধকতা:

যেহেতু এদের প্রায় সবাই WCAG 2.x স্তর AA-এর উল্লেখ করে, বেশিরভাগ বাজারে সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 এবং বড় টেক্সট ও UI উপাদানের জন্য 3:1-এ পৌঁছানো হলো ব্যবহারিক সম্মতি-মানদণ্ড। এই টুল ঠিক সেই মানই প্রয়োগ করে।

APCA ও WCAG 3: কেন রেশিও বদলাতে পারে

বর্তমান রেশিও সরল ও স্থিতিশীল, কিন্তু এটি মানবিক উপলব্ধির একটি আনুমানিক পরিমাপও, এবং এর জানা দুর্বলতা আছে — এটি ডার্ক-মোড (গাঢ়র উপর হালকা) সংমিশ্রণে কিছুটা বেশি কঠোর এবং কিছু মধ্য-রঙে কিছুটা বেশি উদার হতে পারে, এবং এটি একমাত্র "বড় টেক্সট" কাট-অফ ছাড়া ফন্টের ওজন ও আকার উপেক্ষা করে। উত্তরসূরি মান, WCAG 3 (এখনো একটি প্রাথমিক খসড়া), একটি ভিন্ন পদ্ধতি অন্বেষণ করে: অ্যাক্সেসিবল পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA), যা অ্যান্ড্রু সোমার্স তৈরি করেছেন।

একটি প্রতিসম রেশিওর বদলে, APCA একটি অনুভবযোগ্য "Lc" (হালকাত্বের কনট্রাস্ট) মান উৎপন্ন করে যা এমন সব বিষয়ের হিসাব রাখে যা পুরনো সূত্র রাখতে পারে না:

• মেরুতা (polarity) — হালকা ব্যাকগ্রাউন্ডে গাঢ় টেক্সট এবং গাঢ় ব্যাকগ্রাউন্ডে হালকা টেক্সট ভিন্নভাবে স্কোর পায়, কারণ চোখ সত্যিই এগুলিকে ভিন্নভাবে অনুভব করে।
• ফন্টের ওজন ও আকার — পাতলা, ছোট টেক্সটের বোল্ড, বড় টেক্সটের তুলনায় বেশি কনট্রাস্ট প্রয়োজন, এবং APCA সেই সম্পর্কটি একটি স্থূল সীমার বদলে ভেতরেই ধারণ করে।
• আধুনিক ডিসপ্লে — মডেলটি 2000-এর দশকের CRT-এর বদলে আজকের উজ্জ্বল, হাই-রেজোলিউশন স্ক্রিনের জন্য টিউন করা।

APCA আশাব্যঞ্জক কিন্তু এখনো কোথাও আইনি প্রয়োজনীয়তা নয়, এবং WCAG 3 চূড়ান্ত হতে বছরের পর বছর বাকি। যতক্ষণ না এটি আসে, WCAG 2.x — উপরে আপনি যে রেশিও দেখছেন — সেই মানই থাকে যার ভিত্তিতে আপনার অডিট হয় এবং আপনাকে জবাবদিহি করতে হয়, এই কারণেই এই চেকার সেটাই রিপোর্ট করে। APCA-কে ডার্ক থিম ও সূক্ষ্ম টাইপের জন্য একটি উপযোগী যাচাই হিসেবে গণ্য করুন, আজ 2.x AA পাস করার বিকল্প হিসেবে নয়।

প্রায়শই জিজ্ঞাসিত প্রশ্ন

WCAG কনট্রাস্ট রেশিও কী?

WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস) কনট্রাস্ট রেশিও পরিমাপ করে যে স্বাভাবিক বা কম দৃষ্টিসম্পন্ন কোনো ব্যক্তির কাছে দুটি রঙ কতটা আলাদা দেখায়। এটি প্রতিটি রঙের আপেক্ষিক লুমিন্যান্স থেকে সূত্র (L1 + 0.05) / (L2 + 0.05) দিয়ে গণনা করা হয়, যেখানে L1 হালকা রঙ এবং L2 গাঢ় রঙ। রেশিও 1:1 (একই রঙ) থেকে 21:1 (সাদার উপর কালো) পর্যন্ত হয়। বর্তমান মান WCAG 2.1 সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 (AA স্তর) এবং উন্নত AAA স্তরের জন্য 7:1 দাবি করে।

WCAG AA এবং AAA-এর মধ্যে পার্থক্য কী?

বেশিরভাগ দেশ ও কাঠামোর জন্য AA হলো ন্যূনতম আইনি সম্মতি স্তর (WCAG 2.1 স্তর AA)। AAA হলো উন্নত "স্বর্ণমান"। সাধারণ টেক্সটের জন্য: AA-এর প্রয়োজন ≥ 4.5:1 এবং AAA-এর প্রয়োজন ≥ 7:1। বড় টেক্সটের জন্য: AA-এর প্রয়োজন ≥ 3:1 এবং AAA-এর প্রয়োজন ≥ 4.5:1। বেশিরভাগ অ্যাক্সেসিবিলিটি অডিট AA-কে লক্ষ্য করে; AAA চিকিৎসা বা আইনি পেজের মতো উচ্চ-ঝুঁকির কনটেন্টের জন্য সংরক্ষিত।

WCAG-এর অধীনে "বড় টেক্সট" কী হিসেবে গণ্য হয়?

WCAG বড় টেক্সটকে স্বাভাবিক ওজনে কমপক্ষে 18pt (24px), বা বোল্ড ওজনে কমপক্ষে 14pt (প্রায় 18.67px) হিসেবে সংজ্ঞায়িত করে। এই আকারগুলিতে কম কনট্রাস্ট গ্রহণযোগ্য, কারণ বড় অক্ষর-রূপ চেনা সহজ, তাই AA-এর সীমা 4.5:1 থেকে কমে 3:1 হয়ে যায়।

3:1 রেশিও কি বডি টেক্সটের জন্য WCAG পাস করে?

না — 3:1 কেবল বড় টেক্সট (AA স্তর) এবং আইকন ও বর্ডারের মতো UI উপাদানের জন্য পাস করে। স্বাভাবিক আকারের বডি টেক্সটের জন্য AA-এর ক্ষেত্রে কমপক্ষে 4.5:1 এবং AAA-এর ক্ষেত্রে 7:1 প্রয়োজন। 3:1-এর নিচের রেশিও টেক্সটের আকার নির্বিশেষে সব WCAG স্তরে ব্যর্থ হয়।

আপেক্ষিক লুমিন্যান্স কীভাবে গণনা করা হয়?

প্রতিটি RGB চ্যানেল (0–255) কে 255 দিয়ে ভাগ করে [0, 1]-এ একটি মান পাওয়া যায়, তারপর তা রৈখিক করা হয়: 0.04045-এর সমান বা কম মানকে 12.92 দিয়ে ভাগ করা হয়; তার বেশি মান হয় ((c + 0.055) / 1.055)-এর 2.4 ঘাত। তখন লুমিন্যান্স হলো: L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin। এই সহগগুলি মানবিক উপলব্ধি প্রতিফলিত করে: চোখ সবুজ আলোর প্রতি সবচেয়ে বেশি এবং নীলের প্রতি সবচেয়ে কম সংবেদনশীল।

APCA / WCAG 3 সম্পর্কে কী?

WCAG 3 খসড়া পর্যায়ে আছে এবং অ্যাডভান্সড পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA) চালু করে, যা আধুনিক স্ক্রিনের জন্য অনুভূত কনট্রাস্ট আরও নির্ভুলভাবে মডেল করে। APCA এখনো কোথাও আইনি প্রয়োজনীয়তা নয়। এই টুল WCAG 2.1 (বর্তমান অনুমোদিত মান) প্রয়োগ করে, যা ADA, EN 301 549 এবং বেশিরভাগ জাতীয় অ্যাক্সেসিবিলিটি আইন দাবি করে।

সম্পর্কিত টুল

• কলার কনভার্টার — HEX, RGB, HSL, HSV ও CMYK
• SHA হ্যাশ জেনারেটর
• JSON ফরম্যাটার ও ভ্যালিডেটর