فاحص التباين
احسب نسبة التباين وفق WCAG بين لونين مع نتائج AA وAAA للنص العادي والكبير، ومعاينة حية تريك النتيجة بعينك. كل شيء يعمل داخل متصفحك.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
تعمل هذه الأداة بالكامل داخل متصفحك. بياناتك لا تغادر جهازك أبداً — لا يتم رفعها إلى أي خادم.
طريقة الاستخدام
- 1أدخل قيمة hex أو rgb() أو استخدم منتقي الألوان للون المقدمة.
- 2افعل الشيء نفسه مع لون الخلفية.
- 3اقرأ النسبة ونتائج AA / AAA أو المس إحدى الإعدادات المسبقة.
- 4احكم على الثنائي بعينك عبر كتلة المعاينة.
فاحص التباين
أدخل لون المقدمة ولون الخلفية — بصيغة hex مثل #333 أو #1F2937 أو rgb()/rgba() — واحصل على نسبة التباين بخانتين عشريتين مع حكم فوري على العتبات الأربع المهمة: AA وAAA للنص العادي والكبير. تعرض المعاينة الحية فقرة وعنوانًا كبيرًا بالألوان الحقيقية.
الحساب يستخدم صيغة الإضاءة النسبية الرسمية في WCAG 2.x — الصيغة ذاتها المستخدمة في أداة W3C — فالـ4.5 هنا هو 4.5 في كل مكان. ومن الإعدادات المسبقة زوج رمادي بنسبة 4.54:1 يُريك مدى ضيق عتبة AA.
الأسئلة الشائعة
ما نسبة التباين المطلوبة للنجاح؟
وفق WCAG 2.x: النص العادي يحتاج 4.5:1 لمستوى AA و7:1 لمستوى AAA. والنص الكبير — 24 بكسل فأكثر، أو 18.7 بكسل غامقًا — يحتاج 3:1 لـAA و4.5:1 لـAAA. أما مكونات الواجهة والعناصر الرسومية فتحتاج 3:1.
كيف تُحسب النسبة؟
يُخطَّط كل لون خطيًا من sRGB ثم يُجمع في إضاءة نسبية L = 0.2126·R + 0.7152·G + 0.0722·B، والنسبة = (L الأفتح + 0.05) ÷ (L الأغمق + 0.05)؛ وهي صيغة مواصفة WCAG 2.x نفسها. ألفا الأقل من 1 في rgba() تُسطَّح على الأبيض قبل الحساب.
أدوات ذات صلة
محوّل الألوان
الصق لوناً بصيغة hex أو rgb() أو hsl() واحصل على الصيغ الثلاث مع صف جاهز من التفتيحات والتغميقات لنظام تصميمك.
كل الأدوات →
منتقي الألوان
اختر لوناً من العينة أو أمسك واحداً من شاشتك مباشرة عبر واجهة EyeDropper — hex وRGB وHSL تُنسخ بنقرة واحدة.
كل الأدوات →
حاسبة الدرجات
حاسبة درجات موزونة أو بالنقاط: أضف الواجبات، وشاهد معدلك ورتبتك لحظيًا، واعرف بدقة ما تحتاج تحقيقه في الاختبار النهائي.
كل الأدوات →
تضمين هذه الأداة
أضف هذه الأداة إلى موقعك بسطر واحد — تعمل في متصفح الزائر.
<iframe src="https://zoyku.com/ar/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>