مدقق التباين
تأكد من قابلية قراءة نصوصك وامتثالها لمعايير سهولة الوصول العالمية.
- التصنيف
- الصور
- لغة الصفحة
- العربية
- واجهة الأداة
- الإنجليزية
الخصوصية: تجري كافة حسابات التباين محلياً داخل متصفحك؛ لا ترسل الألوان المختارة ولا تسجل على أي خادم.
واجهة الأداة بالإنجليزية
الأزرار والحقول داخل المساحة أدناه بالإنجليزية حتى تُترجم الواجهة. الشرح والخطوات والأسئلة حولها بالعربية، ويمكنك الكتابة بالعربية مباشرة في حقول النص.
Open the English pageColours
Result
Large heading sample
Body text sample: the quick brown fox jumps over the lazy dog.
Large text sample at 18.66px bold
- Contrast ratio
- 14.68:1Higher is better. Body text needs at least 4.5:1.
- Verdict for body text
- Passes AA2.5:1 would be the bare minimum for decorative graphics only.
| Check | Needs | Result |
|---|---|---|
| AA body text (4.5:1) | 4.5:1 | Pass |
| AA large text (3:1) | 3:1 | Pass |
| AAA body text (7:1) | 7:1 | Pass |
| AAA large text (4.5:1) | 4.5:1 | Pass |
| UI component or graphic (3:1) | 3:1 | Pass |
يقيس فاحص تباين الألوان نسبة التباين الضوئي بين لون النص ولون الخلفية استناداً إلى معادلة الإضاءة النسبية القياسية المعتمدة في معايير سهولة الوصول إلى محتوى الويب (WCAG 2.1). يحدد الفاحص بدقة مدى مطابقة الألوان لمستويات النجاح AA و AAA لكل من النصوص العادية والنصوص الكبيرة وعناصر الواجهة الرسومية، مما يحمي مواقعك من مخالفات إمكانية الوصول. عند فشل التباين، تقترح الأداة أقرب درجة لونية بديلة تحقق نسبة التباين المطلوبة مع الحفاظ على صبغة وتشبع اللون الأصلي قدر الإمكان. يعمل المحلل لحظياً عبر متصفحك دون رفع أي أكواد أو بيانات لأي جهة.
كيف تستخدم مدقق التباين
- أدخل كود لون النص وكود لون الخلفية بصيغة HEX أو اخترهما عبر المنتقي.
- اقرأ نسبة التباين الناتجة فوراً وعاين بطاقات التقييم لمستويي AA و AAA.
- عاين التوصية اللونية المقترحة إن كان التباين دون الحد الأدنى المطلوب.
- انسخ كود اللون المعتمد لتطبيقه في ملفات أنماط CSS أو برامج التصميم.
ما تحصل عليه
- نسبة تباين رقمية دقيقة مقارنة بنسبة 1 (مثل 4.5:1 أو 7:1).
- حكم صريح بالاجتياز أو الفشل للنصوص العادية والكبيرة وفق معايير AA و AAA.
- اقتراح لوني ذكي يبلغ الحد الأدنى للنجاح عند الحاجة إلى تصحيح التباين.
متى تستخدم مدقق التباين
- فحص ألوان عناصر الأزرار والنصوص والروابط قبل اعتمادها في نظام التصميم (Design System).
- التدقيق في إمكانية وصول المواقع الحكومية والتعليمية للتوافق مع متطلبات الامتثال القانوني WCAG AA.
- استخراج بديل لوني مناسب يحقق نسبة التباين المعتمدة دون الإخلال بهوية العلامة التجارية.
أسئلة شائعة عن مدقق التباين
ما هي نسبة التباين المطلوبة لاجتياز معايير WCAG؟
يتطلب مستوى WCAG AA نسبة تباين 4.5:1 للنصوص العادية و 3:1 للنصوص الكبيرة، بينما يشترط مستوى AAA نسبة 7:1 للنصوص العادية و 4.5:1 للنصوص الكبيرة.
هل يستخدم المدقق خوارزمية APCA بدلاً من WCAG 2؟
كلا، يعتمد الفاحص معادلة الإضاءة النسبية المعتمدة في WCAG 2.x، وهي المعيار القانوني المعتمد في معظم لوائح الوصول الرقمي الحالية.
كيف يُستنتج اللون المقترح عند فشل التباين؟
تثبّت الخوارزمية صبغة اللون وتشبعه، وتعدل درجة الإضاءة بالتدريج نحو نقيض الخلفية حتى تبلغ أول درجة تحقق نسبة 4.5:1 على الأقل.
هل التباين اللوني وحده كافٍ لضمان سهولة الوصول؟
لا، تشتمل سهولة الوصول على جوانب أخرى مثل حجم الخطوط، وسهولة التنقل بلوحة المفاتيح، ووضوح التركيز، ولكن التباين عنصر أساسي قابل للقياس الرياضي الدقيق.
أدوات عربية ذات صلة
- حاسبة نسبة الأبعاد
احسب النسبة المبسطة أو البعد الناقص وتحقّق من مطابقة المقاس.
- تحويل Base64 إلى صورة
فك ترميز Base64 أو data URL إلى صورة PNG أو JPEG أو WebP أو GIF.
- محاكي عمى الألوان
عاين التصاميم والواجهات وفق مختلف حالات عمى الألوان مثل عمى الأحمر والأخضر والأزرق.
- محول صيغ الألوان
حوّل الألوان بين HEX وRGB وHSL وHSV وCMYK.
⚡تضمين أداة مدقق التباين في موقعك مع الشارة (Embed & Badge)↓
انسخ كود التضمين أو الشارة لإضافة الأداة إلى موقعك أو مدونتك أو ملفات README مع شارة اعتماد خفيفة وسريعة.
<iframe src="https://salaq.com/embed/image/contrast-checker" title="مدقق التباين — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">مشغل بواسطة <a href="https://salaq.com/ar/tools/image/contrast-checker" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">أداة مدقق التباين من Tools Hub</a></p>