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

بررسی کنتراست رنگ چیست؟

بررسی کنتراست رنگ، اختلاف روشنایی بین رنگ پیش‌زمینه (معمولاً متن) و رنگ پس‌زمینه را اندازه‌گیری می‌کند و نتیجه را به صورت یک نسبت بیان می‌کند. نسبت ۱:۱ به معنای یکسان بودن دو رنگ است؛ ۲۱:۱ بیشترین مقدار ممکن است که نمایانگر سیاه روی سفید یا برعکس است. دستورالعمل‌های دسترسی‌پذیری محتوای وب (WCAG) که توسط W3C منتشر شده، حداقل نسبت‌های کنتراستی را تعریف می‌کند که متن باید داشته باشد تا افراد دارای بینایی ضعیف یا ناتوانی در تشخیص رنگ بتوانند آن را بخوانند.

فرمول نسبت کنتراست از WCAG 2.x گرفته شده و بر روشنایی نسبی متکی است؛ معیاری که نشان می‌دهد یک رنگ در چشم انسان چقدر روشن به نظر می‌رسد. روشنایی نسبی با خطی‌سازی هر کانال sRGB (تصحیح گاما) و وزن‌دهی کانال‌ها بر اساس ضرایب ITU-R BT.709 محاسبه می‌شود: ۰.۲۱۲۶ برای قرمز، ۰.۷۱۵۲ برای سبز، و ۰.۰۷۲۲ برای آبی. سبز بیشترین سهم را دارد زیرا چشم انسان به نور سبز حساس‌ترین است. نسبت به صورت (L1 + 0.05) / (L2 + 0.05) محاسبه می‌شود که L1 روشنایی رنگ روشن‌تر است.

WCAG دو سطح انطباق تعریف می‌کند. سطح AA حداقل نسبت کنتراست ۴.۵:۱ برای متن با اندازه عادی و ۳:۱ برای متن بزرگ (18px به بالا، یا 14px ضخیم) را الزامی می‌داند. سطح AAA این آستانه را به ترتیب به ۷:۱ و ۴.۵:۱ افزایش می‌دهد. WCAG 2.1 همچنین معیار موفقیت ۱.۴.۱۱ را معرفی کرد که نسبت ۳:۱ را برای اجزای رابط کاربری غیرمتنی مانند حاشیه‌ها، آیکون‌ها و نشانگرهای فوکوس الزامی می‌داند.

چرا از این بررسی‌کننده کنتراست استفاده کنیم؟

بررسی کنتراست با چشم غیرقابل اعتماد است. رنگ‌هایی که روی نمایشگر کالیبره‌شده شما متمایز به نظر می‌رسند، ممکن است روی یک لپ‌تاپ ارزان‌قیمت، زیر نور مستقیم آفتاب، یا برای فردی با کوررنگی دوتانوپی در هم ادغام شوند. یک عدد دقیق حدس‌وگمان را از بین می‌برد و نتیجه قبول یا رد در برابر استاندارد WCAG را مشخص می‌کند.

محاسبه فوری نسبت
دو رنگ را انتخاب کنید یا وارد کنید و نسبت کنتراست را به صورت لحظه‌ای مشاهده کنید. بدون ارسال فرم، بدون بارگذاری مجدد صفحه.
🔒
محاسبه کاملاً محلی
محاسبات روشنایی کاملاً در مرورگر شما انجام می‌شود. هیچ رنگی از دستگاه شما ارسال نمی‌شود و هیچ کوکی یا ابزار تحلیلی انتخاب‌های شما را دنبال نمی‌کند.
🎯
نتایج AA و AAA
نتایج وضعیت قبول یا رد برای WCAG AA و AAA را هم برای اندازه متن عادی و هم برای متن بزرگ نمایش می‌دهد، تا بدانید دقیقاً کدام آستانه‌ها را برآورده می‌کنید.
📋
بدون نیاز به حساب کاربری
صفحه را باز کنید و شروع به آزمایش کنید. بدون ثبت‌نام، بدون محدودیت نرخ. ابزار پس از بارگذاری صفحه به صورت آفلاین هم کار می‌کند.

موارد استفاده از بررسی‌کننده کنتراست

