ما هو مدقق تباين الألوان؟
يقيس مدقق تباين الألوان نسبة التباين بين لون المقدمة (النص) ولون الخلفية ويخبرك ما إذا كان هذا الزوج يلبي إرشادات الوصول إلى محتوى الويب. تبلغ عن رقم واحد بين 1: 1 و 21: 1 ويصنفها مقابل عتبات WCAG 2.2 لـ AA و AAA في كل من أحجام النص العادية والكبيرة ، بالإضافة إلى عتبة 3: 1 المنفصلة لمكونات ورسومات واجهة المستخدم.
التباين هو الاختلاف في الإضاءة النسبية بين لونين ، وليس فقط مدى اختلاف مظهرهما. يمكن أن يشعر لونان بالتميز بينما لا يزالان يفشلان للقراء الذين يعانون من ضعف في الرؤية أو نقص في رؤية الألوان أو أي شخص يستخدم الهاتف في ضوء الشمس الساطع. يتم حساب النسبة باستخدام صيغة الإضاءة النسبية الدقيقة التي حددتها WCAG ، وبالتالي فإن النتيجة تتطابق مع أدوات التدقيق التي يختبرها مستخدمو قارئ الشاشة بدلاً من التخمين البصري التقريبي.
كل شيء يعمل في متصفحك. اكتب أو الصق الألوان على شكل سداسية أو RGB أو HSL أو كلمة رئيسية CSS، وشاهد تحديثًا مباشرًا لمعاينة النص، وإذا فشل الزوج، يمكنك تطبيق لون مقترح يمر. لا يتم تحميل أي شيء ، ولا يوجد اشتراك ، وتستمر الأداة في العمل في وضع عدم الاتصال بمجرد تحميل الصفحة.
صيغة التباين WCAG 2 هي نسبة النصوع النسبي، وعتباتها هي ما يتم قياس عمليات تدقيق إمكانية الوصول ومعظم المتطلبات القانونية مقابله، لذا فهو الرقم المناسب للتصميم عليه. ومن المعروف أيضًا أنه غير كامل: يمكن أن يكون سخيًا للنص الفاتح على الخلفيات الداكنة وقاسيًا على بعض أزواج النغمات المتوسطة، ولهذا السبب توجد الخوارزمية اللاحقة، APCA، ويتم تجربتها للإصدارات المستقبلية. يحتوي النص الكبير على شريط أقل، ويعني كبير 18pt أو 14pt عندما يكون غامقًا، وهو حوالي 24px و18.66px. تتم تغطية العناصر غير النصية بشكل منفصل بواسطة 1.4.11 عند 3:1، وهذه هي القاعدة التي غالبًا ما يتم تفويتها: تحتاج أزرار الأيقونات وحدود الإدخال وحلقات التركيز إلى ذلك، ويمكن للتصميم تمرير كل فقرة ويظل يفشل في حقول النموذج الخاصة به.
كيفية استخدام مدقق تباين الألوان؟
أدخل لون النص الخاص بك
اكتب أو الصق اللون الأمامي بأي تنسيق شائع - #1a1a1a، rgb(26،26،26)، hsl (0،0%،10%)، أو كلمة رئيسية مثل البحرية. تتيح لك عينة الألوان والمنتقي الأصلي ضبطها بدقة.
أدخل لون الخلفية الخاص بك
اضبط الخلفية التي يجلس عليها النص. إذا كان لون النص الخاص بك يحتوي على شفافية ، فسيتم مزجه فوق هذه الخلفية قبل قياس النسبة ، ومطابقة ما يراه المستخدمون بالفعل.
اقرأ النسبة والدرجات
تظهر نسبة التباين الدقيقة مع شارات التمرير أو الفشل لـ AA و AAA بالأحجام العادية والكبيرة ، بالإضافة إلى فحص مكون واجهة المستخدم 3: 1 ، وكل ذلك بجوار عينة مباشرة من النص في خلفيتك.
إصلاح الفشل على الفور
إذا فشلت المجموعة، فقم بتطبيق اللون المقترح الذي يمكن الوصول إليه - تقوم الأداة بدفع النص أفتح أو أغمق حتى يمسح المستوى المستهدف، ثم يمكنك نسخ القيمة الثابتة.
الميزات الرئيسية
نسبة WCAG الدقيقة
يستخدم صيغ نسب الإضاءة النسبية ونسبة التباين SRGB الرسمية من WCAG 2.2 ، لذا فإن الرقم يطابق عمليات التدقيق الرسمية وصولاً إلى منزلتين عشريتين بدلاً من التقريب
AA و AAA و UI Grading
يتم تصنيف كل نتيجة مقابل AA (4.5: 1) ، و AAA (7: 1) ، وعتبات النص الكبير (3: 1 و 4.5: 1) ، والقاعدة 3: 1 لمكونات واجهة المستخدم غير النصية والأشياء الرسومية
معاينة النص المباشر
عينة حقيقية من النص العادي والكبير على الخلفية التي اخترتها أثناء الكتابة ، حتى تتمكن من الحكم على قابلية القراءة جنبًا إلى جنب مع النتيجة الرقمية
اقتراحات الألوان التي يمكن الوصول إليها
عندما يفشل الزوج ، فإن الأداة تسير في لون النص أفتح أو أغمق في HSL حتى تلبي النسبة المستهدفة وتقدم قيمة تمرير يمكنك تطبيقها بنقرة واحدة
Frequently Asked Questions
Related Tools
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!