كيفية فحص تباين النصوص لإتاحة الوصول مجانًا عبر الإنترنت (دليل 2026)

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

ما الذي يفعله فاحص التباين المجاني؟

يأخذ فاحص التباين لونين — لون نصك ولون خلفيتك — ويحسب نسبة التباين بينهما، ثم يخبرك ما إذا كان الزوج يجتاز معايير إتاحة WCAG. ويعمل بالكامل في متصفحك: دون تسجيل ودون تثبيت ونتائج فورية.

قواعد تباين WCAG (الأرقام الفعلية)

تعرّف إرشادات إتاحة محتوى الويب (WCAG) متطلبات التباين كنسب، حيث تعني 1:1 عدم وجود تباين (ألوان متماثلة) و21:1 هي الحد الأقصى (أسود على أبيض). والعتبات المهمة:

• 4.5:1 — نص عادي (WCAG AA). يجب أن تصل نصوص الجسم والفقرات وعناصر القوائم وتسميات الواجهة إلى 4.5:1 على الأقل مقابل خلفياتها. وهذا هو الأساس للنصوص الميسّرة.
• 3:1 — نص كبير (WCAG AA). فالنص الذي لا يقل عن 18pt (24px)، أو 14pt (18.66px) عريض، يحتاج إلى 3:1 فقط — فأشكال الحروف الأكبر أسهل قراءة بطبيعتها.
• 7:1 — نص عادي (WCAG AAA). المستوى المحسّن الأشد. استهدفه للمحتوى الحرج عندما تستطيع.
• 3:1 — مكونات الواجهة. تحتاج الأيقونات وحدود النماذج ومؤشرات التركيز إلى 3:1 على الأقل مقابل الألوان المجاورة ليدرك المستخدمون العناصر التفاعلية.

لاحظ ما لا تغطيه هذه القواعد: فهي تقيس تباين الإضاءة (فاتح مقابل داكن) لا اختلاف اللون. فقد يكون النص الأحمر على خلفية خضراء عالي التباين بالأرقام ومع ذلك غير مقروء لمستخدمي عمى الألوان الأحمر/الأخضر — ولهذا يجب ألا تعتمد أبدًا على اللون وحده لإيصال المعنى.

خطوة بخطوة: اختبر زوج ألوانك

1. افتح فاحص التباين. دون تسجيل، ويعمل في أي متصفح حديث.
2. أدخل لون نصك (المقدمة). استخدم رمز HEX أو RGB للون النص الفعلي من تصميمك.
3. أدخل لون خلفيتك. استخدم الخلفية الحقيقية التي يجلس عليها النص — لا خلفية الصفحة الواقعة ثلاث طبقات أعمق، بل المباشرة خلف النص.
4. اقرأ النسبة والحكم. تعرض الأداة نسبة التباين المحسوبة وما إذا كان الزوج يجتاز AA للنص العادي وAA للنص الكبير وAAA.
5. اختبر كل تركيبة حقيقية. نص الجسم على خلفية الصفحة، ونص الزر على لون الزر، ولون الرابط على الخلفية، ونص العنصر النائب في الحقول — فكل زوج يحتاج إلى فحصه الخاص.
6. أصلح حالات الفشل (انظر أدناه) وأعد الاختبار حتى يجتاز الزوج.

كيفية إصلاح تركيبة فاشلة

الزوج الفاشل لا يعني التخلي عن لوحتك. فالتعديلات الصغيرة المستهدفة عادةً ما تصلحه:

• غمّق النص أو فتّح الخلفية. الإصلاح الأكثر موثوقية. فالتحرك خطوة أغمق/أفتح غالبًا ما يعبر خط 4.5:1 دون تغيير طابع التصميم. استخدم منتقي الألوان لإيجاد الدرجة المعدّلة.
• زد وزن الخط أو حجمه. فالنص العريض أو العناوين الأكبر مؤهلة لعتبة النص الكبير الأسهل 3:1. وهذه استراتيجية شرعية لا ثغرة — فالنص الأكبر والأعرض أكثر قابلية للقراءة حقًا.
• أضف شكلًا داعمًا. نص أبيض يفشل فوق صورة؟ ضعه على تراكب داكن شبه شفاف أولًا، ثم افحص النص مقابل لون التراكب.
• بدّل أي لون هو النص. فأحيانًا يعمل الزوج بالعكس — نص داكن على لون العلامة التجارية الفاتح بدلًا من نص فاتح عليه.
• احتفظ بالأزواج منخفضة التباين للزخرفة فقط. فالعناوين الزخرفية الكبيرة والحالات المعطّلة والعلامات المائية يمكن أن تستخدم تركيبات أنعم — طالما لا تعتمد معلومات أساسية على قراءتها.

المشتبه بهم المعتادون: تركيبات تفشل دائمًا تقريبًا

• نص رمادي فاتح (#999 وأفتح) على أبيض — المخالف الكلاسيكي، خاصة في النصوص الثانوية والعناصر النائبة.
• نص أبيض على ألوان باستيل — فأزرار الوردي الفاتح والأزرق السماوي والنعناعي بتسميات بيضاء تنخفض بشكل روتيني دون 4.5:1.
• نص بلون العلامة التجارية على خلفيات بلون العلامة التجارية — فغالبًا ما يفتقر لونا علامة تجارية مصممان للجلوس جنبًا إلى جنب إلى فجوة الإضاءة التي يحتاجها النص.
• نص فوق صور — فسطوع الصورة يتفاوت عبر مساحتها، لذا ينجح النص فوق الجزء الداكن ويفشل فوق الجزء الساطع. فالتراكبات أو ظلال النصوص هي الإصلاح القياسي.
• نص العنصر النائب في حقول النماذج — تعرض المتصفحات العناصر النائبة برمادي باهت افتراضيًا؛ صمّمها إلى لون يجتاز عمدًا.

التباين ضروري لكنه غير كافٍ

اجتياز فحص النسبة هو الأرضية لا السقف. فالإتاحة الحقيقية تعني أيضًا: أحجام خطوط كافية، وتباعد أسطر لا يكدّس الأسطر معًا، وعدم إيصال المعلومات باللون وحده أبدًا (أقرن حالة الأحمر/الأخضر بأيقونة أو تسمية)، ومؤشرات تركيز مرئية لمستخدمي لوحة المفاتيح، واختبار تصميمك بتدرج الرمادي لاكتشاف المعنى المعتمد على اللون. ويتعامل فاحص التباين مع الجزء القابل للقياس في ثوانٍ؛ والباقي انضباط تصميم.

أدمج فحص التباين في سير عملك

1. اختر ألوان العلامة التجارية باستخدام منتقي الألوان أو ولّد أفكارًا باستخدام أداة لوحة الألوان العشوائية.
2. قبل إنهاء أي زوج نص/خلفية، مرّره عبر فاحص التباين.
3. إذا فشل زوج، فاضبطه بالمنتقي وأعد الفحص — دقيقتان لكل زوج.
4. حوّل الصيغ حسب الحاجة باستخدام محول HEX إلى RGB (مثلًا لبناء تراكبات RGBA).
5. أعد الفحص بعد أي إعادة تصميم — فتعديل لون "صغير" يمكن أن يكسر نسبة ناجحة بصمت.

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

هل فاحص التباين مجاني؟

نعم — فحوصات تباين WCAG غير محدودة ودون تسجيل.

أي نسبة تباين يحتاجها نص جسمي؟

4.5:1 على الأقل مقابل خلفيته لـ WCAG AA، الأساس المعتمد على نطاق واسع. و7:1 يستوفي المستوى الأشد AAA.

هل للعناوين متطلبات مختلفة؟

النص الكبير — 18pt/24px فأعلى، أو 14pt/18.66px عريض فأعلى — يحتاج إلى 3:1 فقط عند مستوى AA.

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

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

هل يأخذ الفاحص عمى الألوان في الاعتبار؟

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

تحقق من ألوانك الآن: فاحص تباين مجاني · منتقي ألوان مجاني · محول HEX إلى RGB مجاني