توسعه فرانت‌اند
قبل از اعمال یک تغییر رابط کاربری، رنگ متن و پس‌زمینه را از CSS خود در بررسی‌کننده وارد کنید تا تأیید شود که این جفت با WCAG AA مطابقت دارد. این کار خطاهای کنتراست را قبل از رسیدن به بازبینی کد یا بررسی‌های خودکار شناسایی می‌کند.
تحویل طراحی
طراحان می‌توانند تأیید کنند که هر جفت رنگ در یک فایل Figma سطح WCAG مورد نیاز را قبل از تحویل مشخصات به مهندسان برآورده می‌کند. رفع مشکلات کنتراست در مرحله طراحی بسیار کم‌هزینه‌تر از رفع آن پس از پیاده‌سازی است.
ممیزی دسترسی‌پذیری
مهندسان QA که یک بررسی WCAG انجام می‌دهند می‌توانند ترکیب‌های رنگ خاصی را که توسط ابزارهای خودکار مانند Lighthouse یا axe علامت‌گذاری شده‌اند بررسی کنند. بررسی‌کننده نسبت دقیق و سطوحی که قبول یا رد می‌شوند را تأیید می‌کند.
توکن‌های سیستم طراحی
هنگام تعریف توکن‌های رنگی برای یک سیستم طراحی، هر جفت پیش‌زمینه/پس‌زمینه را آزمایش کنید تا مطمئن شوید پالت توکن حداقل با AA مطابقت دارد. نسبت‌ها را در کنار توکن‌ها مستند کنید تا تیم‌های پایین‌دست به انتخاب‌ها اعتماد داشته باشند.
آزمایش قالب‌های ایمیل
کلاینت‌های ایمیل ویژگی‌های CSS مانند opacity و blend mode را حذف می‌کنند، بنابراین رنگ‌های واقعی رندر شده ممکن است با منبع شما متفاوت باشند. مقادیر نهایی پیش‌زمینه و پس‌زمینه‌ای را که به صندوق ورودی می‌رسند آزمایش کنید تا خوانایی را تأیید کنید.
مطالعه استانداردهای دسترسی‌پذیری
دانشجویانی که WCAG را یاد می‌گیرند می‌توانند با جفت‌های رنگی مختلف آزمایش کنند و فوری ببینند که چگونه نسبت تغییر می‌کند. تنظیم یک کانال در یک زمان، درک عملی از ارتباط روشنایی با کنتراست ادراک‌شده ایجاد می‌کند.

الزامات نسبت کنتراست WCAG

جدول زیر حداقل نسبت‌های کنتراست مورد نیاز WCAG 2.1 برای انواع مختلف محتوا و سطوح انطباق را خلاصه می‌کند. متن بزرگ به صورت 18px (24 CSS pixels) یا بالاتر با وزن عادی، یا 14px (18.66 CSS pixels) یا بالاتر با وزن ضخیم تعریف می‌شود.

سطححداقل نسبتکاربردتوضیح
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.

روشنایی نسبی
یک عدد از ۰ (سیاه) تا ۱ (سفید) که نشان می‌دهد یک رنگ چقدر روشن به نظر می‌رسد. این عدد منحنی گاما غیرخطی sRGB و حساسیت نابرابر چشم انسان به قرمز، سبز و آبی را در نظر می‌گیرد. سبز خالص (#00FF00) روشنایی ۰.۷۱۵۲ دارد، در حالی که آبی خالص (#0000FF) تنها ۰.۰۷۲۲ دارد.
WCAG AA
سطح پایه دسترسی‌پذیری که بیشتر استانداردهای قانونی، از جمله قانون دسترسی‌پذیری اروپا (EAA) و Section 508 در ایالات متحده آن را الزامی می‌دانند. AA نسبت ۴.۵:۱ برای متن عادی و ۳:۱ برای متن بزرگ را می‌طلبد. بیشتر سیستم‌های طراحی AA را به عنوان حداقل برای همه عناصر متنی در نظر می‌گیرند.
WCAG AAA
سطح پیشرفته که برای محتوایی در نظر گرفته شده که باید توسط وسیع‌ترین مخاطبان ممکن، از جمله کاربران با اختلال بینایی قابل توجه، قابل خواندن باشد. AAA نسبت ۷:۱ برای متن عادی و ۴.۵:۱ برای متن بزرگ را می‌طلبد. کمتر سایتی به طور کامل 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;
}

سؤالات متداول

