কিছু ইনস্টল না করেই রঙের কনট্রাস্ট অডিট করার উপায়

রঙের কনট্রাস্ট অডিটকে প্রায়ই বিশেষজ্ঞ অ্যাক্সেসিবিলিটি কাজ হিসেবে দেখা হয়: একটি ডিজাইন ফাইল খুলুন, প্লাগইন ইনস্টল করুন, স্ক্রিনশট এক্সপোর্ট করুন, রিপোর্ট চালান, ব্র্যান্ডের রঙ নিয়ে বিতর্ক করুন। এগুলো কাজে লাগতে পারে, কিন্তু বেশিরভাগ টিমের শুরু করার জায়গা এটি নয়।

একটি প্রোডাকশন ওয়েবসাইটের জন্য সবচেয়ে দ্রুত নির্ভরযোগ্য অডিট সাধারণত সেই ব্রাউজারেই করা যায়, যা আপনার সামনে ইতিমধ্যেই খোলা আছে। আধুনিক ব্রাউজার DevTools computed colors পরিদর্শন করতে পারে, contrast ratios দেখাতে পারে, state styles প্রকাশ করতে পারে, এবং automated reports যেসব অস্বস্তিকর কেস মিস করে সেগুলো পরীক্ষা করতে সহায়তা করে।

এই গাইড ধরে নিচ্ছে আপনি কিছুই ইনস্টল করছেন না। কোনো browser extensions নয়। কোনো design plugins নয়। কোনো paid audit suite নয়। শুধু পেজ, ব্রাউজার, এবং একটি সহজ পদ্ধতি।

যে কনট্রাস্ট নিয়মগুলো আসলেই দরকার

বেশিরভাগ ওয়েব কাজের ক্ষেত্রে, WCAG কনট্রাস্ট কয়েকটি threshold-এ এসে দাঁড়ায়:

• সাধারণ টেক্সট: এর background-এর বিপরীতে অন্তত 4.5:1 কনট্রাস্ট।
• বড় টেক্সট: অন্তত 3:1। WCAG এটিকে মোটামুটি 24 CSS pixels, অথবা bold হলে প্রায় 18.66 CSS pixels হিসেবে সংজ্ঞায়িত করে।
• UI components and graphical objects: অর্থপূর্ণ boundaries, icons, states, এবং interface বোঝার জন্য প্রয়োজনীয় charts-এর অংশগুলোর জন্য অন্তত 3:1।
• Enhanced contrast: baseline-এর বাইরে যেতে চাইলে normal text-এর জন্য 7:1 এবং large text-এর জন্য 4.5:1।

কিছু ব্যতিক্রম আছে, যেমন inactive controls, decorative elements, এবং logos। এই ব্যতিক্রমগুলো সংযতভাবে ব্যবহার করুন। “এটি ব্র্যান্ডের অংশ” কোনো ব্যতিক্রম নয়; এটি একটি design constraint।

আরও মনে রাখুন, accessible color use-এর শুধু একটি অংশ হলো contrast। যদি কোনো red error state-এ যথেষ্ট contrast থাকে কিন্তু কোনো text, icon label, বা programmatic indication না থাকে, তবুও এটি এমন ব্যবহারকারীদের জন্য ব্যর্থ হতে পারে যারা red-কে কাছাকাছি রঙ থেকে আলাদা করতে পারেন না।

design file নয়, rendered page দিয়ে শুরু করুন

Design files উপকারী, কিন্তু এগুলো প্রতিটি বাস্তব ভেরিয়েবল ধরে না: CSS overrides, opacity, hover states, browser font rendering, user zoom, dark mode, inherited styles, CMS content, এবং marketing embeds।

ব্যবহারকারীরা যেভাবে পেজটি পান, সেভাবেই অডিট করুন।

বর্তমান কোনো desktop browser-এ পেজটি খুলুন। Chrome, Edge, Firefox এবং Safari—সবগুলোরই দরকারি inspection tools আছে। নির্দিষ্ট labels ভিন্ন হতে পারে, কিন্তু workflow একই:

1. Text বা UI element-এ right-click করুন।
2. Inspect বেছে নিন।
3. computed color এবং background-color খুঁজুন।
4. Contrast ratio পড়তে browser-এর color swatch বা accessibility panel ব্যবহার করুন।
5. pass, fail, এবং uncertainty নথিভুক্ত করুন।

