مدقق تباين WCAG — نسبة AA/AAA
اختر لون النص والخلفية لرؤية نسبة تباين WCAG ونتيجة AA/AAA للنص العادي والكبير. الخطوات: اختر أو اكتب HEX، اضغط تحقق، اقرأ النسبة والشارات، بدّل الألوان أو جرّب الاقتراحات. مثال: #767676 على #ffffff ≈ 4.54:1 — ينجح AA للنص العادي ويفشل AAA للنص العادي. الألوان تبقى في متصفحك.
كيف يعمل
حدّد لون النص والخلفية بالمنتقي أو بكتابة HEX. تحوّل الصفحة sRGB إلى لمعان نسبي، تحسب النسبة، وتعرض نجاح/فشل AA وAAA (نص عادي وكبير). بدّل الزوج، انسخ ملخصاً، أو طبّق اقتراحاً عند انخفاض التباين.
قواعد يجب معرفتها
تباين WCAG يعتمد على اللمعان النسبي وليس درجة اللون وحدها. راجع هذه القواعد إذا بدت النسبة غير متوقعة.
- اللمعان النسبي L يُستخرج من قنوات sRGB بعد منحنى linearization في WCAG. النسبة = (Lالأفتح + 0.05) / (Lالأغمق + 0.05).
- العتبات: AA نص عادي 4.5:1، AA نص كبير 3:1، AAA نص عادي 7:1، AAA نص كبير 4.5:1. نسبة واحدة تغذي الشارات الأربع.
- يدعم HEX sRGB معتم فقط (#RGB أو #RRGGBB). HEX غير صالح يظهر خطأ؛ مقدمة وخلفية متطابقتان تعطيان 1:1 وتفشلان كل المستويات.
- الخصوصية: تُعالج الألوان محلياً في هذا التبويب — لا شيء يُرسل للخادم.
مثال
حمّل العينة: المقدمة #767676 على الخلفية #ffffff تعطي نحو 4.54:1. AA نص عادي ينجح (≥4.5:1)، AA نص كبير ينجح (≥3:1)، AAA نص عادي يفشل (≥7:1)، AAA نص كبير ينجح (≥4.5:1). بدّل الألوان لترى كيف تتغير النسبة.
متى يناسب
- تصميم واجهات: تحقق من النص والتسميات على خلفية العلامة قبل التسليم.
- أزرار وشارات: راجع أبيض على لون أو العكس لـ AA عادي أو كبير.
- الوضع الداكن: بدّل الأسطح الفاتحة/الداكنة وتأكد أن النص الثانوي يبقى ≥4.5:1 أو 3:1 للكبير.
Frequently asked questions
ما هي عتبات تباين WCAG؟
AA للنص العادي يتطلب 4.5:1 على الأقل؛ AA للنص الكبير (18 pt عادي أو 14 pt عريض) 3:1؛ AAA للنص العادي 7:1؛ AAA للنص الكبير 4.5:1. هذه الصفحة تعرض الشارات الأربع دفعة واحدة.
ما الذي يُعد نصاً كبيراً؟
النص الكبير يُقرأ أسهل فيسمح بتباين أقل. WCAG يعتبره ≥18 pt عادي أو ≥14 pt عريض. المعاينة تعرض سطراً كبيراً وآخر عادياً للمقارنة.
هل تُرفع ألواني؟
لا. الحساب يتم بالكامل في متصفحك — قيم الألوان لا تُرفع.
كيف أستخدم اقتراحات الألوان؟
إذا انخفض التباين عن 4.5:1، قد يقترح أداة لون مقدمة أو خلفية أفتح أو أغمق يحقق AA للنص العادي. الاقتراحات نقطة بداية بمزج نحو الأبيض أو الأسود، وليست لوحة علامة تجارية نهائية.
ما علاقتها برموز ألوان العلامة؟
استخدم هذه الصفحة للتحقق من أي زوج نص/خلفية. للوحة علامة تجارية كاملة مع رموز دلالية، افتح أداة حزمة ألوان العلامة؛ يمكنك أيضاً أخذ عينات من صورة بأداة استخراج الألوان.
استفسارات أو ملاحظات
هل هناك غموض أو خلل أو نقص؟ اكتب رسالة أدناه — نقرأ كل ملاحظة عن هذه الأدوات.