نسبت کنتراست خوب برای متن چقدر است؟
برای متن اصلی در وب، هدف حداقل ۴.۵:۱ (WCAG AA) است. نسبت‌های بالای ۷:۱ با WCAG AAA مطابقت دارند و برای خواندن طولانی‌مدت راحت‌ترند. سیاه روی سفید حداکثر نسبت ۲۱:۱ را ایجاد می‌کند، اما یک خاکستری بسیار تیره (#1e293b) روی سفید هنوز حدود ۱۲.۶:۱ می‌دهد که بسیار بالاتر از AAA است.
متن بزرگ در WCAG چه تعریفی دارد؟
WCAG متن بزرگ را به صورت 18px (24 CSS pixels) با وزن عادی، یا 14px (18.66 CSS pixels) با وزن ضخیم تعریف می‌کند. متن بزرگ آستانه کنتراست پایین‌تری دارد زیرا حروف بزرگ‌تر راحت‌تر قابل تشخیص هستند. در CSS، 1px برابر ۰.۷۵pt است، بنابراین 18pt برابر 24px است.
آیا WCAG AA از نظر قانونی اجباری است؟
در بسیاری از حوزه‌های قضایی، بله. قانون دسترسی‌پذیری اروپا (EAA) که از ژوئن ۲۰۲۵ اجرایی می‌شود، به WCAG 2.1 AA اشاره می‌کند. Section 508 قانون توانبخشی ایالات متحده سازمان‌های فدرال را ملزم به رعایت WCAG 2.0 AA می‌کند. قانون آمریکایی‌های دارای معلولیت (ADA) توسط دادگاه‌های آمریکایی به گونه‌ای تفسیر شده که وب‌سایت‌های قابل دسترس را الزامی می‌کند و WCAG AA به عنوان استاندارد در نظر گرفته می‌شود. کانادا، استرالیا و بریتانیا دستورالعمل‌های مشابهی دارند.
روشنایی نسبی چگونه محاسبه می‌شود؟
هر مقدار کانال sRGB (۰-۲۵۵) بر ۲۵۵ تقسیم می‌شود، سپس خطی‌سازی می‌شود: مقادیر کمتر یا مساوی ۰.۰۴۰۴۵ بر ۱۲.۹۲ تقسیم می‌شوند، و مقادیر بالاتر با ((c + 0.055) / 1.055) ^ 2.4 تبدیل می‌شوند. سه کانال خطی‌شده با ضرایب ITU-R BT.709 (0.2126 R, 0.7152 G, 0.0722 B) وزن‌دهی شده و با هم جمع می‌شوند. نتیجه عددی بین ۰ و ۱ است.
چرا WCAG از آفست ۰.۰۵ در فرمول کنتراست استفاده می‌کند؟
آفست ۰.۰۵ از تقسیم بر صفر جلوگیری می‌کند وقتی یکی از رنگ‌ها سیاه خالص است (روشنایی = ۰). همچنین نور محیطی و بازتاب‌های صفحه را لحاظ می‌کند که روشنایی درک‌شده حتی تاریک‌ترین پیکسل‌ها را کمی افزایش می‌دهند. بدون این آفست، سیاه روی هر رنگ تیره نسبتی بی‌نهایت یا گمراه‌کننده بالا تولید می‌کرد.
آیا دو رنگ می‌توانند AA را بگذرانند اما همچنان سخت خوانده شوند؟
بله. نسبت‌های کنتراست WCAG اختلاف روشنایی را اندازه‌گیری می‌کنند، نه اختلاف رنگ. یک قرمز اشباع‌شده روی سبز اشباع‌شده می‌تواند از نظر فنی آستانه نسبت را بگذراند اما برای برخی بینندگان، به‌ویژه کسانی که دچار ضعف بینایی رنگ قرمز-سبز هستند، ناراحت‌کننده باشد. جفت‌کردن رنگ‌هایی که هم در روشنایی و هم در رنگ متفاوت هستند معمولاً نتایج راحت‌تری تولید می‌کند.
تفاوت بین کنتراست WCAG 2.x و APCA چیست؟
WCAG 2.x از یک نسبت روشنایی ساده استفاده می‌کند که پیش‌زمینه و پس‌زمینه را به صورت متقارن در نظر می‌گیرد. APCA (الگوریتم پیشرفته کنتراست ادراکی) که برای WCAG 3.0 پیشنهاد شده، از یک مدل روشنایی ادراکی استفاده می‌کند که قطبیت را در نظر می‌گیرد: متن تیره روی پس‌زمینه روشن کنتراست ادراک‌شده‌ای متفاوت از متن روشن روی پس‌زمینه تیره در همان اختلاف روشنایی دارد. APCA همچنان یک پیش‌نویس کاری است و هنوز روش WCAG 2.x را در هیچ مقرراتی جایگزین نکرده است.