Free AI Tools
تصفح فئات الأدوات

مدقّق تباين ألوان WCAG مجاني: AA وAAA

اختبر ألوان النص والخلفية وفقًا لـ WCAG 2.2 AA وAAA. اعرض نسبة التباين الدقيقة، وعاين حجم الخط ووزنه المحددين، واعرف ما إذا كان الزوج يجتاز الفحص.

تحقّق من زوج ألوان محدد

تستخدم النتائج الإضاءة النسبية وفق WCAG 2.2. يعتمد الاجتياز أو الإخفاق على القيمة الكاملة حتى لو قُرّبت النسبة الكبيرة للعرض.

#RGB أو #RRGGBB معتم. اضغط Enter أو اترك الحقل للتطبيق.

#RGB أو #RRGGBB معتم. اضغط Enter أو اترك الحقل للتطبيق.

سياق المعاينة

نص عادييعني الكبير 24px عاديًا على الأقل أو نحو 18.67px عريضًا.

أزواج أمثلة

معاينة نص مباشرة

يساعد النص المقروء الجميع على إنجاز المهمة بجهد أقل.

نسبة التباين17.46:1الكاملة: 17.457:1
العينة النشطة
يجتاز AA للنص نص عادي

يحتاج إلى 4.5:1 لمعيار AA و7:1 لمعيار AAA عند هذا الحجم والوزن.

فحص WCAGالحد الأدنىالنتيجة
نص عادي AA4.5:1يجتاز
نص كبير AA3:1يجتاز
نص عادي AAA7:1يجتاز
نص كبير AAA4.5:1يجتاز
الواجهة والرسومات AA3:1يجتاز

تجتاز العينة النشطة معيار AA. احتفظ بالحجم والوزن المحددين، ثم كرر الفحص لكل حالة تستخدم زوج ألوان مختلفًا.

ينطبق صف الواجهة والرسومات فقط عندما تمثل هذه الألوان العنصر البصري الضروري ولونه المجاور الفعلي. نتيجة زوج واحد ليست تدقيق وصول شاملًا للموقع.

كيفية فحص تباين الألوان عبر الإنترنت

الخطوة 1

أدخل ألوان النص والخلفية

اختر قيم HEX معتمة أو اكتبها. تعرض القيمة غير الصالحة أو غير المكتملة خطأً بينما يظل آخر لون صالح نشطًا.

الخطوة 2

اضبط حجم نص العينة ووزنه

طابق سياق CSS المقصود لكي تستخدم النتيجة النشطة عتبة WCAG الصحيحة للنص العادي أو الكبير.

الخطوة 3

راجع النتيجة وأصلحها وانسخها

اقرأ النسبة ومصفوفة الاجتياز أو الإخفاق، وجرّب اقتراح AA عند الحاجة، ثم انسخ نتيجة موجزة لتسليمها.

فهم نتائج تباين WCAG AA وAAA

تُقارن نسبة محسوبة واحدة بعتبات WCAG 2.2 مختلفة بحسب حجم النص ووزنه ومستوى المطابقة.

يستخدم النص العادي عتبة AA قدرها 4.5:1

تحتاج نسخ النصوص الأساسية والتسميات والتعليقات التوضيحية وغيرها من النصوص التي تقع دون تعريف النص الكبير إلى 4.5:1 على الأقل لـ AA. تقارن الأداة القيمة الكاملة، لذا لا تحوّل نتيجة معروضة ومقربة إخفاقًا إلى اجتياز.

يمكن للنص الكبير استخدام عتبة AA قدرها 3:1

يُعد النص كبيرًا عند 24px بوزن عادي، أو نحو 18.67px عندما يكون عريضًا. لا يصبح عنصر عنوان أو تسمية بارزة بصريًا نصًا كبيرًا تلقائيًا.

تستخدم AAA عتبتي 7:1 و4.5:1

يتطلب التباين المحسّن 7:1 للنص العادي و4.5:1 للنص الكبير. تعامل مع هذه النتائج على أنها خاصة بالزوج المحدد، لا ادعاءً بأن الصفحة بأكملها تطابق المستوى AAA.

أصلح زوج ألوان لا يجتاز الفحص

ينبغي أن تقود النتيجة غير المجتازة إلى خطوة تالية ملموسة، مع ترك مجال لمراجعة العلامة التجارية ونظام التصميم.

جرّب لون النص المقترح لـ AA

