مدقق التباين ومحاكي WCAG

tools.accessibility-contrast-simulator.meta_desc

معاينة حية

التصميم القابل للوصول يهم

هذه فقرة نموذجية لتوضيح كيفية ظهور الألوان المحددة معًا. التباين الجيد يضمن إمكانية القراءة للجميع.

تعرف على المزيد حول WCAG

Select a simulation mode below to apply filters to the live preview area.

رؤية طبيعية

عمى الألوان الأحمر (Protanopia)

عمى الألوان الأخضر (Deuteranopia)

عمى الألوان الأزرق (Tritanopia)

عمى الألوان الكلي (Achromatopsia)

ضعف البصر (تمويه)

ضوء شمس ساطع (تباين منخفض)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

لون المقدمة (النص)

لون الخلفية

نص عادي

21.00:1

AAA

نص كبير

AAA

عناصر واجهة الاستخدام (UI)

AAA

الأسئلة الشائعة حول محاكي تباين إمكانية الوصول

نسبة تباين WCAG هي قياس رياضي للفرق في السطوع (اللمعان) المتصور بين لونين، يعبر عنه برقم يتراوح من 1:1 إلى 21:1. وهذا يضمن أن تكون النصوص وعناصر واجهة الاستخدام (UI) مميزة بشكل كافٍ عن خلفياتها حتى تكون قابلة للقراءة من قبل المستخدمين ذوي القدرات البصرية المتنوعة.

حتى يتم تلبية معيار التوافق WCAG AA، يتطلب النص العادي نسبة 4.5:1 كحد أدنى، في حين أن النص الكبير (18 نقطة أو 14 نقطة بالخط الغامق) ومكونات واجهة المستخدم (UI) تتطلب نسبة 3.0:1. وللامتثال الصارم والأعلى AAA، فإن النص العادي يحتاج إلى نسبة 7.0:1، ويتطلب النص العريض 4.5:1.

نعم، تطبق علامة تبويب "المحاكاة البصرية" مرشحات (فلاتر) مصفوفة SVG في الوقت الفعلي على المعاينة المباشرة الخاصة بك. فهي تكرر بدقة عمى الألوان الأحمر (Protanopia)، وعمى الألوان الأخضر (Deuteranopia)، وعمى الألوان الأزرق (Tritanopia)، والعمى اللوني الكلي أو أحادية اللون (Achromatopsia)، إلى جانب محاكاة التمويه ووهج ضوء الشمس.

لا. تم تصميم جهاز محاكاة PRO هذا داخليًا من جانب العميل فقط وباستخدام JavaScript البحت. لذلك جميع حسابات ومعالجات الألوان، وتوليد التقارير في النهاية يحدث مباشرة ومحليًا في متصفحك. ذلك لضمان الخصوصية المطلقة ولا يتم إرسال بيانات ولا حفظها أبدًا.

إذا رسبت وسقطت ألوانك المفضلة للاختبار الذي وضعته WCAG، فيمكنك الاستعانة وتقبل مساعدة أداة "الإصلاح المدمجة" الموجودة في المحاكي الخاص بنا، وتستنتج الأداة لدرجات أكثر أمانًا لمستويات AA و AAA بشكل رياضي وتحسب لك أفضل وأقرب لون مناسب لك بحيث يمكنه الإبقاء والحفاظ على رونق علامتك وجمال موقعك بكل أريحية.

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

تعيين ألوان المقدمة والخلفية
أدخل لون النص (المقدمة) ولون الخلفية باستخدام أدوات اختيار الألوان أو عن طريق كتابة قيم HEX أو RGB أو HSL. يتم تحديث نسبة التباين على الفور.
اقرأ نتيجة WCAG الخاصة بك
تُظهر الأداة نسبة التباين (على سبيل المثال 5.2:1) وما إذا كانت تتوافق مع معايير WCAG AA (4.5:1 للنص العادي) و AAA (7:1). النص الكبير (18pt+) له عتبات أقل.
محاكاة عمى الألوان
انتقل إلى علامة التبويب "المحاكي" لمعاينة كيف تبدو تركيبة الألوان للمستخدمين الذين يعانون من عمى اللون الأحمر، أو عمى اللون الأزرق، أو عمى اللون الأخضر، أو أنواع أخرى من العمى.
استخدم الإصلاح التلقائي إذا لزم الأمر
إذا فشلت الألوان، انقر فوق "إصلاح تلقائي". تقوم الأداة بحساب أقرب درجة لون متوافقة مع AA أو AAA مع الحفاظ على درجة اللون والتشبع قدر الإمكان.

مرجع نسبة التباين

متطلبات التباين الدنيا لـ WCAG 2.1 لمختلف فئات النصوص:

نوع المحتوى	WCAG AA	WCAG AAA	نسبة المثال
نص عادي (<18pt)	4.5:1 ✓	7:1 ✓	#000 على #fff → 21:1
نص كبير (≥18pt غامق)	3:1 ✓	4.5:1 ✓	#333 على #fff → 12.6:1
مكونات واجهة المستخدم والأيقونات	3:1 ✓	غير متوفر	#767676 على #fff → 4.5:1
العناصر الزخرفية	لا يوجد متطلبات	لا يوجد طلب	صور الخلفية معفاة

حالات الاستخدام الشائعة

مراجعة التصميم البصري/واجهة المستخدم

اختبر كل تركيبة من النصوص والخلفيات في نظام التصميم الخاص بك قبل تسليمها إلى قسم التطوير، وذلك للكشف عن الأخطاء في وقت مبكر.

تدقيق إمكانية الوصول

توفير نسب تباين موثقة لتقارير إمكانية الوصول للعملاء وشهادات الامتثال لـ WCAG 2.1 / 2.2.

اختبار عمى الألوان

قم بمحاكاة كيفية تجربة 8٪ من المستخدمين الذكور للوحة الألوان الخاصة بك للتأكد من عدم فقدان أي معلومات مهمة بالنسبة للجمهور المصاب بعمى الألوان.

الامتثال القانوني

تلبية متطلبات الوصول الرقمي ADA (الولايات المتحدة الأمريكية) و EAA (الاتحاد الأوروبي) و EN 301 549 قبل إطلاق المنتج أو طرحه في مناقصة عامة.

مطور QA

تحقق بسرعة من تباين متغيرات ألوان CSS أثناء مراجعة الكود، دون الحاجة إلى التبديل إلى أداة تصميم.

كيف يعمل

تتم جميع الحسابات في متصفحك باستخدام صيغة السطوع WCAG 2.1 — دون الحاجة إلى الاتصال بالخادم.

السطوع النسبي