Chromium-ভিত্তিক browsers-এ color picker প্রায়ই text-এর জন্য contrast ratio এবং WCAG pass/fail guidance দেখায়। Firefox DevTools-ও accessibility information এবং color tools প্রকাশ করে। Safari-এর Web Inspector computed styles এবং accessibility information দেখাতে পারে, যদিও workflow সামান্য আলাদা।

মূল বিষয় নির্দিষ্ট browser নয়। মূল বিষয় হলো computed result পড়া, component কোন value ব্যবহার করছে বলে কেউ মনে করছে তা নয়।

আগে একটি ছোট audit list তৈরি করুন

ক্লান্ত হওয়া পর্যন্ত এলোমেলো text inspect করবেন না। Patterns-এর একটি সংক্ষিপ্ত inventory তৈরি করুন:

• Main page background-এর ওপর body text।
• Muted text, captions, metadata এবং placeholders।
• Normal, hover, visited এবং focus states-এ links।
• Primary, secondary এবং destructive buttons।
• Form labels, help text, errors এবং success messages।
• Navigation items, breadcrumbs এবং tabs।
• Cards, badges, pills এবং tags।
• Meaning যোগাযোগ করে এমন icons।
• Charts, maps, progress bars এবং status colors।
• Images, video, gradients বা translucent overlays-এর ওপর text।

একটি সাধারণ site-এ বেশিরভাগ failures খুঁজে পেতে এটি যথেষ্ট। এটি audit-কে one-off pixels নয়, components-এর সঙ্গেও যুক্ত রাখে।

আপনার audit-এ buttons থাকলে, contrast check-কে আমাদের accessible web buttons checklist-এর basics-এর সঙ্গে মিলিয়ে দেখুন। Button contrast problems প্রায়ই missing focus states, unclear labels বা broken keyboard behavior-এর পাশে থাকে।

DevTools-এ text contrast inspect করুন

Solid background-এর ওপর plain text হলে, browser সাধারণত আপনার জন্য contrast হিসাব করতে পারে।

Element inspect করুন এবং color property খুঁজুন। Swatch থেকে color picker খুলুন। Browser যদি background নির্ধারণ করতে পারে, এটি contrast ratio দেখাবে। কিছু tools color picker-এ এমন একটি line-ও আঁকে, যা দেখায় কোন জায়গায় color 3:1, 4.5:1 বা 7:1 pass করবে।

Browser যদি failure দেখায়, বিপরীত প্রমাণ না পাওয়া পর্যন্ত সেটিকে বিশ্বাস করুন। Browser যদি pass দেখায়, তবুও বিচার-বিবেচনা ব্যবহার করুন। ছোট thin type, low-quality displays, heavy anti-aliasing এবং busy backgrounds technically passing text-কেও দুর্বল অনুভব করাতে পারে।

একটি ব্যবহারিক নিয়ম: body text যদি মাত্র 4.55:1-এ barely passing হয়, উদ্‌যাপন করবেন না। এটিকে আরও জায়গা দিন। Contrast requirements minimums, ideal targets নয়।

Typography-ও গুরুত্বপূর্ণ। বড়, পরিষ্কার type system color tweaks-এ যাওয়ার আগেই strain কমায়। Contrast pass করার পরও যদি পেজ পড়তে কঠিন লাগে, modern web-এ readable type-এর এই practical guide-এর মতো বিস্তৃত readability lens ব্যবহার করে line length, size, weight এবং spacing পুনরায় দেখুন।

opacity-সহ বাস্তব background পরীক্ষা করুন

অনেক contrast mistake ঘটে কারণ দৃশ্যমান background declared background নয়।

সাধারণ traps হলো:

• Semi-transparent card-এর ভেতরের text।
• opacity প্রয়োগ করা parent-এর ওপর text।
• rgba() বা color-mix() ব্যবহার করা overlays।
• Headings-এর পেছনে gradients।
• Text area জুড়ে বদলে যাওয়া background images।
• Dark mode-এ বদলে যাওয়া theme variables।

