فاحص تباين الألوان
تأكّد من أن نصك سهل القراءة للجميع، واحصل على حل حين لا يكون كذلك.
محفوظ على هذا الجهاز
يعمل داخل متصفحك. لا يُرفع أي شيء.
محفوظ
الألوان
- نسبة التباين
- النص العادي
- AA · 4.5:1
- AAA · 7:1
- النص الكبير
- AA · 3:1
- AAA · 4.5:1
- عناصر الواجهة والأيقونات
- AA · 3:1
- تباين APCA (للاطلاع)
APCA طريقة أحدث قيد الدراسة لإرشادات إمكانية الوصول المستقبلية. ويبقى WCAG 2.2 المرجع المعتمد حاليًا.
المعاينة
هكذا يُقرأ النص الكبير
يجب أن يبقى النص العادي سهل القراءة للجميع، بمن فيهم ضعاف البصر، وعلى الهاتف تحت أشعة الشمس الساطعة أو على شاشة قديمة.
الخط الصغير والتعليقات التوضيحية تحتاج إلى أعلى تباين.
حلول مقترحة
طريقة الاستخدام
-
أدخل لونيك
اكتب أو اختر لون النص ولون الخلفية. تعمل أي صيغة: HEX أو RGB أو HSL أو اسم لون في CSS.
-
اقرأ النتيجة
اطّلع على نسبة التباين وما إذا كانت تنجح في مستويي AA وAAA من WCAG 2.2 للنص العادي والنص الكبير وعناصر الواجهة.
-
طبّق حلًا عند الحاجة
إذا فشل أحد المستويات، فاستخدم أحد الألوان المقترحة: إنه أقرب لون بالصبغة نفسها ينجح في الاختبار.
الأسئلة الشائعة
ما نسبة التباين التي أحتاجها؟
يشترط المستوى AA من WCAG 2.2 نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. ويشترط المستوى AAA نسبة 7:1 و4.5:1. وتحتاج الأيقونات وحدود حقول الإدخال وعناصر الواجهة الأخرى إلى 3:1 على الأقل مقارنة بما يجاورها.
ما الذي يُعدّ نصًا كبيرًا؟
النص الذي لا يقل عن 18 نقطة (24 بكسل CSS)، أو 14 نقطة على الأقل (نحو 18.7 بكسل CSS) إذا كان عريضًا. وكل ما هو أصغر يُعدّ نصًا عاديًا.
لماذا تفشل نسبة 4.49:1 مع أنها قريبة جدًا من 4.5:1؟
حدود WCAG حدود دنيا صارمة، ولا يجوز تقريب النسبة إلى الأعلى. لذلك يعرض هذا الفاحص النسبة مقرّبة إلى الأدنى: فالقيمة التي تبدو ناجحة ناجحة فعلًا.
ما هو APCA؟
APCA (Accessible Perceptual Contrast Algorithm) طريقة أحدث لقياس التباين تأخذ في الحسبان ما إذا كان النص داكنًا على فاتح أو فاتحًا على داكن. وهي قيد الدراسة لإصدار مستقبلي من الإرشادات. تُعرض هنا للاطلاع فقط: فالمتطلبات القانونية ومتطلبات التدقيق اليوم تستند إلى نسبة WCAG 2.
كيف تُختار الألوان المقترحة؟
يحافظ الفاحص على صبغة لونك وتشبّعه ولا يغيّر سوى إضاءته، في فضاء الألوان الإدراكي OKLCH، حتى يجد أقرب قيمة تبلغ المستوى المطلوب. فيبقى لونك شبيهًا بنفسه، لكنه أفتح أو أغمق قليلًا.
هل يعمل مع الألوان الشفافة؟
نعم بالنسبة إلى لون النص: يُمزج لون النص شبه الشفاف مع الخلفية أولًا، لأن هذا هو اللون الذي يراه الناس فعلًا. أما الخلفية فتُعامَل على أنها مصمتة.