مدقق تباين الألوان WCAG مجاني. اختبر ألوان النص والخلفية للتوافق مع إمكانية الوصول إلى AA وAAA مع نسبة تباين مباشرة ومعاينة أو سداسية أو RGB.
تحقق من نسبة التباين بين النص ولون الخلفية وفقًا لمعايير WCAG AA وAAA، من خلال معاينة مباشرة وإدخال سداسي عشري أو RGB.
يعد النص منخفض التباين أحد أكثر حالات فشل إمكانية الوصول شيوعًا. يحسب هذا المدقق نسبة التباين الدقيقة بين ألوان النص والخلفية باستخدام صيغة WCAG الرسمية للإضاءة النسبية، ثم يخبرك ما إذا كانت تجتاز AA (4.5:1 للنص العادي، 3:1 للنص الكبير) وAAA الأكثر صرامة (7:1 و4.5:1). تعرض المعاينة المباشرة نصًا حقيقيًا بالألوان التي اخترتها.
اختر أو اكتب اللون الأمامي.
اختر أو اكتب لون الخلفية.
شاهد نسبة التباين ونتائج AA/AAA.
قرص الألوان حتى تمر.
استخدم منتقي الألوان أو اكتب الرموز السداسية وقيم rgb() مباشرةً، وستقوم الأداة بتحليل كليهما. عندما تقوم بضبط أي لون، يتم تحديث شارات النسبة والنجاح/الفشل على الفور، حتى تتمكن من دفع الظل حتى يتوافق. كل شيء يعمل محليًا، مما يجعله رفيقًا سريعًا أثناء تصميم واجهة المستخدم والموضوعات وصفحات التسويق.
يقيس WCAG 2 التباين كنسبة من 1:1 (بدون تباين) إلى 21:1 (أسود على أبيض). المستوى AA، خط الأساس القانوني والصناعي المعتاد، يتطلب ما لا يقل عن 4.5:1 للنص العادي و3:1 للنص الكبير، مما يعني 24 بكسل عادي أو حوالي 18.66 بكسل غامق وما فوق. المستوى AAA يرفع تلك النسبة إلى 7:1 و4.5:1. تحتاج أجزاء واجهة المستخدم مثل حدود الإدخال وحلقات التركيز والأيقونات التي تحمل المعنى إلى نسبة 3:1 على الأقل مقارنة بمحيطها. يتم حساب النسبة من السطوع النسبي لكل لون، لذا فإن اللونين اللذين يبدوان مختلفين من الممكن أن يفشلا إذا كانا متساويين في السطوع، وهو أمر شائع مع اللون الأحمر على اللون الأخضر.
عندما يفشل الزوج، قم بتغيير الإضاءة بدلاً من تدرج اللون: قم بتغميق النص أو تفتيح الخلفية بخطوات صغيرة حتى تتجاوز النسبة، وسيظل اللون يشبه علامتك التجارية. ألوان العلامة التجارية ذات الدرجات اللونية المتوسطة، مثل اللون البرتقالي المتوسط أو الأزرق المخضر، لا يمكنها غالبًا حمل نص أبيض عند AA. في هذه الحالة، استخدم لون العلامة التجارية للعناوين أو الحدود أو الخلفيات الكبيرة وقم بتعيين النص الأساسي في ظل أغمق. اختبر نص العنصر النائب والحالات المعطلة أيضًا، نظرًا لأنها غالبًا ما تكون باهتة جدًا. تذكر أن النسبة لا تأخذ في الاعتبار الخطوط الرفيعة أو النصوص الموجودة على الصور، لذا اترك هامشًا إضافيًا في تلك الحالات.
بالنسبة إلى AA، يحتاج النص العادي إلى 4.5:1 والنص الكبير 3:1. بالنسبة لـ AAA الأكثر صرامة، يحتاج النص العادي إلى 7:1 والنص الكبير 4.5:1. يبلغ حجم النص الكبير حوالي 18 نقطة، أو 14 نقطة غامق.
يستخدم صيغة النصوع النسبي WCAG لكلا اللونين، ثم يقسم النصوع الأفتح (زائد 0.05) على الأغمق (زائد 0.05)، مما يعطي قيمة من 1:1 إلى 21:1.
نعم: اكتب الرموز السداسية مثل #1e293b أو rgb(30, 41, 59)، أو استخدم منتقي الألوان. يتم تحليل كلا التنسيقين على الفور.
نعم، مجاني تمامًا بدون تسجيل، ويعمل بالكامل في متصفحك.
أدخل القيم السداسية للنص والخلفية؛ يحسب المدقق نسبة التباين ويوضح ما إذا كان يجتاز WCAG AA وAAA للنص العادي والكبير.
يؤدي التباين المنخفض إلى صعوبة قراءة النص للأشخاص الذين يعانون من ضعف الرؤية أو عمى الألوان. يؤدي استيفاء نسب WCAG إلى إبقاء المحتوى مقروءًا للجميع وهو متطلب مشترك لإمكانية الوصول وتحسين محركات البحث.
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.