حاسبة نسبة التباين
باستخدام حاسباتنا، فإنك توافق على شروط الاستخدام (بالإنجليزية).
نسبة تباين WCAG بين ألوان HEX الأمامية والخلفية — عتبات AA وAAA.
لونان
نسبة التباين
12.63:1
Passes WCAG AA normal text
- AA نص عادي (4.5:1)
- يجتاز
- AA نص كبير (3:1)
- يجتاز
- AAA نص عادي (7:1)
- يجتاز
حاسبات ذات صلة
نسبة التباين WCAG
تقيس نسبة التباين مدى إمكانية قراءة النص مقابل خلفيته على مقياس النصوع من 1:1 (ألوان متطابقة) إلى 21:1 (أسود على أبيض). يستخدم WCAG 2.x النصوع النسبي المحسوب من قيم sRGB السداسية - وليس تدرج اللون أو التشبع وحده. يمكن أن يتصرف لونان أزرقان لهما نفس الإضاءة بشكل مختلف إذا كان أحدهما أقرب إلى اللون الرمادي المتوسط، ولهذا السبب تفشل أزواج الألوان في مراجعة إمكانية الوصول.
يتطلب المستوى AA ما لا يقل عن 4.5:1 للنص الأساسي العادي و3:1 للنص الكبير (18 نقطة عادية أو 14 نقطة غامقة وأكبر). يرفع المستوى AAA الشريط إلى 7:1 للنص العادي و4.5:1 للنص الكبير. تحتاج مكونات واجهة المستخدم غير النصية والكائنات الرسومية إلى نسبة 3:1 مقابل الألوان المتجاورة بموجب معيار النجاح WCAG 2.1 1.4.11 — تركز هذه الآلة الحاسبة على أزواج النص ولكن يتم تطبيق نفس النسبة الرياضية.
أدخل المقدمة (النص) والقيم السداسية الخلفية. الترتيب لا يغير النسبة — #333 على #FFF يساوي #FFF على #333 رياضيًا، على الرغم من إمكانية استخدام اقتران واحد فقط للطباعة. تقوم العلامة السداسية غير الصالحة بإرجاع شرطة حتى يتم تحليل كلا الحقلين.
مثال عملي مع الحقول الافتراضية: المقدمة #333333 على الخلفية #FFFFFF. ينتج اللون الرمادي الداكن على الأبيض حوالي 12.63:1 - أعلى بكثير من AA وAAA للنص العادي. يُظهر الملخص "يمرر النص العادي لـ WCAG AA." قراءة الصفوف الكبيرة AA وAAA كلها Pass. بالنسبة للون الرمادي القريب مثل #767676 باللون الأبيض، تنخفض النسبة إلى حوالي 4.54:1 - بالكاد تتجاوز AA الطبيعي.
غالبًا ما تقدم لوحات العلامات التجارية ألوانًا مميزة تفشل في اللون الأبيض - يتم تثبيتها بظلال داكنة لأدوار النص مع الحفاظ على لهجات أكثر سطوعًا للعناوين الكبيرة أو الرموز التي يزيد حجمها عن 18 نقطة. لا تعتمد على وزن الخط وحده لإنقاذ التباين المنخفض؛ يساعد الخط الغامق في التأهل لعتبات "النص الكبير" ولكن الأحرف الصغيرة الرفيعة لا تزال تعتبر نصًا عاديًا.
تتضمن الأخطاء الشائعة التحقق من العينات السداسية بينما تستخدم واجهة المستخدم الحقيقية تراكبات شبه شفافة (يخفض ألفا التباين الفعال)، وتجاهل ألوان حلقة التركيز، واختبار اللون الأسود النقي #000 فقط بدلاً من اللون الرمادي المخفف لنسخة الجسم. خطأ آخر هو افتراض أن ألوان الحالة الخضراء/الحمراء قابلة للقراءة بشكل افتراضي - يفشل الكثير منها في الخلفيات البيضاء أو الرمادية الداكنة.
هذه الأداة عبارة عن فحص رياضي، وليست تدقيقًا للامتثال القانوني. تغطي مراجعات إمكانية الوصول الحقيقية ترتيب التركيز ومسارات لوحة المفاتيح والحركة ومؤشرات الحالة غير الملونة. اختبر دائمًا مع المستخدمين والتقنية المساعدة عند شحن واجهة مستخدم الإنتاج.
الحدود: أزواج سداسية sRGB فقط - لا يوجد تركيب ألفا، أو تدرجات، أو نص فوق التصوير الفوتوغرافي إلا إذا قمت بتجربة لون مسطح. يمكن أن يؤدي تحسين حواف البكسل الفرعي وظلال النص الملونة إلى تغيير التباين الملحوظ قليلاً عن النسبة المحسوبة.
أسئلة شائعة
ما الذي يمر WCAG AA؟
النص العادي: 4.5:1 أو أعلى. نص كبير: 3:1 أو أعلى. مكونات ورسومات واجهة المستخدم غير النصية: 3:1 مقابل الألوان المجاورة ضمن WCAG 2.1.
هل هذا ضمان للامتثال القانوني؟
لا، هذا فحص رياضي للأزواج السداسية sRGB. تتضمن عمليات تدقيق إمكانية الوصول الكاملة حجم الخط وحالات التركيز والإشارات غير الملونة.
هل يؤثر حد النص أو الظل على النسبة؟
يقوم WCAG بتقييم ألوان النص والخلفية التي تدخلها. لا يتم تصميم الخطوط العريضة والظلال - إذا كانت تغير الإدراك بشكل مادي، فاختبر المركب بصريًا.
هل يمكنني استخدام العلامة التجارية الصفراء على الأبيض؟
العديد من الألوان الصفراء (#FFFF00، #FACC15) تفشل في اللون الأبيض لأن النصوع مرتفع. قم بتغميق اللون الأصفر أو استخدم خلفية داكنة؛ قم بتشغيل الزوج هنا لتأكيد النسبة قبل التسليم.