DevTools যদি আত্মবিশ্বাসের সঙ্গে contrast হিসাব করতে না পারে, rendered foreground এবং background colors ম্যানুয়ালি শনাক্ত করুন। Computed styles panel ব্যবহার করুন, layers সাময়িকভাবে disable করুন, অথবা আপনার browser support করলে built-in color picker দিয়ে visible color sample করুন।

Images-এর ওপর text হলে, image-এর সবচেয়ে সুন্দর অংশ sample করবেন না। Text-এর পেছনের worst plausible area sample করুন। যদি CMS uploads, carousels বা responsive crops-এর মাধ্যমে image বদলায়, তাহলে এটি stable contrast system নয়। Image যাই হোক না কেন text সুরক্ষিত রাখতে reliable overlay, text shadow, solid container বা gradient treatment যোগ করুন।

ভালো image overlay system একঘেয়ে: একই overlay strength, predictable crop area, উজ্জ্বল photos হলেও যথেষ্ট contrast। একঘেয়ে হওয়া ঠিক আছে। Users পড়ার চেষ্টা করছেন।

states ভুলবেন না

Static screenshots অনেক contrast failures মিস করে। Browser-এ সরাসরি interaction states অডিট করুন।

DevTools-এ pseudo-classes force করুন, যেমন:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

তারপর আবার computed colors inspect করুন।

Focus indicators বিশেষ মনোযোগ দাবি করে। WCAG 2.2 focus appearance নিয়ে expectations শক্তিশালী করেছে, এবং light gray card-এর ওপর pale blue outline এখনও একটি সাধারণ failure। Focus indicator-এর adjacent colors-এর বিপরীতে যথেষ্ট contrast এবং নজরে পড়ার মতো যথেষ্ট area দরকার।

Disabled controls-এর ক্ষেত্রে, WCAG contrast rules inactive components-এর জন্য একটি exception দেয়। এর অর্থ এই নয় যে disabled controls default-ভাবেই অপাঠ্য হওয়া উচিত। Disabled state যদি দরকারি তথ্য বহন করে, সেটি readable করুন। না করলে, এটি আদৌ থাকা উচিত কি না বিবেচনা করুন।

Lighthouse ব্যবহার করুন, কিন্তু judgment outsource করবেন না

Lighthouse-এর মতো browser audits কিছু contrast failures দ্রুত ধরতে পারে। আপনার browser দিলে built-in audit চালান, তারপর results-কে starting point হিসেবে ধরুন।

Automated checks obvious computed contrast failures থাকা text nodes খুঁজে পেতে ভালো। এগুলো দুর্বল:

• Images-এর মধ্যে embedded text।
• Canvas-rendered labels।
• SVG edge cases।
• Hover-only failures।
• Focus indicator quality।
• Charts যেখানে color relationships meaning বহন করে।
• Authentication, menus বা form steps-এর পেছনে hidden components।

Report সবুজ এলে, তবুও representative components inspect করতে হবে। Report লাল এলে, panic এড়িয়ে user impact অনুযায়ী failures triage করুন। একই principle performance এবং accessibility reports-এর ক্ষেত্রেও প্রযোজ্য: tool output-কে evidence হিসেবে পড়ুন, verdict হিসেবে নয়। panic না করে Lighthouse report পড়ার আমাদের guide-এ আমরা এই mindset ব্যবহার করি, এবং এখানে সেটি পরিষ্কারভাবে প্রযোজ্য।

Non-text contrast-ও অডিট করুন

Text সবচেয়ে বেশি মনোযোগ পায়, কিন্তু WCAG interface বোঝা বা চালানোর জন্য দরকারি non-text content-ও cover করে।

অন্তত এই cases পরীক্ষা করুন:

• Page background-এর বিপরীতে input borders।
• Checkbox এবং radio outlines।
• Toggle states।
• Icon-only buttons।
• Error icons এবং warning symbols।
• Chart lines, bars এবং labels।
• Progress indicators।
• Selected tab বা active navigation indicators।

Target সাধারণত adjacent colors-এর বিপরীতে 3:1। উদাহরণস্বরূপ, white background-এর ওপর light gray input border প্রায় অদৃশ্য হতে পারে। Five pastel lines-সহ একটি chart দেখতে elegant হতে পারে, তবুও unusable হতে পারে।

