WCAG مدقق تباين الألوان مجانًا
تحقق مما إذا كان اللونان يلبيان معايير التباين WCAG AA وAAA لسهولة الوصول. معاينة مباشرة بأحجام نص متعددة مع اقتراحات تلقائية عندما يكون التباين منخفضًا جدًا.
نص عنوان كبير
نص أساسي متوسط (18px) للقراءة والمحتوى.
نص أساسي عادي (16px) للفقرات.
نص أساسي صغير (14px) للتعليقات والبيانات الوصفية.
نسبة التباين
يتطلب 4.5:1 · لديك 14.63:1
يتطلب 3.0:1 · لديك 14.63:1
يتطلب 7.0:1 · لديك 14.63:1
يتطلب 4.5:1 · لديك 14.63:1
يتطلب 3.0:1 · لديك 14.63:1
إعدادات سريعة
مستند إلى إرشادات تباين WCAG 2.1. النص الكبير = 18pt (24px) عادي أو 14pt (18.66px) غامق. رموز HEX تتحدث في كلا الاتجاهين: اكتب رمزًا أو اختر لونًا، يبقى كلا الإدخالين متزامنين.
الاستخدامات الشائعة
- تدقيق صفحات الويب للامتثال WCAGتحقق من أن ألوان النص الخاصة بموقعك تفي بمعايير تباين WCAG AA أو AAA للوصول.
- التحقق من مجموعات ألوان العلامة التجاريةاختبر أزواج لوحة ألوان العلامة التجارية للتأكد من أنها تعمل لتصميم واجهة المستخدم في متناول الجميع.
- اختبر لوحات الألوان في الوضع الداكنيمكن أن يفشل النص الفاتح على الخلفيات الداكنة في التباين — تحقق من أزواج لوحة الوضع الداكن الخاصة بك هنا.
- أزواج الألوان لمواد مطبوعةالملصقات واللافتات والمواد المطبوعة تحتاج أيضًا إلى تباين قابل للقراءة — خاصة للمشاهدين الأكبر سناً.
- تصميم ألوان أزرار يمكن الوصول إليهاتأكد من أن أزرار CTA والأزرار الإجرائية والروابط تجتاز معايير WCAG مع خلفياتها.
كيف يعمل
يعمل فحص التباين بالكامل في متصفحك باستخدام خوارزمية الإضاءة النسبية في WCAG 2.1 — لا مكتبة ولا خادم، بل حسابات مكتوبة يدويًا تتبع المواصفة بدقة. تتحدّث كل نتيجة في الوقت الفعلي أثناء الكتابة أو اختيار لون.
- 1الإدخال الست عشري وتوحيدهتُقبل القيم الست عشرية بثلاثة أرقام (#abc) وستة أرقام (#aabbcc) وتُوحَّد إلى ثلاثيات RGB كاملة. ويُرفض الإدخال غير الصالح فورًا بدلًا من الرجوع صامتًا إلى الأسود، فيظهر إطار أحمر بدلًا من نتيجة نجاح مضللة.
- 2حساب الإضاءة وفق WCAGيُحوَّل كل لون إلى إضاءة نسبية باستخدام معادلة WCAG 2.1: تُخطَّط قيم قنوات sRGB بتصحيح غاما مجزأ (القسمة على 12.92 تحت 0.03928، والرفع إلى القوة 2.4 فوقها)، ثم تُوزن كـ 0.2126R + 0.7152G + 0.0722B.
- 3نسبة التباين وفحوص الامتثالتُحسب نسبة التباين كـ (الأفتح + 0.05) / (الأغمق + 0.05) وتُفحص مقابل عتبات WCAG الخمس كلها: AA للنص العادي (4.5:1)، وAA للنص الكبير (3:1)، وAAA للنص العادي (7:1)، وAAA للنص الكبير (4.5:1)، ومكونات الواجهة (3:1). تتحدّث النتائج مع كل ضغطة مفتاح.
- 4اقتراحات إصلاح تحافظ على درجة اللونعندما يفشل الزوج في WCAG AA، تبحث الأداة في فضاء إضاءة HSL — متقدمة من الإضاءة الأصلية في الاتجاهين — لإيجاد أقرب نسخة من كل لون تجتاز 4.5:1 مع الحفاظ على درجة اللون والتشبع نفسيهما. كما تتوفر EyeDropper API (في Chromium) لأخذ عيّنة من أي لون مباشرة من شاشتك.
أدوات ذات صلة
محاكاة عمى الألوان
شاهد كيف يبدو تصميمك للأشخاص الذين يعانون من قصور في رؤية الألوان. يحاكي البروتانوبيا والديوترانوبيا والتريتانوبيا وعمى الألوان الكلي (أكروماتوبسيا) والحالات الأخف.
ما هي دقة شاشتي
شاهد دقة شاشتك بـ CSS والبكسلات الحقيقية، وحجم النافذة، ونسبة البكسل، وعمق اللون، و HDR، ودعم اللمس ومعدل التحديث، وانسخ كل ذلك.
اختبار البكسل الميت
افحص شاشتك بحثًا عن بكسلات ميتة أو عالقة مع ألوان ملء الشاشة: الأسود والأبيض والأحمر والأخضر والأزرق والرمادي، بالإضافة إلى مصلح اختياري للبكسل العالق.