فاحص تباين الألوان: نسبة التباين WCAG AA وAAA

Q: هل يصلح الفاحص للنص النائب أو النص المعطّل؟

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

فاحص تباين الألوان

فاحص تباين مجاني وفق WCAG: أدخل لون النص ولون الخلفية لتحصل على نسبة التباين ونتائج AA وAAA وأقرب لون يجتاز الاختبار.

لون النص

لون الخلفية

نسبة التباين

–

نتائج WCAG 2.2

	AA	AAA
النص العادي
النص الكبير
مكوّنات الواجهة والرسومات		–

معاينة

نص عادي (16 px). نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق.

نص كبير (24 px)

نص كبير عريض (18.66 px عريض)

زر

اقتراحات

الهدف

أقرب لون نص ناجح

–

أقرب لون خلفية ناجح

–

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

أدخل لون النص ولون الخلفية. استخدم عيّنات الألوان أو اكتب أي قيمة CSS في الحقلين: رمز HEX مثل #595959، أو rgb(89 89 89)، أو hsl(0 0% 35%)، أو اسمًا مثل navy.
تتحدّث نسبة التباين أثناء الكتابة، من 1:1 (لا تباين) إلى 21:1 (الأسود على الأبيض).
يعرض جدول نتائج WCAG 2.2 كلمة ناجح أو راسب لكل من النص العادي والنص الكبير ومكوّنات الواجهة والرسومات، في المستويين AA وAAA.
تحقّق من المعاينة: فهي تعرض نصًا عاديًا ونصًا كبيرًا ونصًا كبيرًا عريضًا وإطار زر وأيقونة باللونين اللذين اخترتهما.
إذا رسب أحد المستويات، اختر الهدف في قسم اقتراحات. تقترح الأداة أقرب لون نص ناجح وأقرب لون خلفية ناجح، فاضغط استخدام لتطبيق أحدهما. أما تبديل الألوان فيبادل بين لون النص ولون الخلفية.

كل شيء يُحسب داخل متصفحك، ولا يُرسل أي شيء إلى أي مكان.

كيف تُحسب نسبة التباين؟

تعرّف WCAG 2.x النسبة بأنها (L1 + 0.05) / (L2 + 0.05)، حيث L1 هي الإضاءة النسبية للون الأفتح وL2 إضاءة اللون الأغمق. وتُحسب الإضاءة النسبية من قنوات sRGB بعد تحويلها إلى قيم خطية: يُفكّ ترميز كل قناة بمنحنى النقل الخاص بـ sRGB، ثم L = 0.2126 R + 0.7152 G + 0.0722 B. وللأخضر الوزن الأكبر لأن أعيننا أكثر حساسية له، ولهذا يبدو الأخضر الصافي أسطع بكثير من الأزرق الصافي بالقوة نفسها.

لا تُقرَّب النسبة إلى الأعلى أبدًا. فاللون #777777 على الأبيض يعطي نحو 4.48:1 ويرسب في المستوى AA للنص العادي، مع أنه يبدو كأنه «4.5». تقتطع هذه الأداة القيمة المعروضة عند منزلتين عشريتين، فما تراه هو بالضبط ما تفحصه WCAG.

إذا كان لون النص شبه شفاف (مثل rgb(0 0 0 / 60%))، فإنه يُمزج أولًا فوق الخلفية كما سيرسمه المتصفح. أما شفافية لون الخلفية فتُتجاهل، لأن ما يقع خلف الصفحة غير معروف.

مستويات WCAG باختصار

المحتوى	AA	AAA
النص العادي	4.5:1	7:1
النص الكبير (24 px، أو 18.66 px عريض)	3:1	4.5:1
مكوّنات الواجهة والرسومات ذات المعنى	3:1	–

يُقصد بـ«النص الكبير» ما لا يقل عن 18 pt (أي 24 بكسل CSS)، أو 14 pt بخط عريض (نحو 18.66 px). ولا تخضع الشعارات والنصوص الزخرفية البحتة لأي شرط. وتنطبق قاعدة 3:1 لمكوّنات الواجهة (معيار النجاح 1.4.11) على حدود حقول الإدخال والأزرار، ومؤشرات التركيز، والأيقونات، وخطوط الرسوم البيانية التي يحتاج المستخدمون إلى رؤيتها.

كيف تعمل الاقتراحات؟

تحافظ الألوان المقترحة على درجة لونك وصفائه اللوني في فضاء OKLCH، ولا تغيّر إلا إضاءته، تغميقًا أو تفتيحًا، حتى تبلغ النسبة المستهدفة. ثم تختار الأداة الاتجاه الأقرب بصريًا إلى لونك الأصلي، مقيسًا في فضاء OKLab. وتُفحص النتيجة مرة أخرى بعد تقريبها إلى رمز HEX، لتتأكد من أنها تنجح فعلًا. وإذا لم تكن هناك أي إضاءة تبلغ الهدف (7:1 مقابل رمادي متوسط مثلًا)، تخبرك الأداة بذلك.

عن APCA

خوارزمية APCA (Accessible Perceptual Contrast Algorithm) نموذج تباين أحدث يُدرس اعتماده في WCAG 3 مستقبلًا، وهي تراعي وزن الخط وحجمه والقطبية (داكن على فاتح أو فاتح على داكن). لكنها لا تزال مسودة وليست شرطًا قانونيًا أو معياريًا، ولذلك تعرض هذه الأداة نتائج WCAG 2.x التي تبقى المرجع للمعيار الأوروبي لإمكانية الوصول EN 301 549، وللمادة Section 508، ولمعظم القوانين.

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

ما نسبة التباين اللازمة للنص الأساسي؟

4.5:1 على الأقل للمستوى AA، وهو المستوى الذي تشترطه معظم القوانين والسياسات. واستهدف 7:1 (AAA) للقراءة الطويلة أو لجمهور يعاني ضعف البصر.

هل ينجح النص الأبيض على لون علامتي التجارية؟

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

لماذا لا يغيّر ترتيب اللونين النسبة؟

تقسم المعادلة دائمًا الإضاءة الأفتح على الأغمق، فيعطي الداكن على الفاتح والفاتح على الداكن النسبة نفسها. ومع ذلك قد يختلف التباين المُدرَك قليلًا، وهذه إحدى المشكلات التي تحاول APCA معالجتها.

هل 4.49:1 قريبة بما يكفي للنجاح؟

لا. حدود WCAG حدود دنيا صارمة: فالنسبة 4.49:1 ترسب في AA للنص العادي. استخدم الاقتراح للحصول على لون ينجح فعلًا.

هل يصلح الفاحص للنص النائب أو النص المعطّل؟

يجب أن يستوفي النص النائب (placeholder) الحد الأدنى نفسه 4.5:1 عندما ينقل معلومة. أما عناصر التحكم المعطّلة فمستثناة من شروط التباين، لكن جعل حالاتها المعطّلة مقروءة يساعد المستخدمين مع ذلك.