Charts-এর জন্য contrast একা যথেষ্ট নয়। Labels, patterns, line styles, direct annotation বা spacing ব্যবহার করুন, যাতে information শুধু color-এর ওপর নির্ভর না করে। এটি color-blind users, low-vision users, glare-এ দেখা মানুষ, এবং document-এ screenshot পড়া যে কাউকে সাহায্য করে।

Developers ব্যবহার করতে পারে এমন format-এ findings record করুন

একটি দরকারি contrast audit “কিছু gray fail করেছে” বলে না। এটি component, state, current values, expected threshold এবং suggested fix শনাক্ত করে।

একটি compact format ভালো কাজ করে:

| Component | State | Foreground | Background | Ratio | Target | Result | Suggested fix | |---|---:|---:|---:|---:|---:|---|---| | Card metadata | Default | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Fail | --color-text-muted-strong ব্যবহার করুন | | Primary button | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Pass | রাখুন | | Input border | Default | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Fail | Border token গাঢ় করুন |

Site-এ design tokens থাকলে fixes সেগুলোর সঙ্গে tie করুন। যদি এক দুর্বল token-ই আসল সমস্যা হয়, তাহলে twenty individual components patch করবেন না।

Minimum-এর চেয়ে fixes সামান্য শক্তিশালী করুন

Contrast failures প্রায়ই খারাপভাবে fix করা সহজ। Teams একটি color সামান্য nudge করে যতক্ষণ না checker 4.51:1 বলে, তারপর এগিয়ে যায়। এতে font rendering, transparency, browser differences, theming, image variance বা ভবিষ্যৎ brand edits-এর জন্য কোনো margin থাকে না।

Comfortable targets পছন্দ করুন:

• Body text: practical হলে 7:1-এর কাছাকাছি।
• Muted text: real content হলে এখনও 4.5:1-এর ওপর।
• UI borders এবং icons: 3:1-এর অনেকটা ওপর।
• Images-এর ওপর text: per-image guessing-এর বদলে controlled overlay ব্যবহার করুন।

Web দেখা হয় cheap laptops, dim phones, bright sidewalks, tinted monitors এবং aging displays-এ। Minimum compliance আর comfortable reading একই বিষয় নয়।

<!-- tool-cta:start -->

💡 এটি চেষ্টা করুন: DevTools থেকে নেওয়া কনট্রাস্ট জোড়া পরীক্ষা করার সময়, Color Converter hex, RGB এবং HSL-এর মধ্যে রূপান্তর করতে সাহায্য করে, যাতে মানগুলো আপনার অডিট নোটের সঙ্গে মিলে যায়।

<!-- tool-cta:end -->

No-install contrast audit checklist

দ্রুত কিন্তু credible audit দরকার হলে এই sequence ব্যবহার করুন:

1. Modern browser-এ production page খুলুন।
2. Main text, UI এবং state patterns তালিকাভুক্ত করুন।
3. DevTools-এ computed foreground এবং background colors inspect করুন।
4. Contrast পড়তে built-in color picker বা accessibility panel ব্যবহার করুন।
5. Hover, focus, active, visited এবং invalid states force করুন।
6. Worst plausible background-এর বিপরীতে images এবং gradients-এর ওপর text পরীক্ষা করুন।
7. 3:1 requirement-এর বিপরীতে non-text UI parts পরীক্ষা করুন।
8. Safety net হিসেবে built-in automated audit চালান, পুরো audit হিসেবে নয়।
9. Component এবং token অনুযায়ী failures record করুন।
10. Barely threshold পার করে নয়, margin রেখে fix করুন।

আপনার stack-এ আরেকটি tool না যোগ করেও বেশিরভাগ contrast issues ধরতে এটি যথেষ্ট। আরও advanced audits-এর এখনও জায়গা আছে, বিশেষ করে বড় design systems, regulated products বা complex data visualization-এর জন্য। কিন্তু অনেক websites-এর ক্ষেত্রে, আপনার দরকারি evidence ব্রাউজার ইতিমধ্যেই দেয়। কঠিন অংশ হলো সেটি ব্যবহার করার মতো যথেষ্ট systematic হওয়া।