طريقة الاستخدام
- اختر الألوان أو اكتبها — hex أو rgb() أو hsl() أو oklch() أو اسم لون.
- اقرأ النسبة ونتائج WCAG الأربع، وتحقق من المعاينة المباشرة أدناه.
- إذا فشل، انقر «استخدم هذا اللون» بجانب أحد الاقتراحات لتطبيقه.
شرح الخيارات
- AA
- 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (18 نقطة / 24 بكسل، أو 14 نقطة / نحو 18.7 بكسل غامقة). تشترط معظم اللوائح وأنظمة التصميم مستوى AA.
- AAA
- 7:1 على الأقل للنص العادي و4.5:1 للنص الكبير، للمحتوى الذي تكون فيه سهولة القراءة الأهم.
- اللون المقترح
- يحافظ على التدرج اللوني ودرجة الإشباع في مساحة الألوان OKLCH ويغيّر الإضاءة فقط للعثور على أقرب لون ينجح بالكاد.
- الألوان الشفافة
- يُقاس لون النص ذو الشفافية كما يظهر فوق الخلفية.
كيف تُحسب النسبة
يُحوَّل كل لون من sRGB إلى الضوء الخطي، ثم إلى السطوع النسبي:
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)يحظى الأخضر بأكبر وزن لأن العين أكثر حساسية له. وهذه بعض النتائج على خلفية بيضاء:
| لون النص | النسبة | النتيجة |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5.57 : 1 | AA للنص العادي، وليس AAA للنص العادي |
| #767676 | 4.54 : 1 | AA للنص العادي |
| #777777 | 4.48 : 1 | يفشل في AA للنص العادي، وينجح للنص الكبير |
تعريفات WCAG موجودة في Understanding Success Criterion 1.4.3.
الأسئلة الشائعة
كيف تُحسب نسبة التباين؟
بصيغة WCAG 2.x (السطوع النسبي الأفتح + 0.05) ÷ (السطوع النسبي الأغمق + 0.05)، فتعطي من 1:1 إلى 21:1. الأسود على الأبيض هو 21:1.
لماذا يُذكر #767676 كثيرًا؟
إنه أفتح رمادي يصل إلى 4.5:1 (نحو 4.54:1) على الأبيض، لذا فهو حد أدنى شائع لنص ثانوي.
هل تحتاج الأيقونات والحدود إلى فحص أيضًا؟
نعم. منذ WCAG 2.1، تحتاج مكونات واجهة المستخدم والرسومات — حدود الأزرار، وحقول الإدخال، والأيقونات — إلى 3:1 على الأقل مقابل الألوان المجاورة.
الخصوصية
تعمل هذه الأداة بالكامل داخل متصفحك. تُعالَج ملفاتك ونصوصك على جهازك ولا تُرفع أبدًا إلى خوادمنا.