فهم معايير تباين الألوان WCAG 2.1 / 2.2
تعد أداة "فاحص التباين" وسيلة تتيح لك إدخال لون النص ولون الخلفية لتحديد نسبة التباين بينهما وفقًا لمعايير WCAG 2.1 / 2.2. تساعدك هذه الأداة في معرفة مستويات إمكانية الوصول (AA و AAA) التي تجتازها تركيبة الألوان المحددة لكل من النص العادي، والنص الكبير، ومكونات واجهة المستخدم.
تستخدم الأداة صيغة WCAG 2.1 / 2.2، وهي الصيغة المعتمدة حاليًا في قواعد الوصول وعمليات التدقيق. وتتراوح نسبة التباين الناتجة من 1:1 (والتي تعني عدم وجود تباين على الإطلاق) إلى 21:1 (وهي أعلى نسبة تباين وتتمثل في اللون الأسود على الخلفية البيضاء). عند تشغيل الأداة لأول مرة، تكون الألوان الافتراضية المحددة هي #4f46e5 لـ "لون النص" و #ffffff لـ "لون الخلفية"، مما ينتج عنه نسبة تباين تبلغ 6.29.
مدخلات الأداة وتنسيقات الألوان المدعومة
تتطلب الأداة تحديد قيمتين أساسيتين للقيام بعملية الفحص:
- لون النص: قيمة اللون المراد فحص تباينه.
- لون الخلفية: قيمة لون الأرضية التي يظهر عليها النص.
تقبل الأداة إدخال الألوان بتنسيقات مختلفة تشمل:
- قيم Hex (مثل
#1a1a1a). - قيم
rgb()(مثلrgb(26, 26, 26)). - قيم
hsl().
كما تشتمل الأداة على زر التبديل الذي يتيح لك عكس لوني النص والخلفية بسهولة. وفي حال إدخال قيم غير مدعومة، ستظهر لك رسائل الخطأ التالية:
- إذا كان لون النص غير صحيح، تظهر رسالة: "أدخل لون نص صالحًا، مثل #1a1a1a أو rgb(26, 26, 26).".
- إذا كان لون الخلفية غير صحيح، تظهر رسالة: "أدخل لون خلفية صالحًا، مثل #ffffff أو rgb(255, 255, 255).".
مخرجات الفحص وتفسير النتائج
عند إدخال الألوان، تقوم الأداة بحساب وعرض النتائج التالية بشكل فوري:
- نسبة التباين: تُعرض النسبة المحسوبة بين لون النص ولون الخلفية على شكل "X:1".
- نص عادي: توضح الأداة حالة التوافق بعبارة "مستوفٍ" أو "غير مستوفٍ" لكل من المستويين AA و AAA.
- نص كبير: توضح الأداة حالة التوافق بعبارة "مستوفٍ" أو "غير مستوفٍ" للمستويين AA و AAA.
- واجهة المستخدم والرسومات: يتم فحص هذا القسم مقابل حد أدنى واحد ثابت هو 3:1، وتظهر النتيجة كحالة واحدة فقط (دون تقسيم إلى مستويات AA و AAA).
- الخلاصة (النتيجة النهائية): رسالة تلخص أعلى مستوى تم اجتيازه، وتأخذ أحد الأشكال التالية بناءً على الألوان المستخدمة:
- "يستوفي AA وAAA للنص العادي."
- "يستوفي AA للنص العادي."
- "يستوفي AA للنص الكبير فقط."
- "أقل من الحد الأدنى لمستوى AA — ارفع التباين."
قواعد ومستويات إمكانية الوصول (AA مقابل AAA)
تختلف متطلبات التباين بناءً على حجم النص ومستوى الامتثال المطلوب:
- النص العادي: يتطلب تحقيق المستوى AA نسبة تباين لا تقل عن 4.5:1، بينما يتطلب تحقيق المستوى AAA الأكثر صرامة نسبة تباين لا تقل عن 7:1.
- النص الكبير: يتطلب تحقيق المستوى AA نسبة تباين لا تقل عن 3:1، بينما يتطلب تحقيق المستوى AAA نسبة تباين لا تقل عن 4.5:1.
- مكونات واجهة المستخدم والرسومات: تتطلب نسبة تباين لا تقل عن 3:1 كحد أدنى وحيد، ولا يوجد تمييز بين مستويات AA و AAA في هذا القسم.
ويُعرّف "النص الكبير" في معايير إمكانية الوصول بأنه النص الذي يبدأ حجمه من 18 نقطة (حوالي 24px) فما فوق، أو من 14 نقطة (حوالي 18.5px) فما فوق عندما يكون الخط غامقًا.
الفئات المستفيدة من فاحص التباين
تعد هذه الأداة ضرورية للعديد من المتخصصين لضمان جودة المنتجات الرقمية:
- المصممون: للتحقق من سهولة قراءة النصوص والعناصر المرئية المختلفة أثناء مرحلة التصميم.
- المطورون: لضمان تلبية الأكواد والواجهات البرمجية لمعايير إمكانية الوصول المطلوبة.
- فرق المحتوى: للتحقق من تباين الألوان في المواد والنصوص المنشورة لضمان وضوحها لجميع المستخدمين.
الخصوصية ومعالجة البيانات
عند استخدامك لهذه الأداة، يمكنك الاطمئنان تمامًا بشأن بياناتك؛ حيث يتم تشغيل كل فحص محليًا داخل متصفحك الخاص، ولا يتم تحميل أي قيم أو ألوان تدخلها إلى خوادم BroBroGo.
الأسئلة الشائعة
ماذا تعني النتائج AA و AAA؟
AA هو المستوى الذي تهدف إليه معظم المواقع: فهو يحتاج إلى نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. AAA أكثر صرامة — 7:1 للنص العادي و4.5:1 للنص الكبير. تتراوح النسبة من 1:1 (بدون تباين) إلى 21:1 (أسود على أبيض).
ما الذي يعتبر نصًا كبيرًا؟
نص بحجم 18 نقطة (حوالي 24px)، أو 14 نقطة (حوالي 18.5px) عندما يكون غامقًا. يظل النص الأكبر حجمًا واضحًا عند التباين الأقل، لذا فهو مستوفٍ AA عند 3:1 وAAA عند 4.5:1 بدلاً من حدود النص العادي الأكثر صرامة.
ما هي تنسيقات الألوان التي يمكنني إدخالها؟
اكتب قيمة hex مثل #1a1a1a، أو قيمة rgb() مثل rgb(26, 26, 26)، أو قيمة hsl() — أو انقر على أي من عينتي اللون لاختيار لون. استخدم زر التبديل لعكس لوني النص والخلفية.
هل هذه WCAG 2 أم الطريقة APCA الأحدث؟
تستخدم الأداة صيغة WCAG 2.1 و2.2، وهي الصيغة المعتمدة حاليًا في قواعد الوصول وعمليات التدقيق. أما APCA فهي طريقة أحدث تراعي الإدراك البصري بدرجة أكبر، ولا تزال قيد الإعداد ضمن WCAG 3. وهي واعدة، لكنها ليست معيار امتثال بعد، لذلك لا تعتمد نتائج الاستيفاء هنا عليها.