ToolDeck

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

ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG AA ও AAA কনট্রাস্ট রেশিও যাচাই করুন

একটি উদাহরণ চেষ্টা করুন

ফোরগ্রাউন্ড (টেক্সট) রঙ

ব্যাকগ্রাউন্ড রঙ

বড় টেক্সটের নমুনা (18px বোল্ড)

সাধারণ টেক্সটের নমুনা — আপনার বডি টেক্সট আপনার বেছে নেওয়া ব্যাকগ্রাউন্ড রঙের বিপরীতে এভাবেই দেখাবে।

কনট্রাস্ট রেশিও

14.63:1

WCAG সম্মতি

পাস

সাধারণ AA

পাস

সাধারণ AAA

পাস

বড় AA

পাস

বড় AAA

WCAG AAসাধারণ টেক্সট: 4.5:1, বড় টেক্সট (18px+ অথবা 14px বোল্ড): 3:1

WCAG AAAসাধারণ টেক্সট: 7:1, বড় টেক্সট (18px+ অথবা 14px বোল্ড): 4.5:1

রঙ কনট্রাস্ট চেকার কী?

রঙ কনট্রাস্ট চেকার একটি ফোরগ্রাউন্ড রঙ (সাধারণত টেক্সট) এবং একটি ব্যাকগ্রাউন্ড রঙের মধ্যে উজ্জ্বলতার পার্থক্য পরিমাপ করে এবং ফলাফল একটি অনুপাত হিসেবে প্রকাশ করে। 1:1 অনুপাত মানে রঙ দুটি অভিন্ন; 21:1 হলো সর্বোচ্চ, যা সাদার উপর কালো বা বিপরীতটিকে নির্দেশ করে। W3C প্রকাশিত Web Content Accessibility Guidelines (WCAG) টেক্সটের জন্য ন্যূনতম কনট্রাস্ট রেশিও নির্ধারণ করে যাতে দৃষ্টি প্রতিবন্ধী বা বর্ণান্ধ ব্যক্তিরা পড়তে পারেন।

কনট্রাস্ট রেশিওর সূত্রটি WCAG 2.x থেকে নেওয়া এবং এটি আপেক্ষিক উজ্জ্বলতার উপর নির্ভর করে — মানুষের চোখে একটি রঙ কতটা উজ্জ্বল দেখায় তার পরিমাপ। আপেক্ষিক উজ্জ্বলতা গণনা করা হয় প্রতিটি sRGB চ্যানেলকে রৈখিক করে (গামা সরিয়ে) এবং ITU-R BT.709 সহগ দ্বারা চ্যানেলগুলোকে ওজন দিয়ে: লালের জন্য 0.2126, সবুজের জন্য 0.7152 এবং নীলের জন্য 0.0722। সবুজ সবচেয়ে বেশি অবদান রাখে কারণ মানুষের চোখ সবুজ আলোর প্রতি সবচেয়ে সংবেদনশীল। তারপর অনুপাতটি হলো (L1 + 0.05) / (L2 + 0.05), যেখানে L1 হলো হালকা রঙের উজ্জ্বলতা।

WCAG দুটি সম্মতি স্তর নির্ধারণ করে। Level AA সাধারণ আকারের টেক্সটের জন্য কমপক্ষে 4.5:1 এবং বড় টেক্সটের জন্য 3:1 কনট্রাস্ট রেশিও প্রয়োজন (18px বা তার বেশি, অথবা 14px বোল্ড)। Level AAA এই মানদণ্ড যথাক্রমে 7:1 এবং 4.5:1-এ উন্নীত করে। WCAG 2.1 Success Criterion 1.4.11-ও যুক্ত করেছে, যা বর্ডার, আইকন এবং ফোকাস ইন্ডিকেটরের মতো নন-টেক্সট UI উপাদানের জন্য 3:1 অনুপাত প্রয়োজন।

কেন এই কনট্রাস্ট চেকার ব্যবহার করবেন?

চোখ দিয়ে কনট্রাস্ট যাচাই করা অবিশ্বস্ত। আপনার ক্যালিব্রেটেড ডিসপ্লেতে যে রঙগুলো আলাদা মনে হয়, সেগুলো নিম্নমানের ল্যাপটপের স্ক্রিনে, সরাসরি সূর্যালোকে, বা ডিউটেরানোপিয়া আক্রান্ত কারো কাছে একসাথে মিশে যেতে পারে। একটি সংখ্যাগত অনুপাত অনুমানের প্রয়োজন দূর করে এবং WCAG মানদণ্ডের বিপরীতে পাস/ফেল ফলাফল দেয়।

