Contrast Checker
WCAG contrast check
WCAG contrast check يعمل محليا في المتصفح الخاص بك
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
يقيس مدقق التباين نسبة التباين بين لون النص ولون الخلفية باستخدام صيغة النصوع WCAG، ويخبرك بمستويات إمكانية الوصول التي يمر بها هذا الزوج. هذا هو الاختبار الذي يقرر ما إذا كان النص الأساسي قابلاً للقراءة بالفعل: نسبة 4.5 إلى 1 هي الحد الأدنى للنص العادي، و3 إلى 1 للنص الكبير وحدود الواجهة، و7 إلى 1 للامتثال المحسن. إن الحكم على التباين من خلال العين أمر غير موثوق به، لأن العين أكثر حساسية للأخضر من اللون الأزرق، ولهذا السبب فإن اللون الأصفر الذي يبدو ساطعًا والأزرق الذي يبدو داكنًا يمكن أن يسجلا نتائج متطابقة تقريبًا.
Where people use the
- التحقق مما إذا كان النص الأساسي الموجود على خلفية ملونة يتوافق مع AA.
- الاختيار بين النص الأسود والأبيض للون الزر.
- تدقيق لوحة موجودة قبل إعادة التصميم.
- توثيق قرار إمكانية الوصول في التذكرة.
How to use the
- 1
ضبط لون النص
اكتب قيمة سداسية عشرية مثل 1a1a1a، أو استخدم منتقي الألوان. يتم قبول الاختصار المكون من ثلاثة أرقام مثل f0a.
- 2
ضبط لون الخلفية
نفس الشيء بالنسبة للخلفية. يتم تحديث المعاينة عند تغيير أي منهما.
- 3
اقرأ النسبة
يتراوح الرقم من 1:1، الألوان المتطابقة، إلى 21:1، أسود على أبيض. الأعلى يعني أكثر قابلية للقراءة.
- 4
تحقق من المستوى الذي تحتاجه
يحتاج النص الأساسي العادي إلى 4.5 إلى 1 لـ AA و7 إلى 1 لـ AAA. العناوين بخط عريض 18 أو 14 نقطة، وحدود واجهة المستخدم، تحتاج إلى 3 إلى 1.
- 5
انظر إلى المعاينة وكذلك الرقم
يمكن أن يمر الزوج على الورق ولا يزال يبدو سيئًا بحجم صغير أو على شاشة منخفضة الجودة. إذا بدا الأمر صعبًا للقراءة، فمن الصعب قراءته.
النصائح وأفضل الممارسات
- قم بتغميق لون النص، واحتفظ بالنسخة الأكثر سطوعًا للتعبئة.
- تحقق من أصغر حجم سيتم استخدام النص به بالفعل.
- الحدود والأيقونات تحتاج إلى 3 إلى 1 أيضًا، وليس النص فقط.
الأسئلة المتداولة
ما هي صيغة نسبة التباين؟
يتم تحويل كل لون إلى نصوع نسبي باستخدام الأوزان القياسية، 0.2126 للأحمر، 0.7152 للأخضر و0.0722 للأزرق، بعد تصحيح جاما. وتكون النسبة بعد ذلك هي النصوع الأخف زائد 0.05 مقسومًا على الأغمق زائد 0.05. وتتراوح النتيجة من 1:1 إلى 21:1.
لماذا يفشل لون علامتي التجارية؟
لأن معظم الألوان المتوسطة المشبعة لا يمكن أن تصل إلى 4.5 إلى 1 مقابل اللون الأبيض. الحل المعتاد هو تغميق اللون لاستخدام النص مع الاحتفاظ بالنسخة الأكثر سطوعًا للتعبئات الكبيرة، وهو بالضبط ما تفعله معظم أنظمة التصميم بلونها الأساسي.
هل اجتياز النسبة كافي للوصول إليها؟
إنه ضروري ولكنه غير كاف. النص الكبير جدًا أو الصغير جدًا، وأوزان الخطوط الرفيعة، والنص فوق الصور، وأشكال معينة من نقص رؤية الألوان، كلها تؤثر على إمكانية القراءة بما يتجاوز النسبة. اختبر مع مستخدمين حقيقيين حيث يمكنك ذلك.
هل الاتجاه مهم، الضوء على الظلام أو الظلام على الضوء؟
لا، فالنسبة متناظرة، لذا فإن اللون الأسود على الأبيض والأبيض على الأسود يسجلان 21:1. ما يختلف في الممارسة العملية هو الوهج والوزن الملحوظ، وهو حكم تصميمي وليس حكم امتثال.
ما الذي يعتبر نصًا كبيرًا؟
بمصطلحات WCAG، 18pt أو أكبر، أو 14pt أو أكبر عندما يكون غامقًا. في وحدات البكسل في CSS يبلغ حجمها 24 بكسل تقريبًا، أو حوالي 18.66 بكسل عندما تكون بالخط العريض.
أين يحدث الحساب؟
بالكامل في متصفحك لم يتم تحميل أي شيء، لذا يمكنك التحقق من الألوان من إرشادات العلامة التجارية التي لم يتم نشرها للعامة بعد.