فحص تباين الألوان
اختبر لون النص ولون الخلفية
تعطيك أداة فحص تباين الألوان المجانية هذه نسبة WCAG لأي لونين أثناء الكتابة. وتعرض كل نتيجة AA و AAA، ثم تقترح أقرب لون ينجح. كذلك ترى الزوج كما يراه المصابون بعمى الألوان.
- مجانيالسعر
- WCAG 2.2 AA و AAAالمعيار
- حتى 12 لوناشبكة الألوان
- لا يوجدالتسجيل
فحص تباين الألوان
نسبة WCAG 2 ومستويات AA و AAA مع تصحيحات وعرض لعمى الألوان
اكتب hex أو rgb() أو hsl() أو اسم لون في CSS. ويُمزج لون النص شبه الشفاف، مثل #00000080، مع الخلفية أولا.
5.82:1
ينجح في AA لكل النصوص. ولا يبلغ AAA للنص العادي.
- نص عادي AA (4.5:1)ناجح
- نص عادي AAA (7:1)راسب
- نص كبير AA (3:1)ناجح
- نص كبير AAA (4.5:1)ناجح
- الأيقونات والحدود (3:1)ناجح
يُقرأ النص العادي بحجم 16px مثل هذه الفقرة.
نص كبير بحجم 24px
النص العريض بحجم 19px يُعد كبيرا
زر
قراءة APCA (مسودة WCAG 3): Lc 78.5مناسب للنص بحجم 18px فأكثر
أقرب الألوان التي تنجح
هذا الزوج ينجح في AAA بالفعل، لذلك لا يوجد ما يُصحح.
| نوع الرؤية | المعاينة | النسبة |
|---|---|---|
| عمى الأحمر (بلا مخاريط حمراء) | Aa | 5.01:1 |
| عمى الأخضر (بلا مخاريط خضراء) | Aa | 6.05:1 |
| عمى الأزرق (بلا مخاريط زرقاء) | Aa | 4.96:1 |
| عمى الألوان الكلي (بلا أي لون) | Aa | 5.82:1 |
الصفوف هي لون النص والأعمدة هي الخلفية. AAA تعني 7:1، و AA تعني 4.5:1، و AA+ تعني 3:1، وهي تكفي للنص الكبير فقط.
جاهز. غيّر أي لون من اللونين فتتحدث النتيجة أثناء الكتابة.
ما الذي تخبرك به أداة فحص تباين الألوان
التباين هو الفرق في السطوع بين لونين. أيضًا، وعندما يكون الفرق صغيرا تذوب الكلمات في الصفحة. لذلك يصعب الأمر على ضعاف البصر، وعلى من يستخدم الهاتف تحت الشمس، وعلى كل من أرهقت عيناه.
تقيس هذه الأداة تباين الألوان بالطريقة التي تعتمدها إرشادات إتاحة محتوى الويب. أولا، تكتب أو تختار لون النص ولون الخلفية. ثم تحسب الأداة النسبة، من 1:1 للونين متماثلين حتى 21:1 للأسود على الأبيض. وأخيرا، تذكر مستويات WCAG التي ينجح فيها الزوج.
تأتي القواعد من معيار التباين في WCAG 2.2. يحتاج النص العادي إلى 4.5:1 للمستوى AA، بينما يحتاج النص الكبير إلى 3:1. كما تحتاج الأيقونات والحدود وحقول النماذج إلى 3:1 مقابل ما يجاورها.
كل شيء يعمل داخل تبويب متصفحك. لذلك لا تصل الألوان التي تختبرها إلى خادمنا أبدا، ويمكنك فحص ألوان علامتك التجارية قبل نشرها.
كيف تُحسب نسبة التباين
أولا، يتحول كل لون إلى نصوع نسبي، وهو رقم من 0 للأسود حتى 1 للأبيض. وتعطي المعادلة الأخضر الوزن الأكبر والأزرق الوزن الأصغر، لأن أعيننا تتأثر بالضوء الأخضر أكثر بكثير من الأزرق.
بعد ذلك تضيف الأداة 0.05 إلى القيمتين وتقسم الأفتح على الأغمق. وهكذا تنتج نسبة التباين. كما أن ترتيب اللونين لا يغيرها، لذلك يعطي التبديل الرقم نفسه.
أداة فحص تباين الألوان لدينا لا تقرب النسبة إلى الأعلى أبدا. فالزوج الذي نسبته 4.499:1 يظهر بنسبة 4.49:1 ويرسب، لأن WCAG يعامل الحدود كخطوط دقيقة.
AA و AAA والنص الكبير بكلمات بسيطة
المستوى AA هو الهدف الذي تذكره معظم القوانين والعقود. يحتاج النص العادي إلى 4.5:1، والنص الكبير إلى 3:1. في المقابل، المستوى AAA أشد، إذ يطلب 7:1 للنص العادي و 4.5:1 للنص الكبير.
الكبير يعني 24px على الأقل، أو 18.66px على الأقل إذا كان النص عريضا. وتأتي هذه الأرقام من خطي 18 و 14 نقطة. لذلك تُعد الفقرة بحجم 16px نصا عاديا دائما، حتى لو كان شكلها شكل عنوان.
في الواقع، تعرض الأداة النتائج الخمس معا، ولكل نتيجة علامة نجاح أو رسوب. وبالتالي ترى بنظرة واحدة إن كان اللون يصلح لعنوان كبير فقط أم للنص أيضا.
أقرب الألوان التي تنجح
الرسوب نصف إجابة فقط. لذلك تبحث الأداة أيضا عن أقرب لون كان سينجح، في AA و AAA. وتحافظ على درجة اللون والتشبع، وتغير السطوع فقط.
تحصل على نوعين من التصحيح. الأول يغير لون النص، والثاني يغير الخلفية. فمثلا يرسب الرمادي #777777 على الأبيض بنسبة 4.47:1، بينما ينجح #767676 بنسبة 4.54:1. وبنقرة واحدة تطبق التصحيح وتتحدث كل النتائج.
عمى الألوان وقراءة APCA
يعرض جدول تحت النتيجة زوجك مع أربعة أنواع من عمى الألوان: بلا مخاريط حمراء أو خضراء أو زرقاء، وبلا ألوان إطلاقا. ولكل صف نسبته الخاصة. والأحمر على الأخضر هو الفخ الشائع، لأن اللونين قد يبدوان بالبني نفسه.
تعطي الأداة أيضا قراءة APCA، وهي طريقة مسودة WCAG 3. ودرجة Lc فيها تهتم باللون الذي يقع في الأعلى، لذلك يختلف الأبيض على الأسود عن الأسود على الأبيض. ومع ذلك ما زال APCA مسودة، فاعتبره رأيا ثانيا واعتمد نتيجة WCAG 2 للنجاح.
شبكة ألوان لأنظمة التصميم كاملة
تختار معظم الفرق من لوحة ألوان وليس من لونين فقط. لذلك تقبل اللوحة الثانية حتى 12 لونا، كل لون في سطر، وتختبر كل الأزواج معا.
كذلك، الصفوف هي لون النص والأعمدة هي الخلفية. وتعرض كل خانة عينة صغيرة والنسبة ودرجة: AAA أو AA أو AA+ للنص الكبير فقط، أو شرطة عند الرسوب. وهكذا تعرف الأزواج الآمنة للنص قبل بناء أي صفحة.
شاهد أداة فحص تباين الألوان وهي تعمل من البداية إلى النهاية
في هذا الفيديو القصير تمرّ الأداة أمامك من أول خطوة إلى آخرها. اختر لغتك من القائمة بالأسفل، وفعّل الترجمة النصية إذا كانت تساعدك.
كيف تستخدم أداة فحص تباين الألوان خطوة بخطوة
خمس خطوات سريعة تنقلك من لونين إلى زوج جاهز للنشر.
أدخل لون النص
اكتب رمز hex أو rgb() أو hsl() أو اسم لون، أو انقر عينة اللون لتختاره.
أدخل الخلفية
أضف اللون الموجود خلف النص. وفي Chrome و Edge يلتقط زر الالتقاط من الشاشة أي بكسل.
اقرأ النسبة
يوضح الرقم الكبير والعلامات الخمس ما ينجح فيه الزوج. كذلك تعرضه المعاينة بثلاثة أحجام.
طبّق تصحيحا
إذا رسب الزوج، فانقر أحد أقرب الألوان الناجحة. ثم افحص المعاينة مرة أخرى.
احفظ النتيجة
انسخ CSS، أو انسخ رابط الزوج، أو نزّل تقريرا قصيرا لملاحظاتك.
لماذا تستخدم أداة فحص تباين WCAG هذه
النسبة وحدها تخبرك بأقل مما تحتاج. لذلك تسد هذه الإضافات الثلاث النقص.
تقترح التصحيح
لا داعي لتخمين درجة أغمق. فالأداة تجد أقرب لون ناجح لطرفي الزوج.
تتعامل مع الألوان الشفافة
لون النص الذي فيه شفافية، مثل #00000080، يُمزج أولا مع خلفيته. لذلك تطابق النسبة ما تعرضه الشاشة.
تفحص لوحة ألوان كاملة
الصق حتى 12 لونا فيحصل كل زوج على درجة. وبهذا تتحول ساعات من الفحوص المنفردة إلى نقرة واحدة.
خطوط التباين التي يضعها WCAG
ثلاثة أرقام تغطي كل الحالات تقريبا في صفحة الويب.
- 4.5:1 للنص العادي هذا هو المستوى AA للنص والروابط والتسميات والنص الإرشادي. أما AAA فيطلب 7:1.
- 3:1 للنص الكبير النص بحجم 24px، أو 18.66px عريضا، ينجح في AA بنسبة 3:1. ويطلب AAA للنص الكبير 4.5:1.
- 3:1 للأيقونات والحدود منذ WCAG 2.1 تحتاج حدود الحقول وحلقات التركيز والأيقونات المهمة إلى 3:1 مقابل ما يجاورها.
أخطاء تباين تُسقط التدقيق
كل خطأ منها ينجح في النظرة السريعة، لكنه يرسب في الاختبار الحقيقي.
نص إرشادي رمادي فاتح
النص الإرشادي داخل الحقل نص أيضا، لذلك يحتاج إلى 4.5:1 كذلك. لكن الرمادي الباهت في قوالب كثيرة يرسب.
نص فوق صورة
في الصورة مناطق فاتحة وأخرى داكنة. لذلك اختبر النص مقابل أفتح منطقة يغطيها، أو أضف طبقة مصمتة.
الاعتماد على اللون وحده
رسالة الخطأ الحمراء بلا أيقونة أو كلمة تخذل من لا يرى الأحمر. لذلك أرفق اللون بعبارة واضحة.
نسيان حالة المرور والتركيز
قد ينجح الرابط في وضعه العادي ويرسب عند مرور المؤشر. لذلك افحص كل حالة، ومنها حلقة التركيز.
تقريب النسبة إلى الأعلى
بعض الأدوات تعرض 4.5 لزوج نسبته 4.48. لكن WCAG لا يقرب، لذلك يرسب هذا الزوج.
فحص المظهر الفاتح فقط
قد ينجح أزرق العلامة على الأبيض ويرسب على خلفية داكنة. لذلك اختبر المظهرين.
أسئلة شائعة عن تباين الألوان
ما نسبة التباين الجيدة للنص؟
استهدف 4.5:1 على الأقل للنص العادي، وهذا هو المستوى AA في WCAG. أما للقراءة الطويلة فالأفضل 7:1 أو أكثر، وهذا هو المستوى AAA.
هل أداة فحص التباين هذه مجانية؟
نعم. إنها مجانية ولا تحتاج إلى حساب، ولا حد لعدد الأزواج التي تختبرها.
هل تُرسل ألواني إلى أي مكان؟
لا. يجري الفحص كله داخل تبويب المتصفح، لذلك لا تصل ألوانك إلى خادمنا أبدا.
هل colour contrast checker هي الأداة نفسها؟
نعم. كلمة colour هي التهجئة البريطانية لكلمة color في الإنجليزية، لذلك تؤدي تلك الأداة العمل نفسه الذي تؤديه هذه الصفحة.
ما الذي يُعد نصا كبيرا؟
النص الذي لا يقل عن 24px، أو لا يقل عن 18.66px إذا كان عريضا. وتعادل هذه الأحجام 18 و 14 نقطة.
ما الصيغ التي يمكنني كتابتها؟
الصيغة hex بثلاثة أو أربعة أو ستة أو ثمانية أرقام، و rgb() و rgba() و hsl() و hsla()، وأسماء ألوان CSS مثل navy أو tomato.
كيف تتعامل الأداة مع الشفافية؟
أولا، يُمزج لون النص شبه الشفاف مع الخلفية قبل الفحص. أيضًا، وبالمثل، تُمزج الخلفية شبه الشفافة مع الأبيض أولا.
لماذا تعرض الأداة 4.49 وليس 4.5؟
تُقطع النسبة عند منزلتين عشريتين ولا تُقرب إلى الأعلى أبدا. لذلك يعرض الزوج الواقع تحت الحد رقما تحت الحد، فيرسب.
هل يغير تبديل اللونين النسبة؟
لا. نسبة WCAG واحدة في الاتجاهين. لكن المعاينة وقراءة APCA تتغيران، لأن APCA يهتم باللون الذي يقع في الأعلى.
ما هو APCA؟
APCA هو طريقة التباين في مسودة WCAG 3. ويعطي درجة Lc تعتمد على حجم النص وعلى اللون الذي يقع في الأعلى.
هل أتبع APCA أم WCAG 2؟
اتبع WCAG 2 للامتثال اليوم، لأن القوانين وعمليات التدقيق تعتمد عليه. واستخدم APCA تلميحا إضافيا فقط، لأنه ما زال مسودة.
هل تحتاج الأيقونات والأزرار إلى تباين أيضا؟
نعم. أضاف WCAG 2.1 قاعدة 3:1 للأيقونات وحدود حقول النماذج وحلقات التركيز وغيرها من الأجزاء التي يجب أن يراها الناس.
هل يجب أن ينجح الزر المعطل؟
لا. يستثني WCAG عناصر التحكم غير النشطة. ومع ذلك أبقها مقروءة، لأن الناس يحتاجون إلى معرفة أن العنصر موجود.
وماذا عن الشعارات والنص الزخرفي؟
الشعارات والزخرفة الخالصة مستثناة. في المقابل، يجب أن ينجح كل نص يحمل معنى، حتى الخط الصغير.
في الواقع، كيف تعمل التصحيحات المقترحة؟
تحافظ الأداة على درجة اللون والتشبع وتغير السطوع فقط. ثم تختار أقرب خطوة تصل إلى AA أو AAA.
هل يمكنني التقاط لون من شاشتي؟
نعم، في Chrome و Edge. يستخدم زر الالتقاط من الشاشة قطارة المتصفح. وفي المتصفحات الأخرى استخدم عينة اللون أو اكتب الرمز.
ماذا يعرض جدول عمى الألوان؟
يعرض الزوج كما يراه من يفتقد المخاريط الحمراء أو الخضراء أو الزرقاء، ومن لا يرى الألوان أبدا. كذلك لكل صف نسبته الخاصة.
ما مدى شيوع عمى الألوان؟
نحو رجل من كل 12 وامرأة من كل 200 لديهم شكل من أشكال ضعف رؤية الألوان. والخلط بين الأحمر والأخضر هو الأكثر شيوعا.
هل يمكنني اختبار لوحة ألوان كاملة؟
نعم. الصق حتى 12 لونا في لوحة الألوان، كل لون في سطر، ثم اضغط افحص كل الأزواج لتحصل على شبكة بالدرجات.
كيف أختبر نصا فوق تدرج أو صورة؟
اختر أفتح نقطة خلف النص الفاتح، أو أغمق نقطة خلف النص الداكن. كذلك، فإذا نجحت أسوأ نقطة، ينجح الباقي أيضا.
هل تباين WCAG شرط قانوني؟
نعم في أماكن كثيرة. فالقسم 508 في الولايات المتحدة والمعيار الأوروبي EN 301 549 يحيلان إلى المستوى AA في WCAG، وتنظر المحاكم إليه كثيرا في قضايا ADA.
هل غير WCAG 2.2 قواعد التباين؟
لا. حافظ WCAG 2.2 على أرقام التباين نفسها في WCAG 2.1، لذلك ما زال الزوج الذي نجح سابقا ينجح الآن.
لماذا تعطي أدوات أخرى رقما مختلفا قليلا؟
بعضها يقرب إلى منزلة عشرية واحدة، وبعضها يستخدم حدا قديما في المعادلة. والفرق صغير جدا، لكنه قد يقلب نتيجة زوج يقع على الحد تماما.
هل يمكنني مشاركة نتيجة؟
نعم. يعطيك زر نسخ رابط هذا الزوج عنوانا يفتح هذه الصفحة باللونين نفسيهما.
هل يغني هذا عن تدقيق كامل لإمكانية الوصول؟
لا. أداة فحص تباين WCAG هذه تغطي اللون فقط. أما التدقيق الكامل فيفحص أيضا لوحة المفاتيح والعناوين والنص البديل وأكثر من ذلك بكثير.
أدوات مجانية أخرى للألوان والتصميم
استخدمها مع أداة فحص تباين الألوان لبناء لوحة ألوان واختبارها.
- منتقي رموز الألوان
حوّل اللون بين hex و RGB و HSL و CMYK.
- مولد مخططات الألوان
أيضًا، احصل على ستة تناسقات من لون واحد.
- فاحص النص البديل للصور
اعثر على الصور ذات النص البديل المفقود أو الضعيف.
- فاحص سهولة القراءة
اعرف مدى سهولة قراءة نصك.
كذلك، افحص تباين الألوان الآن
اكتب لونين لترى النسبة ونتيجة WCAG وأقرب تصحيح خلال ثوان. كما أنك لا تحتاج إلى حساب.