তাৎক্ষণিক রেশিও গণনা
দুটি রঙ বাছাই বা টাইপ করুন এবং কনট্রাস্ট রেশিও রিয়েল টাইমে আপডেট হতে দেখুন। কোনো ফর্ম সাবমিট নেই, কোনো পেজ রিলোড নেই।
🔒
গোপনীয়তা-প্রথম প্রক্রিয়াকরণ
উজ্জ্বলতার গণনা সম্পূর্ণ আপনার ব্রাউজারে চলে। কোনো রঙের মান আপনার মেশিন ছেড়ে যায় না এবং কোনো কুকি বা অ্যানালিটিক্স আপনার পছন্দ ট্র্যাক করে না।
🎯
AA ও AAA রায়
ফলাফলে WCAG AA ও AAA-এর জন্য পাস/ফেল স্ট্যাটাস দেখানো হয়, উভয় সাধারণ ও বড় টেক্সটের আকারের জন্য, যাতে আপনি ঠিক জানতে পারেন কোন মানদণ্ড পূরণ হয়েছে।
📋
কোনো অ্যাকাউন্ট প্রয়োজন নেই
পেজ খুলুন এবং পরীক্ষা শুরু করুন। কোনো নিবন্ধন নেই, কোনো রেট লিমিট নেই। পেজ একবার লোড হলে অফলাইনেও কাজ করে।

কনট্রাস্ট চেকারের ব্যবহারের ক্ষেত্র

ফ্রন্টেন্ড ডেভেলপমেন্ট
কোনো UI পরিবর্তন পাঠানোর আগে, আপনার CSS থেকে টেক্সট রঙ এবং ব্যাকগ্রাউন্ড চেকারে পেস্ট করুন এবং নিশ্চিত করুন জুটিটি WCAG AA পূরণ করে। এটি কোড রিভিউ বা স্বয়ংক্রিয় অডিটে পৌঁছানোর আগেই কনট্রাস্ট ব্যর্থতা ধরে।
ডিজাইন হ্যান্ডঅফ
ডিজাইনাররা ইঞ্জিনিয়ারদের কাছে স্পেক হস্তান্তর করার আগে একটি Figma ফাইলের প্রতিটি রঙের জুটি প্রয়োজনীয় WCAG স্তর পূরণ করছে কিনা যাচাই করতে পারেন। বাস্তবায়নের পরে ঠিক করার চেয়ে ডিজাইন পর্যায়ে কনট্রাস্ট ঠিক করা অনেক সাশ্রয়ী।
অ্যাক্সেসিবিলিটি অডিটিং
WCAG অডিট পরিচালনাকারী QA ইঞ্জিনিয়াররা Lighthouse বা axe-এর মতো স্বয়ংক্রিয় সরঞ্জাম দ্বারা চিহ্নিত নির্দিষ্ট রঙের সমন্বয় স্পট-চেক করতে পারেন। চেকার সঠিক অনুপাত এবং কোন স্তর পাস বা ফেল হয়েছে তা নিশ্চিত করে।
ডিজাইন সিস্টেম টোকেন
একটি ডিজাইন সিস্টেমের জন্য রঙ টোকেন নির্ধারণ করার সময়, প্রতিটি ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড জুটি পরীক্ষা করুন যাতে টোকেন প্যালেট ন্যূনতম AA পূরণ করে। যাতে পরবর্তী টিমগুলো এই মানগুলোর উপর ভরসা করতে পারে, টোকেনের পাশে অনুপাতগুলো নথিভুক্ত করুন।
ইমেইল টেমপ্লেট পরীক্ষা
ইমেইল ক্লায়েন্ট অপাসিটি এবং ব্লেন্ড মোডের মতো CSS বৈশিষ্ট্যগুলো বাদ দেয়, তাই প্রকৃত রেন্ডার করা রঙগুলো আপনার সোর্স থেকে আলাদা হতে পারে। পাঠযোগ্যতা যাচাই করতে ইনবক্সে পৌঁছানো চূড়ান্ত ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড মানগুলো পরীক্ষা করুন।
অ্যাক্সেসিবিলিটি মান অধ্যয়ন
WCAG শিখছেন এমন শিক্ষার্থীরা বিভিন্ন রঙের জুটি নিয়ে পরীক্ষা-নিরীক্ষা করতে পারেন এবং অনুপাত কীভাবে পরিবর্তিত হয় তা তাৎক্ষণিকভাবে দেখতে পারেন। একবারে একটি চ্যানেল পরিবর্তন করা এবং অন্যগুলোতে পরিবর্তন দেখা উজ্জ্বলতা এবং অনুভূত কনট্রাস্ট কীভাবে সম্পর্কিত তার একটি কার্যকরী ধারণা তৈরি করে।

