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 فهي الحد الأقصى وتمثل الأسود على الأبيض أو العكس. تُحدد إرشادات إمكانية وصول محتوى الويب (WCAG) التي يصدرها W3C الحد الأدنى لنسب التباين التي يجب أن يحققها النص حتى يتمكن الأشخاص ذوو الإعاقات البصرية أو اضطرابات تمييز الألوان من قراءته.

تأتي صيغة نسبة التباين من WCAG 2.x وتعتمد على الإضاءة النسبية، وهي مقياس لمدى سطوع اللون أمام العين البشرية. تُحسب الإضاءة النسبية بتحويل كل قناة sRGB إلى قيمة خطية (بإزالة تصحيح غاما) ثم ترجيح القنوات وفق معاملات ITU-R BT.709: 0.2126 للأحمر، و0.7152 للأخضر، و0.0722 للأزرق. يُسهم الأخضر بالنصيب الأكبر لأن العين البشرية أكثر حساسية له. وتُحسب النسبة بالصيغة (L1 + 0.05) / (L2 + 0.05)، حيث L1 هي إضاءة اللون الأفتح.

يُحدد WCAG مستويين للامتثال. يتطلب المستوى AA نسبة تباين لا تقل عن 4.5:1 للنص العادي الحجم و3:1 للنص الكبير (18px فأكبر، أو 14px بخط عريض). يرفع المستوى AAA السقف إلى 7:1 و4.5:1 على التوالي. كما أضاف WCAG 2.1 معيار النجاح 1.4.11 الذي يشترط نسبة 3:1 لعناصر واجهة المستخدم غير النصية كالحدود والأيقونات ومؤشرات التركيز.

لماذا تستخدم هذا الفاحص؟

الحكم على التباين بالعين مجرد تخمين غير موثوق. الألوان التي تبدو واضحة التمييز على شاشتك المعايَرة قد تبدو متشابهة على شاشة حاسوب محمول رديئة الجودة، أو في ضوء الشمس المباشر، أو لشخص مصاب بعمى الألوان الثنائي. توفر نسبة التباين الرقمية حكمًا قاطعًا بالنجاح أو الفشل وفق معيار WCAG دون الحاجة إلى تخمين.

حساب النسبة فورًا
اختر لونين أو اكتبهما وشاهد نسبة التباين تتغيَّر في الوقت الفعلي. لا يوجد نموذج لإرساله ولا إعادة تحميل للصفحة.
🔒
معالجة تحترم الخصوصية
تجري حسابات الإضاءة بالكامل داخل متصفحك. لا تغادر قيم الألوان جهازك، ولا تتتبع أي ملفات تعريف ارتباط أو أدوات تحليل خياراتك.
🎯
أحكام AA و AAA
تعرض النتائج حالة النجاح أو الفشل لكل من WCAG AA و AAA، لحجمي النص العادي والكبير، حتى تعرف بالضبط أي المستويات تحققها.
📋
لا تسجيل مطلوب
افتح الصفحة وابدأ الفحص فورًا. لا تسجيل، ولا قيود على الاستخدام. تعمل الأداة دون اتصال بالإنترنت بعد تحميل الصفحة.

حالات استخدام فاحص التباين

تطوير واجهات المستخدم
قبل إطلاق أي تغيير في واجهة المستخدم، الصق لون النص والخلفية من ملف CSS في الفاحص للتأكد من أن الزوج يحقق WCAG AA. هذا يكشف إخفاقات التباين قبل أن تصل إلى مراجعة الكود أو الفحوصات الآلية.
تسليم التصميم
يستطيع المصممون التحقق من أن كل زوج ألوان في ملف Figma يجتاز مستوى WCAG المطلوب قبل تسليم المواصفات للمهندسين. إصلاح التباين في مرحلة التصميم أقل تكلفة بكثير من إصلاحه بعد التنفيذ.
تدقيق إمكانية الوصول
يستطيع مهندسو ضمان الجودة الذين يُجرون تدقيقًا وفق WCAG فحص مجموعات ألوان محددة أشارت إليها أدوات آلية كـ Lighthouse أو axe. يؤكد الفاحص النسبة الدقيقة ويُحدد أي المستويات تنجح أو تفشل.
رموز نظام التصميم
عند تعريف رموز الألوان لنظام تصميم، اختبر كل زوج من ألوان المقدمة والخلفية للتأكد من أن لوحة الرموز تحقق AA كحد أدنى. وثّق النسب إلى جانب الرموز حتى تثق الفرق المستخدِمة لها بصحة الاختيارات.
اختبار قوالب البريد الإلكتروني
تحذف برامج البريد الإلكتروني ميزات CSS كالشفافية وأوضاع المزج، لذا قد تختلف الألوان المعروضة فعليًا عن الكود المصدري. اختبر القيم النهائية للمقدمة والخلفية التي تصل إلى صندوق الوارد للتحقق من قابلية القراءة.
دراسة معايير إمكانية الوصول
يستطيع الطلاب الذين يتعلمون 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.

الإضاءة النسبية
رقم واحد يتراوح بين 0 (الأسود) و1 (الأبيض) يمثل مدى سطوع اللون. يأخذ في الاعتبار منحنى غاما غير الخطي لـ sRGB والحساسية غير المتساوية للعين البشرية للأحمر والأخضر والأزرق. الأخضر النقي (#00FF00) له إضاءة 0.7152، بينما الأزرق النقي (#0000FF) له إضاءة 0.0722 فقط.
WCAG AA
مستوى إمكانية الوصول الأساسي الذي تشترطه معظم المعايير القانونية، بما فيها قانون إمكانية الوصول الأوروبي (EAA) والمادة 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 pixels) بوزن عادي، أو 14px (18.66 CSS pixels) بوزن عريض. يحصل النص الكبير على حد تباين أدنى لأن الحروف الأكبر أسهل إدراكًا. في CSS، 1px يساوي 0.75pt، وبالتالي 18pt يساوي 24px.
هل يُعدّ WCAG AA إلزاميًا قانونيًا؟
في كثير من الولايات القضائية، نعم. يشير قانون إمكانية الوصول الأوروبي (EAA) الذي يدخل حيز التنفيذ في يونيو 2025 إلى WCAG 2.1 AA. تشترط المادة 508 من قانون إعادة التأهيل الأمريكي أن تلتزم الوكالات الفيدرالية بـ WCAG 2.0 AA. كما فسّرت المحاكم الأمريكية قانون الأمريكيين ذوي الإعاقات (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 (خوارزمية التباين الإدراكي المتقدمة) المقترحة لـ WCAG 3.0 فتستخدم نموذج سطوع إدراكي يأخذ في الاعتبار القطبية: النص الداكن على خلفية فاتحة له تباين محسوس مختلف عن النص الفاتح على خلفية داكنة عند نفس فرق الإضاءة. لا يزال APCA مسودة عمل ولم يحل محل أسلوب WCAG 2.x في أي تشريع.