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

افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.

جارٍ تحميل الأداة…

أداة فحص تباين الألوان — أدخل لونًا أماميًا (للنص) ولون خلفية بصيغة HEX (بما في ذلك 8 خانات مع ألفا) أو rgb() أو hsl()، وتدمج هذه الأداة أي لون أمامي شبه شفاف فوق الخلفية، ثم تحسب نسبة تباين WCAG 2.1 الدقيقة ودرجة APCA (WCAG 3) Lc. تعرض مباشرةً شارات نجاح/إخفاق AA / AAA للنص العادي والكبير، وشارة 3:1 لمكوّنات الواجهة والرسومات، وتبديل الأمامي مع الخلفية، واقتراح أقرب لون ناجح بنقرة واحدة. كل شيء يجري محليًا في متصفحك، لذا لا يتم رفع أي ألوان إلى خادم.

ما هي أداة فحص تباين الألوان؟

أداة فحص تباين الألوان أداة مجانية على الإنترنت لتباين WCAG وAPCA، مخصّصة للمصممين والمطورين ومختبري إمكانية الوصول. تقبل الألوان بصيغة HEX (#rgb و#rrggbb و#rrggbbaa بثماني خانات مع ألفا) وrgb()/rgba() وhsl()/hsla()، وتدمج لونًا أماميًا شفافًا فوق الخلفية قبل القياس، وتعرض كلًّا من نسبة WCAG 2.1 (من 1:1 إلى 21:1) ودرجة تباين اللمعان APCA Lc. تحدّد مستوى WCAG 2.1 AA (4.5:1 للعادي، 3:1 للكبير) وAAA (7:1 للعادي، 4.5:1 للكبير)، وتضيف شارة 3:1 لمكوّنات الواجهة والرسومات غير النصية، ويمكنها اقتراح أقرب لون أمامي ناجح — تعديل لمعانه فقط حتى يستوفي AA أو AAA — تطبّقه بنقرة واحدة.

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

  1. أدخل اللون الأمامي (للنص) بصيغة HEX أو rgb() أو hsl() — يُقبل HEX بثماني خانات أو rgba مع ألفا — أو انقر منتقي الألوان للاختيار بصريًا.
  2. أدخل لون الخلفية بالطريقة نفسها؛ يُدمج اللون الأمامي شبه الشفاف فوقه (وتُدمج الخلفية فوق الأبيض) قبل قياس التباين.
  3. استخدم زر التبديل لعكس الأمامي والخلفية في أي وقت.
  4. اقرأ نسبة تباين WCAG 2.1 ودرجة APCA Lc المعروضة بجوارها مباشرة.
  5. تحقق من شارتي AA وAAA للنص العادي والكبير، إضافةً إلى شارة 3:1 لمكوّنات الواجهة والرسومات.
  6. إذا أخفق زوج، انظر إلى أقرب لون AA أو AAA ناجح وانقر تطبيق لتحديث اللون الأمامي.

أمثلة

نص رمادي داكن على أبيض

المدخل

الأمامي #595959، الخلفية #ffffff

المخرج

النسبة 7.00:1 مع APCA Lc مرتفع — تجتاز AA وAAA للنص العادي والكبير

لون أمامي شبه شفاف

المدخل

الأمامي #00000080 (أسود بنسبة 50%) فوق #ffffff

المخرج

يُدمج أولًا إلى رمادي صلب، ثم تُحسب نسبة WCAG وAPCA Lc

إصلاح لون فاشل

المدخل

الأمامي #999999 على #ffffff — 2.85:1، يخفق في AA

المخرج

افتح أقرب لون AA وانقر تطبيق للوصول إلى 4.5:1 مع الحفاظ على الدرجة اللونية نفسها

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

ما نسب التباين التي يتطلبها WCAG؟
يتطلب مستوى AA من WCAG 2.1 ما لا يقل عن 4.5:1 للنص العادي و3:1 للكبير؛ ويتطلب المستوى AAA 7:1 و4.5:1. أما مكوّنات الواجهة والكائنات الرسومية غير النصية (SC 1.4.11) فتتطلب 3:1. تعرض هذه الأداة شارة نجاح/إخفاق لكل عتبة من هذه العتبات.
ما درجة APCA Lc؟
APCA (خوارزمية التباين الإدراكي الميسّرة) هي طريقة التباين المقترحة لـ WCAG 3. تعطي قيمة تباين لمعان (Lc) من نحو 0 إلى 108، حيث تعني القيمة الأعلى تباينًا أكبر، وتراعي القطبية (داكن على فاتح مقابل فاتح على داكن). تُعرض بجوار نسبة WCAG 2.1 وتستخدم مستويات إرشاد خاصة بها بدلًا من نجاح/إخفاق واحد.
كيف يعمل اقتراح أقرب لون ناجح؟
يحافظ على درجة لون الأمامي وتشبّعه، ويعدّل لمعانه فقط ليصبح أفتح أو أغمق حتى يبلغ التباين مع الخلفية مستوى AA (4.5:1) أو AAA (7:1)، ثم يمكنك تطبيقه بنقرة واحدة. وإذا كانت الخلفية متوسطة الدرجة وتعذّر بلوغ الهدف، يعرض أقرب لون ممكن بدلًا من ذلك.
ما صيغ الألوان التي يمكنني إدخالها؟
HEX (#rgb و#rrggbb، إضافةً إلى #rgba و#rrggbbaa بثماني خانات مع ألفا)، وrgb()/rgba() وhsl()/hsla()، مع منتقي ألوان أصلي لكل حقل. قبل حساب النسبة، يُدمج اللون الأمامي شبه الشفاف فوق الخلفية — التي تُسطَّح هي نفسها على الأبيض أولًا. الألوان المسمّاة غير مدعومة.
هل تُرسل ألواني إلى خادم؟
لا. يجري التحليل والدمج وحسابات اللمعان والنسبة وAPCA بالكامل في متصفحك باستخدام JavaScript — لا تُرفع أي ألوان ولا يُرسل أي شيء إلى خادم، لذا تعمل بخصوصية وحتى دون اتصال بمجرد تحميل الصفحة.

أدوات ذات صلة

تحويل الكود إلى صورة

حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.

محاكي عمى الألوان

ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.