أداة مجانية للمصممين والمطورين
فاحص تباين الألوان ومولد لوحة الألوان
هل النص مقروء على هذه الخلفية؟ افحص نسبة التباين حسب معيار WCAG للنص العادي والكبير، واحصل على أقرب لون يجتاز المعيار، ثم أنشئ درجات ولوحة ألوان متناسقة من لون علامتك.
- نسبة التباين WCAG
- اقتراح لون يجتاز المعيار
- درجات ولوحة ومتغيرات CSS
لوحة الألوان من لون أساسي
اضغط على أي لون لنسخه.
طريقة الاستخدام
ثلاث خطوات فقط
-
اختر لون النص والخلفية
بأداة اختيار اللون أو بكتابة رمز HEX.
-
اقرأ النتيجة
نسبة التباين ونتيجة AA وAAA للنص العادي والكبير، مع معاينة حية بالعربي والإنجليزي.
-
أنشئ لوحتك
درجات فاتحة وغامقة وألوان متناسقة من اللون الأساسي، وانسخها كمتغيرات CSS.
لماذا التباين مهم؟
التباين الضعيف من أكثر أسباب صعوبة القراءة، خاصة على الجوال في ضوء الشمس، ولكبار السن وضعاف البصر. نص رمادي فاتح على خلفية بيضاء قد يبدو أنيقًا في ملف التصميم، لكنه مرهق لكثير من الزوار.
معيار WCAG يحدد حدًا أدنى: 4.5:1 للنص العادي و3:1 للنص الكبير في مستوى AA، و7:1 و4.5:1 في مستوى AAA. الخطوط العربية الرفيعة تحتاج غالبًا تباينًا أعلى من الحد الأدنى لتبقى مريحة للعين.
أسئلة شائعة
كل ما تحتاج معرفته
كيف تُحسب نسبة التباين؟
من «الإضاءة النسبية» للونين حسب معادلة WCAG: (الأفتح + 0.05) ÷ (الأغمق + 0.05). النتيجة من 1:1 (لا تباين) إلى 21:1 (أسود على أبيض).
ما الفرق بين AA وAAA؟
AA هو المستوى المعتمد عادة في المواقع (4.5:1 للنص العادي). AAA أعلى (7:1) ويُستخدم عندما تكون القراءة الطويلة أولوية أو الجمهور يحتاج سهولة أكبر.
ما هو «النص الكبير»؟
حسب WCAG: نحو 24 بكسل فأكثر للنص العادي، أو نحو 18.7 بكسل فأكثر للنص العريض. العناوين غالبًا تدخل في هذه الفئة.
هل يكفي اجتياز المعيار؟
المعيار حد أدنى. اختبر التصميم على الجوال وفي الوضع الداكن، وانتبه للخطوط العربية الرفيعة والأحجام الصغيرة التي تحتاج تباينًا أعلى.