Color Tools

مقارنة الألوان وفحص تباين WCAG

أداة متكاملة لمقارنة الألوان للمصممين والمطورين. قيّم التباين بين الخلفية والنص، وافحص التوافق مع WCAG 2.1، وحاكِ قصور رؤية الألوان، وأنشئ تعديلات لونية ميسّرة فورًا.

Background A / Text B

Sample Heading

The quick brown fox jumps over the lazy dog.

Background B / Text A

Sample Heading

The quick brown fox jumps over the lazy dog.

نسبة التباين

6.83 : 1

✓ Legible for text

نص عادي (AA/AAA):AA Pass
نص كبير (AA/AAA):AA Pass
الفرق المرئي (Delta E)241.46

معاينة تفاعلية للواجهة

App Navigation Header

This live preview renders how body copy, border lines, and interactive button components look when pairing Color A as background and Color B as foreground element.

تصدير شيفرة المطور
:root {
  --color-a: #1E293B;
  --color-b: #38BDF8;
  --contrast-ratio: 6.83;
}

لماذا تستخدم هذه الأداة؟

لماذا تستخدم هذه الأداة؟

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

طريقة الاستخدام

طريقة الاستخدام

  1. الخطوة 1

    أدخل رموز الألوان

    اختر رموز Hex/RGB أو ألصقها في حقلي اللون A واللون B.
  2. الخطوة 2

    حلل التباين وتوافق WCAG

    راجع نسبة التباين المحسوبة وشارات توافق WCAG AA/AAA.
  3. الخطوة 3

    اختبر المحاكاة وصدّر

    افتح تبويب معاينة عمى الألوان وانسخ متغيرات CSS الناتجة إلى مشروعك.

مقارنة بصرية وتقنية جنبًا إلى جنب

أدخل قيمتي لون بصيغة Hex أو RGB أو HSL لتحليل العلاقة التقنية بينهما. تحسب الأداة مقاييس التباين وفق إرشادات WCAG والمسافة الإدراكية باستخدام علوم الألوان الرياضية.

محاكاة قصور رؤية الألوان ومعاينة الواجهة

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

شرح الميزات

مصفوفة تباين WCAG 2.1

تحسب نسب التباين الدقيقة (1:1 إلى 21:1) وتعرض شارات النجاح أو الإخفاق الرسمية AA وAAA لقراءة النص.

فرق Delta E الإدراكي

يقيس المسافة اللونية رياضيًا لتوضيح ما إذا كانت العين البشرية تميز اللونين بوضوح.

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

يحاكي إدراك الألوان في حالات Protanopia وDeuteranopia وTritanopia لحظيًا.

إصلاح تلقائي ذكي لإمكانية الوصول

يعدّل مستويات الإضاءة بنقرة واحدة لتحقيق التوافق مع WCAG AA تلقائيًا.

ما استخدامات هذه الأداة؟

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

تأكد من توافق نصوص الأزرار وألوان خلفياتها مع إرشادات WCAG المطلوبة قبل النشر.

تقييم لوحة العلامة التجارية

قارن الألوان الأساسية للعلامة بخيارات التمييز الثانوية من حيث سهولة القراءة والتوازن البصري.

معلومات الأداة

التنسيقات المدعومةHex وRGB وHSL
معيار التوافقWCAG 2.1 (AA وAAA)
محرك المسافة اللونيةCIE76 / فرق Delta E الإدراكي
المعالجةمحرك يعمل بالكامل في المتصفح

الفوائد

  • ملاحظات فورية عن توافق WCAG.
  • أوضاع معاينة عمى الألوان لتصميم تجربة مستخدم ميسّرة.
  • إنشاء متغيرات CSS وTailwind بنقرة واحدة.

القيود

  • تعتمد الحسابات على العرض في فضاء ألوان sRGB القياسي.

معالجة محلية خاصة

تُنفّذ حسابات التباين وتحويلات فضاء اللون محليًا في متصفحك دون رفع بيانات.

سياسة الخصوصية

لا نسجل قيم الألوان التي تقارنها أو إعدادات المعاينة ولا نتعقبها أو نحفظها.

نصائح

  • استهدف نسبة تباين لا تقل عن 4.5:1 للنص العادي لاجتياز معيار WCAG AA.
  • استخدم زر «تبديل» لعكس اقتران المقدمة والخلفية بسرعة.

الأسئلة الشائعة

ما نسبة تباين WCAG الجيدة لنص المتن؟

يلزم حد أدنى 4.5:1 للنص العادي لاجتياز WCAG AA، ونسبة 7:1 لمعيار AAA.

ماذا تعني قيمة Delta E؟

تقيس Delta E الفرق اللوني المُدرك. الفرق الأقل من 1.0 لا تراه العين البشرية، بينما تشير القيم فوق 5.0 إلى ألوان مختلفة بوضوح.

هل أداة المقارنة مجانية؟

نعم، مجانية بالكامل بلا حدود استخدام أو حاجة إلى التسجيل.

أدوات ذات صلة

أدوات ذات صلة

عجلة الألوان

انقر في أي مكان على العجلة لاختيار لون، وحدد العلاقة بينه وبين الألوان الأخرى، واحصل على لوحة جاهزة للنسخ بصيغة HEX أو كمتغيرات CSS. تعمل الأداة في متصفحك ولا ترفع بيانات.

مولّد لوحات ألوان موحدة وفاحص التباين

أنشئ لوحة ألوان متناسقة، وافحص التباين وإمكانية الوصول، ثم صدّر رموز التصميم إلى الصيغ المتاحة.

مولّد ألوان عشوائية مع عجلة ألوان

اضغط الزر أو مفتاح المسافة للحصول على مجموعة ألوان عشوائية. ثبّت الألوان التي تعجبك وأعد توليد البقية. يعرض كل لون قيم HEX وRGB وHSL، ويمكن نسخ اللوحة ككود أو تنزيلها كملف SVG. تُنشأ اللوحات في المتصفح.

مولّد مزج الألوان

امزج درجات ألوان مخصصة بسهولة. اجمع رمزي Hex أو RGB أو أكثر، واضبط نسب المزج المئوية، وعاين الألوان المحسوبة لحظيًا.

إنشاء لوحة ألوان من صورة

ارفع أي صورة لاستخدام مولّد لوحات الألوان عبر الإنترنت. تستخرج الأداة الألوان السائدة والدرجات المميزة والظلال الدقيقة تلقائيًا في المتصفح، وتتيح نسخ الشيفرة بلغات متعددة وتنزيل الصور وملفات PDF مباشرة.

منتقي ألوان الصور عبر الإنترنت

حمّل صورة وانقر على أي نقطة فيها لاستخراج قيم الألوان بدقة، مباشرةً في متصفحك.