ينقل الاقتراح لون المقدمة باتجاه الأسود أو الأبيض حتى يبلغ هدف AA لعينة النص النشطة. إنه تصحيح عملي، وليس ادعاءً بأنه أقرب لون ممكن للعلامة التجارية من حيث الإدراك البصري.

قارن النص الأسود والأبيض

يساعد اختبار الطرفين البسيطين في كشف الاتجاه الذي يحسن الزوج. استخدم هذا الاتجاه لضبط درجة من ألوان العلامة التجارية بعناية بدلًا من تغيير عدة متغيرات في آن واحد.

أعد فحص كل حالة تفاعلية

يمكن لحالات التمرير والتركيز والتحديد والتعطيل والعنصر النائب والزيارة والخطأ أن تقدم أزواجًا جديدة. كرر الفحص كلما تغيرت ألوان المقدمة أو الحد أو الأيقونة أو السطح.

افحص مكونات واجهة المستخدم والأيقونات وحالات التصميم

للصور المرئية الأساسية غير النصية متطلب منفصل قدره 3:1 مقابل لونها المجاور ذي الصلة، ولا ينبغي أن يحمل اللون المعنى بمفرده.

اختبر الحدود والرسومات الأساسية

استخدم حقلي المقدمة والخلفية لحد حقل الإدخال الفعلي، أو مخطط الزر، أو الأيقونة، أو جزء الرسم البياني، أو مؤشر التركيز، وللسطح الموجود بجانبه مباشرةً.

افحص حالات التركيز والتحديد والخطأ

قد يجتاز مكوّن الفحص في حالة السكون ويفشل بعد التفاعل. اختبر كل حالة مهمة باستخدام الألوان المعروضة فعليًا في تلك الحالة.

لا تستخدم اللون بوصفه الإشارة الوحيدة

أضف نصًا أو أيقونات أو أنماطًا أو أشكالًا أو إشارة مرئية أخرى للحالة والمعنى. لا تجعل النسبة القوية تعليمات تعتمد على اللون وحده مفهومة للجميع.

اعرف ما لا يمكن أن يثبته اختبار تباين الألوان الصلبة

النتيجة حتمية للونين sRGB معتمين محددين، لكن الواجهات الحقيقية لا تزال تتطلب تقييمًا سياقيًا ويدويًا.

تحتاج الصور والتدرجات والشفافية إلى سياق

قد تختلف الخلفية الفعلية عبر العنصر. قيّم التصميم المركب النهائي وافحص المناطق ذات أقل تباين بدلًا من اعتبار زوج صلب واحد ممثلًا.

ما زالت الخطوط الرفيعة والعرض يؤثران في قابلية القراءة

قد تبدو الحواف المضادة للتعرج والمحارف الرفيعة أفتح من لون CSS المحدد. اجتياز الزوج المحسوب ضروري، لكن تظل المراجعة البصرية بالحجم المقصود مهمة.

اجتياز زوج واحد ليس تدقيقًا كاملًا لإمكانية الوصول

التباين أحد المتطلبات الكثيرة. تغطي المراجعة الكاملة أيضًا كل مكوّن وحالة، والبنية، واستخدام لوحة المفاتيح، والتكبير وإعادة التدفق، وسلوك التقنيات المساعدة.

الخصوصية والحدود

يُجرى الحساب في علامة تبويب المتصفح هذه. يدعم هذا المدقّق ألوان sRGB المعتمة بصيغ #RGB و#RRGGBB؛ ولا يفحص التدرجات أو الصور أو الشفافية أو موقعًا إلكترونيًا كاملًا.

الأسئلة الشائعة

هل مدقّق تباين الألوان هذا مجاني للاستخدام؟

نعم. مدقّق تباين الألوان مجاني للاستخدام عبر الإنترنت من دون تسجيل أو تسجيل دخول، ولا تُحجب النتيجة خلف حاجز حساب.

ما نسبة التباين التي تجتاز WCAG AA؟

تتطلب WCAG 2.2 AA نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. وتحتاج المعلومات المرئية الأساسية في مكونات واجهة المستخدم والكائنات الرسومية أيضًا إلى نسبة لا تقل عن 3:1 مقابل اللون المجاور ذي الصلة.

ما نسبة التباين التي تجتاز WCAG AAA؟

تتطلب WCAG 2.2 AAA نسبة لا تقل عن 7:1 للنص العادي و4.5:1 للنص الكبير. ولا تعني نتيجة AAA على مستوى زوج الألوان أن صفحة أو موقعًا إلكترونيًا كاملًا يطابق المستوى AAA.

