فاحص التباين
افحص النص مقابل خلفيته لتباين WCAG، واحصل على أقرب درجة تنجح حين لا ينجح.
تتم المعالجة على جهازك — بلا رفع
نصّ عنوان كبير
نصّ متن بالمقاس الذي تُضبط عليه معظم الصفحة. وهذه هي العيّنة التي يجب أن تبلغ 4.5 إلى واحد، لأنها التي يقرؤها الناس دقائق متّصلة.
الطباعة الصغيرة والتعليقات والتسميات.
تنجح في AA لنصّ المتن بأي مقاس. وAAA تحتاج 7:1، وهي تستحق البلوغ للقراءة الطويلة.
- AA — نصّ المتنتحتاج 4.5:1
- AAA — نصّ المتنتحتاج 7:1
- AA — نصّ كبيرتحتاج 3:1
- AAA — نصّ كبيرتحتاج 4.5:1
- الحدود والأيقونات وحلقات التركيزتحتاج 3:1
أقرب درجة تنجح
تُحسب النسبة من الإضاءة النسبية في WCAG، وهي تخطّي كل قناة قبل وزنها. أما متوسّط السطوع البسيط — وهو ما يفعله الفحص السريع عادةً — فيخطئ في الأزرق المشبَع خطأً فادحًا، والأزرق على أسود هو بالضبط حيث تخفق المقروئية أولًا.
كيف تفحص تباين لونين
- أدخل لونَي النص والخلفية.
- اقرأ النسبة وما الذي تنجح فيه.
- خذ الدرجة المقترحة إن أخفقت.
كيف يعمل
تقارن النسبة الإضاءة النسبية للونين: (lighter + 0.05) / (darker + 0.05). وهي تجري من 1:1، أي لونين متطابقين، إلى 21:1، أي أسود صافٍ على أبيض صافٍ. ويضع WCAG 4.5:1 حدًّا أدنى لنصّ المتن و7:1 للمستوى الأصرم AAA.
والإضاءة ليست السطوع. فتُخطَّى كل قناة قبل أن تُوزَن، ويُحسب الأخضر أكثر بكثير من الأزرق — 0.7152 مقابل 0.0722. ولهذا يكون الأزرق المشبَع الساطع على أسود أصعب قراءةً بكثير ممّا توحي قيمته الستّ عشرية، ولهذا يعطي تقديره بالعين، أو متوسّط قيم RGB، الجواب الخاطئ بالضبط للألوان التي يخطئ الناس فيها.
و«النص الكبير» له معنى محدّد. 18 نقطة، أو 14 نقطة عريضة — أي نحو 24 بكسل و18.5 بكسل. وعندها فقط ينطبق حدّ 3:1. وهو لا يشمل عنوانًا بحجم 16 بكسل بوزن شبه عريض، وهو ما يُستعمل له.
والاقتراح يُبقي صبغتك وإشباعك ويحرّك الإضاءة بعيدًا عن الخلفية خطوةً خطوة حتى تتجاوز النسبة الحدّ. والنتيجة هي اللون نفسه بصورة يُعرَف بها لا رماديًّا داكنًا عامًّا، وذلك هو الفرق بين إصلاح يقبله المصمّم وآخر يتراجع عنه.
مثال عملي
تفتح الصفحة على #767676 على أبيض — 4.54:1. وذلك أنفع رقم بمفرده في التصميم الميسَّر: فهو أفتح رمادي ينجح في AA على الأبيض، وكل ما هو أفتح يخفق. أما #999 الذي يُضبط عليه نصّ العنصر النائب والتعليقات كثيرًا فيبلغ 2.85:1 ويخفق تمامًا.
جرّب الحالة التي توقع الجميع. اضبط النص على #0000ff والخلفية على #000000. الأزرق الصافي على أسود هو 2.44:1 — إخفاق — بينما الأصفر الصافي على أسود هو 19.56:1. وكلاهما «لون ساطع على أسود». لكن العين لا تزنهما بالطريقة نفسها ولا المعادلة كذلك.
ولماذا يهمّ هذا وراء الامتثال. فالتباين المنخفض ليس مشكلة لذوي ضعف البصر وحدهم. بل هو مشكلة لكل من على هاتف في شمس، أو على شاشة رخيصة، أو على شاشة بزاوية، أو ببساطة فوق الأربعين. والتباين هو إصلاح إمكانية الوصول الأوسع أثرًا والأقلّ كلفة.
والحدّ الذي يُنسى. يشترط WCAG 1.4.11 نسبة 3:1 لما ليس نصًّا: حدود حقول النماذج، والأيقونات، وحلقات التركيز، وخطوط الرسوم البيانية. فالنموذج الذي حدود مدخلاته رمادي باهت يخفق حتى لو نجحت كل كلمة في الصفحة، وهو مفحوص هنا في سطره الخاصّ.
ولبناء سلّم كامل بالتباين في الحسبان لا لإصلاح زوج واحد، مولّد اللوحات يبلّغ عن أي درجات السلّم آمنة للنص، ويحاكي قصور رؤية الألوان.
أسئلة
هل هذا اشتراط في إمكانية الوصول؟
نعم. يطلب WCAG نسبة 4.5:1 على نصّ المتن، وتشير تشريعات معظم البلدان إليه. وما دون ذلك يكفّ النص عن كونه مقروءًا لعدد قابل للقياس من القرّاء.
أي نسبة أحتاج فعلًا؟
4.5:1 لنصّ المتن لبلوغ AA، و3:1 للنص بحجم 18 نقطة أو 14 نقطة عريضة فأكثر، و3:1 للحدود والأيقونات وحلقات التركيز. وAAA يطلب 7:1 على نصّ المتن.
هل AA كافٍ؟
هو المستوى الذي تشير إليه كل التشريعات تقريبًا، فهو الاشتراط العملي. وAAA يستحق السعي إليه في القراءة الطويلة، لكنه يقيّد لوحتك تقييدًا شديدًا.
ما الذي يُحسب نصًّا كبيرًا؟
18 نقطة، أو 14 نقطة عريضة — أي نحو 24 بكسل و18.5 بكسل. والعنوان بحجم 16 بكسل شبه العريض لا يتأهّل، وهو الخطأ الذي يخفيه هذا الاستثناء عادةً.
لماذا يخفق الأزرق وهو يبدو ساطعًا؟
لأن الرؤية البشرية أشدّ حسّاسية للأخضر منها للأزرق بكثير، والمعادلة تزنهما تبعًا لذلك. فالأزرق الصافي يسهم بإضاءة ضئيلة جدًّا مهما بدا زاهيًا.
هل يُبقي اللون المقترح هويّتي؟
يُبقي صبغتك وإشباعك بالضبط ولا يحرّك إلا الإضاءة، فهو اللون نفسه أدكن أو أفتح. ولن يكون مقبولًا دائمًا، لكنه أصغر تغيير ممكن.
هل ينطبق التباين على الضوابط المعطَّلة؟
لا — يستثني WCAG العناصر المعطَّلة. وذلك استثناء امتثال لا استثناء قابلية استعمال، والزرّ المعطَّل الذي لا يستطيع أحد قراءته يبقى مشكلة.
وماذا عن النص فوق صورة؟
افحص أفتح نقطة وأدكنها يعبرهما النص. فإن أخفقت إحداهما، احتاج النص حجابًا أو خلفية صلبة أو ظلًّا خلفه.
هل يتعامل مع الشفافية؟
أدخل اللون كما يُعرض. فالمقدّمة شبه الشفّافة يجب تركيبها على خلفيتها الفعلية أولًا، لأن ذلك ما تستقبله العين.
هل فاحص التباين مجاني على الإنترنت؟
نعم — مجاني، بلا حساب، وبلا حد يومي، وبلا علامة مائية. يعمل في متصفّحك عبر الإنترنت، ولأن المعالجة تجري على جهازك فإنه يستمر في العمل دون اتصال بعد تحميل الصفحة.
أدوات Web ذات صلة
مولّد لوحات الألوان
ابنِ لوحة من لون واحد — متمّمة وثلاثية ومتجاورة — مع سلّم 50–900 الذي يحتاجه نظام تصميم.
افتح$termiva gradient --linearمولّد التدرّجات
ابنِ تدرّج CSS بما تشاء من محطّات وانسخ القاعدة، وأنت ترى النتيجة وأنت تغيّرها.
افتح$termiva shadow --layers 2مولّد ظلّ الصندوق
كدّس عدة ظلال في قاعدة CSS واحدة وراقب العمق يُبنى، بدل تخمين الأرقام.
افتح$termiva radius --cornersمولّد نصف قطر الحدود
اضبط كل زاوية على حدة، بما في ذلك الصورة الإهليلجية التي تُسقطها معظم المولّدات.
افتح