اللغات

فاحص تباين الألوان

The quick brown fox jumps over the lazy dog.Large text and UI components use the lower 3:1 AA threshold.

يعمل بالكامل في متصفحك — لا يُرفع أو يُخزّن أي شيء تلصقه. قد تُستخدم عدادات النتائج المجهولة على مستوى التشغيل لأغراض البحث التجميعي؛ ولا تتضمن أبدًا عناوين URL أو النطاقات أو عناوين IP أو المعرّفات، ولا تُنشر أي إحصائية لأقل من 100 عملية تشغيل.

الملاحظات
الإبلاغ عن خطأ

هل وجدت شيئًا لا يعمل في فاحص تباين الألوان؟ أخبرنا بما حدث — يُرسل البلاغ مباشرة إلى قائمة فرز خاصة، وليس إلى قائمة عامة.

ما سيُرسل 
 لا تُرفق تلقائيًا مدخلات الأداة أو الملفات المرفوعة أو المصدر الملصق أو النتائج الكاملة أو معلمات الاستعلام أو أجزاء عنوان URL. يمكنك تعديل المقطع المحدد أعلاه أو إزالته. تُعالج البيانات الوصفية للمتصفح ومكافحة إساءة الاستخدام لمنع الرسائل المزعجة. 
  
 
  
 
 
  
 
 
   
 
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
      
 
     
     
              
حول هذه الأداة
تحقّق WCAG 2.2 تباين الألوان, العثور الأقرب اجتياز لون المقدمة ألوان, و تدقيق CSS لون رموز في الخاص بك متصفح.
مجاني, من دون تسجيل. قارن لون المقدمة و الخلفية ألوان مقابل WCAG 2.2 AA و AAA, احصل ال الأقرب عملي hex بدائل ذلك اجتياز, أو تحقّق واحد حي عنوان عنوان URL فعلي معروض contrast.
الميزات
  • WCAG 2.2 AA و AAA contrast تحقّقات من أجل لون المقدمة/background أزواج.
  • الأقرب عملي اجتياز لون المقدمة-color اقتراحات.
  • حي عنوان URL تدقيق في واحد مقاس متصفح بلا واجهة استخدام الأنماط المحسوبة.
  • محلي CSS-variable و لوحة ألوان تدقيق مع واحد exportable مصفوفة.
كيفية العمل
لصق وضع يحسب contrast من ال WCAG صيغة الإضاءة النسبية, ليس بواسطة ببساطة المقارنة RGB قيم. ال اقتراحات حافظ على ال لون المقدمة hue و saturation بينما walking الخاص به lightness نحو ال الأقرب اجتياز لون, ثم تحقّق ال مقرّب hex نتيجة. عنوان URL وضع يحمّل ال صفحة في واحد مقاس متصفح بلا واجهة و يقرأ كل element’s فعلي محسوب لون و الخلفية بعد ال CSS تتابع يحلّ — ال فقط way إلى يلتقط إخفاقات سبّب بواسطة inherited لون, semi-transparent backgrounds, CSS متغيرات, أو ال browser’s افتراضي ورقة أنماط. Normal-size نص يحتاج 4.5:1 من أجل AA; كبير نص و non-text UI indicators يحتاج 3:1. لون ينبغي أبدًا يكون ال فقط way إلى communicate واحد حالة.
القيود
  • هذا الأداة تحقّقات لون أزواج, ليس typography, تركيز حالات, صور من نص, أو (في لصق وضع) فعلي معروض backgrounds. يعالج إنه باعتباره واحد design-time تحقّق و اختبار ال مكتمل واجهة أيضًا.
الأسئلة الشائعة
ما نسبة التباين التي أحتاج إليها؟
يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير ولمكوّنات الواجهة غير النصية. ويتطلب AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير.
هل يثبت هذا أن صفحتي متاحة للجميع؟
لا. فهو يفحص أزواج الألوان، لا الطباعة أو حالات التركيز أو صور النص أو الخلفيات المعروضة فعليًا في وضع اللصق. تعامل معه كفحص في مرحلة التصميم واختبر الواجهة النهائية أيضًا.
إلى أين تذهب لوحة الألوان الخاصة بي؟
في وضع اللصق تبقى لوحة الألوان في المتصفح؛ يمكنك لصق خصائص CSS المخصصة أو رموز الاسم والقيمة بأسلوب Tailwind أو قائمة ألوان سداسية عشرية. لا يرسل وضع عنوان الصفحة إلا عنوان الصفحة العامة الذي تدخله إلى خادمنا، لا لوحة الألوان.
كيف يختلف وضع عنوان URL عن لصق الألوان؟
تعطيك الألوان الملصقة حسابًا دقيقًا للزوج الذي تدخله. أما وضع عنوان URL فيحمّل الصفحة الحقيقية في متصفح بلا واجهة ومقيّد، ويقرأ اللون والخلفية المحسوبين فعليًا لكل عنصر بعد حل تتابع CSS والوراثة والشفافية وافتراضات المتصفح. وهذه الطريقة الوحيدة للحصول على حكم تباين حقيقي لصفحة مباشرة، إذ قد يكون تخمين الألوان من HTML ثابت خاطئًا.
 
ما يستكشفه الآخرون أيضًا
أداةاختبار إمكانية الوصولأداةفاحص ملاءمة الهاتفأداةفاحص بنية العناوين
       
 
المشكلات الشائعة وكيفية إصلاحها
 
     
  •  خطأ زوج الألوان لا يستوفي WCAG AA للنص العادي الإصلاح: غيّر لون المقدمة أو الخلفية حتى يحقق النص العادي نسبة تباين 4.5:1 على الأقل، ثم أعد اختبار حالات المرور والتركيز والتعطيل والزيارة. 
  •  خطأ زوج الألوان لا يستوفي WCAG AA للنص الكبير الإصلاح: غيّر زوج الألوان حتى يحقق النص بحجم 24px عادي أو 18.66px عريض على الأقل نسبة تباين 3:1. 
  •  تحذير زوج الألوان لا يستوفي WCAG AAA للنص العادي الإصلاح: عدّل زوج الألوان حتى يحقق النص العادي نسبة تباين 7:1 عندما يكون مستوى AAA من متطلبات المشروع. 
  •  تحذير زوج الألوان لا يستوفي WCAG AAA للنص الكبير الإصلاح: عدّل زوج الألوان حتى يحقق النص الكبير المؤهل نسبة تباين 4.5:1 عندما يكون مستوى AAA مطلوبًا. 
  •  تحذير يفشل زوج الألوان في إرشادات تباين العناصر غير النصية الإصلاح: ارفع تباين الأيقونات الأساسية ومؤشرات التركيز وحدود عناصر التحكم والكائنات الرسومية إلى 3:1 على الأقل مقابل الألوان المجاورة. 
    •