ما الذي يُعد نصًا كبيرًا في WCAG؟

النص الكبير هو الذي يبلغ 24 بكسل CSS على الأقل بوزن عادي، أو نحو 18.67 بكسل CSS عندما يكون عريضًا. تعامل هذه الأداة الوزن 700 على أنه عريض، وتستخدم الحجم والوزن المحددين لتصنيف المعاينة النشطة.

هل النسبة المعروضة 4.50:1 تجتاز دائمًا AA للنص العادي؟

لا. تُقرّب النسبة المرئية إلى منزلتين عشريتين لتسهيل القراءة، لكن تحديد الاجتياز أو الإخفاق يستخدم القيمة المحسوبة كاملةً. لا تُقرّب قيمة مثل 4.499:1 إلى الأعلى لاجتياز متطلب 4.5:1.

هل يمكن لهذه الأداة اقتراح لون يجتاز الفحص؟

عندما تفشل عينة النص النشطة في AA، يمكن للأداة اقتراح تعديل عملي للمقدمة باتجاه الأسود أو الأبيض يبلغ العتبة النشطة. راجع الاقتراح مقابل علامتك التجارية ونظام التصميم لديك وكل حالة تفاعلية قبل استخدامه.

هل يمكنني فحص الأزرار والأيقونات وحدود النماذج؟

نعم، عندما يمثل اللونان المحددان حد المكوّن أو الأيقونة أو العنصر الرسومي الأساسي ولونه المجاور الفعلي. استخدم صف AA لواجهة المستخدم والرسومات، الذي يتحقق من عتبة 3:1، واختبر كل حالة مميزة على حدة.

هل يمكنني فحص التدرجات أو الصور أو الألوان الشفافة؟

ليس باستخدام مدقّق الألوان الصلبة هذا. فهو يقبل ألوان sRGB HEX المعتمة لأن التدرجات والصور والشفافية قد تنشئ خلفيات فعلية مختلفة عبر العنصر نفسه، ولذلك تحتاج إلى تقييم سياقي.

هل تجعل النتيجة المجتازة موقعي الإلكتروني متوافقًا مع WCAG؟

لا. تغطي هذه النتيجة زوج ألوان واحدًا محددًا. تحتاج مراجعة إمكانية الوصول الكاملة أيضًا إلى فحص كل الحالات والمكونات، واستخدام لوحة المفاتيح، والدلالات، والتكبير وإعادة التدفق، وبنية المحتوى، وسلوك التقنيات المساعدة.

هل ترفع الأداة ألواني أو تحفظها؟

لا تُستخدم أي خدمة خارجية لإجراء الحساب. تبقى ألوانك ونص العينة وإعداداتك في علامة تبويب المتصفح الحالية وتعود إلى القيم الابتدائية عند إعادة تحميل الصفحة.

أدوات ذات صلة

تابع باستخدام أداة أخرى تعمل في المتصفح.

أدوات تصميم مجانية

اختر لونًا وحوّله

منتقي الألوان

اختر لونًا بصريًا أو أدخل قيمة HEX، ثم اضبط RGB وHSL والتعتيم بدقة. عاين النتيجة وقارن الدرجات القريبة وانسخ رمز اللون الدقيق من دون تسجيل دخول.

C أدوات تصميم مجانية

أنشئ تدرج CSS

مولّد تدرجات CSS

أنشئ تدرجات خطية أو شعاعية أو مخروطية بمحطتي ألوان إلى ست محطات. عاين النتيجة مباشرة، واضبط الاتجاه أو نقطة الأصل ذات الصلة، وانسخ CSS جاهزًا للاستخدام دون تسجيل الدخول.

C أدوات تصميم مجانية

أنشئ ظل مربع CSS

مولّد ظل الصندوق CSS

أنشئ ظلال CSS متعددة الطبقات باستخدام ما يصل إلى أربع طبقات قابلة للتعديل. اضبط الإزاحات والتمويه والانتشار واللون والشفافية ووضع inset، وعاين النتيجة، وانسخ CSS من دون تسجيل الدخول.

S أدوات تصميم مجانية

حسّن أيقونة SVG

محسّن SVG

ارفع ترميز SVG أو الصقه، وحسّنه محليًا باستخدام SVGO، وقارن الكود وحجم الملف والنتيجة المرئية قبل التنزيل. لا يلزم تسجيل دخول أو رفع إلى خادم.