تُعرّف WCAG اللمعان على أنه مجموع مرجح لقنوات RGB الخطية: L = 0.2126R + 0.7152G + 0.0722B. ومن ثم تكون نسبة التباين (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللون الأفتح.

محاكاة عمى الألوان

يطبق المحاكي مصفوفات دالتونيزاتيون القياسية (Machado et al., 2009) لتحويل قيم sRGB كما تراها كل نوع من أنواع عيوب رؤية الألوان.

خوارزمية الإصلاح التلقائي

تقوم ميزة الإصلاح التلقائي بتكرار قناة الإضاءة في مساحة HSL، والعثور على الحد الأدنى من التعديل الذي يصل إلى النسبة المستهدفة (AA أو AAA) مع الحفاظ على درجة اللون والتشبع دون تغيير.

لمن هذه الأداة

مصممو واجهة المستخدم/تجربة المستخدم

اختبر تركيبات الألوان قبل تسليم التصميم وحافظ على نظام تصميم متوافق.

أخصائيو إمكانية الوصول

تقديم أدلة مقارنة لتدقيقات WCAG وتقارير العملاء وشهادات الامتثال.

مطورو الواجهة الأمامية

تحقق بسرعة من متغيرات ألوان CSS أثناء التطوير ومراجعة الكود دون مغادرة المتصفح.

مديرو المنتجات

ضمان الامتثال لمتطلبات الوصول القانوني (ADA، EAA) قبل إطلاق المنتج أو تقديم العطاءات العامة.

منشئو المحتوى

تحقق من أن النص المضاف على الصور أو الخلفيات الملونة يمكن قراءته من قبل جميع الجمهور.

نصائح لتصميم أكثر سهولة في الوصول

استهدف دائمًا WCAG AA (4.5:1) كأساس لك، واستهدف AAA (7:1) للنص الأساسي — خاصةً في مواقع الرعاية الصحية والحكومة والمالية.
قم بتشغيل محاكاة عمى الألوان لجميع الأنواع الثمانية، وليس فقط عمى اللون الأحمر. يؤثر كل نوع بشكل مختلف على أزواج الألوان المختلفة.
لا تعتمد أبدًا على اللون وحده لتوصيل المعلومات — احرص دائمًا على إقران الإشارات اللونية بالرموز أو الأنماط أو التسميات النصية.
استخدم HSL لضبط التباين: قم بزيادة فرق السطوع بين المقدمة والخلفية بدلاً من تغيير درجة اللون.
اختبر الجهاز المحمول الفعلي في ضوء الشمس الساطع — فالظروف الواقعية تكشف مشاكل التباين التي تخفيها الشاشات.

لماذا التباين في إمكانية الوصول مهم

يعاني حوالي 1 من كل 12 رجلاً و1 من كل 200 امرأة من شكل من أشكال ضعف رؤية الألوان — ويؤدي ضعف التباين إلى استبعاد هؤلاء المستخدمين بشكل مباشر.
تتطلب ADA (الولايات المتحدة الأمريكية) وقانون الوصول الأوروبي (الاتحاد الأوروبي 2025) الامتثال لمعايير WCAG 2.1 AA للمنتجات الرقمية الموجهة للجمهور.
يعد التباين الضعيف أحد أكثر 3 أخطاء شائعة في WCAG التي تم العثور عليها في عمليات تدقيق إمكانية الوصول على مستوى العالم (تقرير WebAIM Million).
تصميم الألوان سهل الوصول إليه يحسن قابلية القراءة لجميع المستخدمين — في ضوء الشمس الساطع، وعلى الشاشات منخفضة الجودة، ومع تقدم المستخدمين في العمر.

الأداء والخصوصية

يتم إجراء كل حساب للتباين ومحاكاة عمى الألوان والتصحيح التلقائي بالكامل في متصفحك باستخدام JavaScript. لا يتم نقل أي قيم ألوان أو لقطات شاشة أو بيانات استخدام إلى أي خادم. تستجيب الأداة في أقل من 5 مللي ثانية لكل حساب وتعمل دون اتصال بالإنترنت بعد تحميل الصفحة الأولى.

ملاحظة تعليمية: WCAG ورؤية الألوان

WCAG 2.1 مقابل 2.2

أدخلت WCAG 2.2 (2023) معايير نجاح جديدة (2.4.11 مظهر التركيز، 3.2.6 المساعدة المتسقة) ولكنها أبقت على متطلبات التباين الأساسية (1.4.3، 1.4.6) مطابقة لتلك الموجودة في الإصدار 2.1.

السطوع مقابل الإضاءة

تستخدم WCAG اللمعان النسبي — وهو مقياس مرجح حسيًا. اللون الأصفر الفاتح (#ffff00) له لمعان عالٍ جدًا (0.93) بينما اللون الأزرق الداكن (#003366) له لمعان منخفض (0.02)، مما ينتج عنه نسبة 9.8:1.

أنواع عمى الألوان

يصيب عمى اللون الأحمر والأخضر (الأكثر شيوعًا) حوالي 6% من الرجال. أما عمى اللون الأحمر (عمى اللون الأحمر) فيصيب حوالي 2%. وعمى اللون الأزرق والأصفر (عمى اللون الأزرق والأصفر) يصيب حوالي 0.01%. وعمى الألوان (عمى الألوان الكامل) يصيب حوالي 0.003%.

APCA — المعيار المستقبلي

تم اقتراح خوارزمية التباين الإدراكي المتقدمة (APCA) لـ WCAG 3.0. وهي تقيّم التباين بشكل مختلف بناءً على حجم الخط وسمكه وقطبيته — تابعوا هذا المكان.

استكشاف الأخطاء وإصلاحها

نعم. WCAG AA هو الحد الأدنى المطلوب قانونًا في معظم الولايات القضائية. AAA هو هدف طموح ولا يمكن تحقيقه دائمًا لجميع تركيبات النص/الخلفية. استهدف AAA في النص الأساسي حيثما أمكن ذلك.

النص الكبير (18 نقطة عادي أو 14 نقطة غامق) له عتبة أقل (3:1 لـ AA). إذا فشل النص الصغير في 4.5:1، قم بتغميق النص أو تفتيح الخلفية حتى يتم استيفاء النسبة.

حاول تعديل لون الخلفية فقط بدلاً من لون النص. يمكن تحقيق التوافق مع AA مع الحد الأدنى من التغيير البصري عن طريق تعتيم الخلفية البيضاء قليلاً (على سبيل المثال، إلى اللون الرمادي الفاتح).

قد تنشأ اختلافات طفيفة بسبب طريقة تقريب الأدوات لقيم سطوع النقاط العائمة. يجب أن تكون النتيجتان في نطاق ±0.1 من بعضهما البعض — استخدم القيمة الأكثر تحفظًا (الأقل) للتوافق.

هل تعلم؟

تم تقديم صيغة نسبة التباين WCAG لأول مرة في WCAG 1.0 (1999) كاختبار بسيط لفرق السطوع. تم تعديلها بشكل كبير في WCAG 2.0 (2008) لاستخدام السطوع النسبي — وهو نموذج يعتمد على مساحة اللون CIE 1931 وكيفية معالجة النظام البصري البشري للضوء. تم اختيار الحد الحالي 4.5:1 لأنه يعوض تقريبًا عن فقدان التباين 3:1 الذي يعاني منه المستخدمون الذين تبلغ حدة بصرهم 20/80 (ضعف البصر بدون تقنية مساعدة).

صنع منتجات يمكن للجميع استخدامها

تباين الألوان الميسر ليس مجرد خانة اختيار للامتثال — إنه جودة تصميم أساسية تفيد كل مستخدم. توفر لك هذه الأداة المجانية فحص WCAG في الوقت الفعلي، ومحاكاة عمى الألوان، وإصلاح تلقائي ذكي في مكان واحد، دون أن تغادر البيانات متصفحك. اختبر لوحة الألوان الخاصة بك الآن، وأصلح ما لا يعمل، وقم بشحن منتج يناسب الجميع.