WCAG কনট্রাস্ট রেশিওর প্রয়োজনীয়তা

নিচের টেবিলে বিভিন্ন কন্টেন্ট টাইপ এবং সম্মতি স্তরের জন্য WCAG 2.1 প্রয়োজনীয় ন্যূনতম কনট্রাস্ট রেশিও সংক্ষিপ্ত করা হয়েছে। বড় টেক্সট হলো স্বাভাবিক ওজনে 18px (24 CSS পিক্সেল) বা তার বেশি, অথবা বোল্ড ওজনে 14px (18.66 CSS পিক্সেল) বা তার বেশি।

স্তরন্যূনতম অনুপাতপ্রযোজ্যমন্তব্য
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

উজ্জ্বলতা, AA এবং AAA ব্যাখ্যা

কনট্রাস্ট রেশিও গণনার তিনটি ধাপ রয়েছে: প্রতিটি রঙের উজ্জ্বলতা গণনা করা, অনুপাত বের করা এবং WCAG মানদণ্ডের বিপরীতে তুলনা করা।

আপেক্ষিক উজ্জ্বলতা
0 (কালো) থেকে 1 (সাদা) পর্যন্ত একটি সংখ্যা যা একটি রঙ কতটা উজ্জ্বল দেখায় তা নির্দেশ করে। এটি অরৈখিক sRGB গামা কার্ভ এবং লাল, সবুজ ও নীলের প্রতি মানুষের চোখের অসম সংবেদনশীলতা বিবেচনা করে। বিশুদ্ধ সবুজ (#00FF00)-এর উজ্জ্বলতা 0.7152, যেখানে বিশুদ্ধ নীল (#0000FF)-এর মাত্র 0.0722।
WCAG AA
বেশিরভাগ আইনে বাধ্যতামূলক মৌলিক অ্যাক্সেসিবিলিটি স্তর, যার মধ্যে EU-র European Accessibility Act (EAA) এবং মার্কিন যুক্তরাষ্ট্রে Section 508 অন্তর্ভুক্ত। AA সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1 অনুপাত দাবি করে। বেশিরভাগ ডিজাইন সিস্টেম সমস্ত টেক্সট উপাদানের জন্য AA-কে ন্যূনতম হিসেবে লক্ষ্য করে।
WCAG AAA
উন্নত স্তর যা সবচেয়ে বিস্তৃত দর্শকদের কাছে পাঠযোগ্য হতে হবে এমন কন্টেন্টের জন্য প্রযোজ্য, যার মধ্যে উল্লেখযোগ্য দৃষ্টি প্রতিবন্ধকতাসম্পন্ন ব্যবহারকারীরাও আছেন। AAA সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1 দাবি করে। খুব কম সাইট সব পেজে AAA অর্জন করে, তবে আইনি বিজ্ঞপ্তি এবং চিকিৎসা তথ্যের মতো গুরুত্বপূর্ণ কন্টেন্ট প্রায়ই এটি লক্ষ্য করে।

কোড উদাহরণ

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

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

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

টেক্সটের জন্য একটি ভালো কনট্রাস্ট রেশিও কত?
ওয়েবে বডি টেক্সটের জন্য, কমপক্ষে 4.5:1 (WCAG AA) লক্ষ্য করুন। 7:1-এর বেশি অনুপাত WCAG AAA পূরণ করে এবং দীর্ঘ পড়ার জন্য আরও আরামদায়ক। সাদার উপর কালো সর্বোচ্চ 21:1 অনুপাত দেয়, তবে সাদার উপর খুব গাঢ় ধূসর (#1e293b) এখনও প্রায় 12.6:1 দেয়, যা AAA-এর উপরে।
WCAG-এ বড় টেক্সট কী?
WCAG বড় টেক্সট সংজ্ঞায়িত করে স্বাভাবিক ওজনে 18px (24 CSS পিক্সেল) বা তার বেশি, অথবা বোল্ড ওজনে 14px (18.66 CSS পিক্সেল) বা তার বেশি হিসেবে। বড় টেক্সট কম কনট্রাস্ট মানদণ্ড পায় কারণ বড় অক্ষর সহজে বোঝা যায়। CSS-এ, 1px = 0.75pt, তাই 18pt = 24px।
WCAG AA কি আইনগতভাবে প্রয়োজনীয়?
অনেক এখতিয়ারে, হ্যাঁ। European Accessibility Act (EAA), যা জুন 2025-এ কার্যকর হয়, WCAG 2.1 AA উল্লেখ করে। US Rehabilitation Act-এর Section 508 ফেডারেল সংস্থাগুলোকে WCAG 2.0 AA পূরণ করতে বাধ্য করে। Americans with Disabilities Act (ADA) মার্কিন আদালত দ্বারা WCAG AA মানদণ্ড সহ অ্যাক্সেসযোগ্য ওয়েবসাইট প্রয়োজন হিসেবে ব্যাখ্যা করা হয়েছে। কানাডা, অস্ট্রেলিয়া এবং যুক্তরাজ্যেও অনুরূপ বাধ্যবাধকতা রয়েছে।
আপেক্ষিক উজ্জ্বলতা কীভাবে গণনা করা হয়?
প্রতিটি sRGB চ্যানেলের মান (0-255) 255 দ্বারা ভাগ করা হয়, তারপর রৈখিক করা হয়: 0.04045 বা তার নিচের মানগুলো 12.92 দ্বারা ভাগ করা হয়, এবং উপরের মানগুলো ((c + 0.055) / 1.055) ^ 2.4 রূপান্তরিত হয়। তিনটি রৈখিক চ্যানেল ITU-R BT.709 সহগ (0.2126 R, 0.7152 G, 0.0722 B) দ্বারা ওজন দিয়ে যোগ করা হয়। ফলাফল 0 থেকে 1-এর মধ্যে একটি সংখ্যা।
WCAG কনট্রাস্ট সূত্রে কেন 0.05 অফসেট ব্যবহার করা হয়?
0.05 অফসেট রঙের একটি বিশুদ্ধ কালো হলে (উজ্জ্বলতা = 0) শূন্য দ্বারা বিভাজন প্রতিরোধ করে। এটি পারিপার্শ্বিক আলো এবং স্ক্রিনের প্রতিফলনও বিবেচনা করে যা সবচেয়ে অন্ধকার পিক্সেলেরও অনুভূত উজ্জ্বলতা সামান্য বাড়িয়ে দেয়। এই অফসেট ছাড়া, যেকোনো অন্ধকার রঙের উপর কালো অসীম বা বিভ্রান্তিকরভাবে উচ্চ অনুপাত তৈরি করত।
দুটি রঙ AA পাস করলেও কি পড়তে কষ্ট হতে পারে?
হ্যাঁ। WCAG কনট্রাস্ট রেশিও উজ্জ্বলতার পার্থক্য পরিমাপ করে, রঙের পার্থক্য নয়। একটি স্যাচুরেটেড লাল স্যাচুরেটেড সবুজের উপর প্রযুক্তিগতভাবে রেশিও মানদণ্ড পাস করতে পারে, কিন্তু কিছু দর্শকের জন্য, বিশেষত লাল-সবুজ বর্ণান্ধ ব্যক্তিদের জন্য পড়তে অস্বস্তিকর হতে পারে। উজ্জ্বলতা ও রঙ — দুটোতেই পার্থক্য রাখলে সাধারণত আরও আরামদায়ক ফলাফল পাওয়া যায়।
WCAG 2.x কনট্রাস্ট এবং APCA-এর মধ্যে পার্থক্য কী?
WCAG 2.x একটি সাধারণ উজ্জ্বলতা অনুপাত ব্যবহার করে যা ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ডকে প্রতিসামঞ্জস্যভাবে বিবেচনা করে। APCA (Advanced Perceptual Contrast Algorithm), WCAG 3.0-এর জন্য প্রস্তাবিত, একটি দৃষ্টিগত উজ্জ্বলতার মডেল ব্যবহার করে যা মেরুত্ব বিবেচনা করে: হালকা ব্যাকগ্রাউন্ডে গাঢ় টেক্সটের একই উজ্জ্বলতা পার্থক্যে গাঢ় ব্যাকগ্রাউন্ডে হালকা টেক্সটের চেয়ে আলাদা অনুভূত কনট্রাস্ট রয়েছে। APCA এখনও একটি ওয়ার্কিং ড্রাফট এবং কোনো প্রবিধানে WCAG 2.x পদ্ধতিটি প্রতিস্থাপন করেনি।