مدقق تباين الألوان
أدخل الألوان الأمامية والخلفية وسيعيد المدقق نسبة تباين WCAG (1:1 إلى 21:1) بالإضافة إلى أحكام النجاح/الفشل مقابل عتبات WCAG 2.1 AA وAAA للنص العادي والنص الكبير والعناصر غير النصية. أسفل الغطاء، يستخدم صيغة النصوع WCAG، وهي عملية حسابية بسيطة، لكنها مهمة لإمكانية الوصول. أصلِح حالات الفشل بتعديل درجة الإضاءة حتى تتجاوز النسبة العتبة التي تحتاجها.
كيف يتم حساب نسبة التباين
-
1
أدخل لونين
HEX من 3 أو 6 خانات لكلا اللونين. يتوفر منتقي ألوان لكل منهما.
-
2
النصوع النسبي المحسوب لكل منها
L = 0.2126·R + 0.7152·G + 0.0722·B حيث تكون كل قناة خطية من sRGB.
-
3
نسبة التباين
(L_أفتح + 0.05) / (L_أغمق + 0.05). النسب بين 1:1 و21:1.
-
4
شارات النجاح/الفشل
AA (4.5:1 للعادي، 3:1 للكبير/واجهة المستخدم)، AAA (7:1 للعادي، 4.5:1 للكبير). نص كبير = ≥18pt عادي أو ≥14pt غامق.
عتبات التباين WCAG
| نوع المحتوى | عتبة AA | عتبة AAA |
|---|---|---|
| نص عادي | 4.5:1 | 7:1 |
| نص كبير (≥18pt عادي أو ≥14pt غامق) | 3:1 | 4.5:1 |
| غير نصية (مكونات واجهة المستخدم، حلقات التركيز) | 3:1 | - |
| نص عرضي (زخرفي، معطل، شعارات) | معفاة | معفاة |
“النص الكبير” يعني 18 نقطة + وزن عادي (~ 24 بكسل في CSS) أو 14 نقطة + غامق (~ 19 بكسل غامق).
مثال على التناقضات
| زوج | نسبة | AA عادي | AA كبير | AAA عادي |
|---|---|---|---|---|
| أسود على أبيض | 21:1 | نجاح | نجاح | نجاح |
| #333 على أبيض | 12.6:1 | نجاح | نجاح | نجاح |
| #666 على أبيض | 5.7:1 | نجاح | نجاح | فشل |
| #888 على أبيض | 3.5:1 | فشل | نجاح | فشل |
| #AAA على أبيض | 2.3:1 | فشل | فشل | فشل |
| أبيض على #1976D2 (Material blue 700) | 4.6:1 | فشل | نجاح | فشل |
| أبيض على #2196F3 (Material blue 500) | 3.1:1 | فشل (عادي) | نجاح | فشل |
مخاطر إمكانية الوصول الشائعة
- النص الأساسي باللون الرمادي على الأبيض عند #999 أو باللون الأفتح، فشل AA. استخدم #767676 أو أغمق للنص الأساسي باللون الأبيض.
- رابط أزرق على رمادي: غالبًا ما يفشل لأن كلا اللونين متوسطي الإضاءة.
- النص الأبيض على لون العلامة التجارية: ينجح على الظلال الداكنة (≥ 4.5:1)، ويفشل على ألوان العلامة التجارية ذات الدرجة المتوسطة. استخدم نصًا أكبر أو علامة تجارية أغمق.
- نص العنصر النائب غالبًا ما يكون ذو تباين منخفض لـ “التلميح”، ولا يزال WCAG قابلاً للتطبيق إذا احتاج المستخدمون إلى قراءة العنصر النائب.
- حالة التعطيل: يتطلب WCAG 2.2 نسبة 3:1 للنص المعطل على خلفية عنصر التحكم ما لم يتم توصيل الحالة نفسها بوسيلة أخرى.
ما لم يخبرك به WCAG
- يستخدم WCAG 2.x صيغة من عام 1988. تعكس APCA الحديثة (خوارزمية التباين الإدراكي المتقدمة) سهولة القراءة الملموسة بشكل أفضل، ولكنها ليست خط الأساس القانوني بعد. تجاوز الحد الأدنى لـ WCAG قليلاً للتعامل مع APCA والحالات الحدّية.
- التباين ليس البعد الوحيد لإمكانية الوصول. نسبة 21:1 لا تعني شيئًا إذا كان حجم الخط 9 بكسل، أو كان ارتفاع الخط ضيقًا، أو كان لون المعنى أحمر-أخضر.
تحسين الزوج الفاشل
- مقدمة أفتح على خلفية داكنة، أو مقدمة أغمق على خلفية فاتحة.
- زيادة حجم الخط أو وزنه، الحد الأقصى للنص الكبير أقل.
- إضافة خلفية خلف النص فوق الصور (تراكب، تدرج).
- لا تقم أبدًا بإصلاح التباين عن طريق التحول إلى اللون الرمادي الذي لا يزال يفشل، اضغط حتى تصل إلى AA.
أعد الفحص بعد كل تعديل، فالأداة تعيد حساب النسبة مباشرة، وقد يقلب تغيير صغير في الإضاءة الحكم بسرعة.
الأسئلة الشائعة
AA هو خط الأساس القانوني في معظم الولايات القضائية (القسم 508 US، EN 301 549 EU) وما تشير إليه معظم أدوات التدقيق. AAA طموح - مطلوب فقط لسياقات إمكانية الوصول المحددة (المحتوى التعليمي للمستخدمين ضعاف البصر). استهدف الحصول على AA وعامل AAA كمكافأة.
لا، يقبل الألوان المعتمة بصيغة HEX فقط، من 3 أو 6 خانات. حوِّل RGB أو HSL إلى HEX أولًا، أو استخدم منتقي الألوان الذي يخرج HEX دائمًا.
يتطلب WCAG 2.1 SC 1.4.11 تباينًا بنسبة 3:1 لمكونات واجهة المستخدم غير النصية والكائنات الرسومية. ينطبق هذا على مؤشرات التركيز وحدود الإدخال وأزرار الأيقونات فقط والحالات (التمرير والنشط). التحقق من كل من الحالات الافتراضية والتركيز.
اختبر كل وضع على حدة، فنسب التباين في السمات الفاتحة والداكنة مستقلة. تفشل العديد من اللوحات التي تنجح في الوضع الفاتح عند تطبيقها في الوضع الداكن بنفس الإضاءة النسبية.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم بايت سداسية عشرية. يستخدم الناتج رقمين ست عشريين لكل محرف، جاهزة لتفريغات الذاكرة أو تتبعات الحزم أو جداول البرامج الثابتة.