نسبة التباين
- AA نص عادي 4.5:1
- AA نص كبير 3:1
- AAA نص عادي 7:1
- AAA نص كبير 4.5:1
- عناصر الواجهة والرسومات 3:1
مقروء للجميع
عنوان فرعي كبير
يتضرر النص الأساسي أكثر من غيره بالتباين المنخفض، لأن الناس يقرؤونه بحجم صغير ولوقت أطول. رابط نصي
أقرب الألوان الناجحة
الألوان المحفوظة
أداة فحص تباين الألوان
تحقق من أن النص مقروء على خلفيته قبل نشر التصميم. اختر أو اكتب لون النص ولون الخلفية، فتعرض الأداة نسبة التباين وفق WCAG 2.x مع نتيجة النجاح أو الرسوب لمستويي AA وAAA، للنص العادي والنص الكبير وعناصر الواجهة. تساعدك المعاينة المباشرة ومحاكاة عمى الألوان والتصحيحات المقترحة على إيجاد زوج مناسب. اختر لون النص ولون الخلفية بصيغة HEX أو RGB أو HSL. تتحدث نسبة التباين وفق WCAG ونتائج AA وAAA والمعاينة أثناء الكتابة، وتُقترح أقرب الألوان الناجحة. يُحفظ كل شيء في هذا المتصفح.
كيف يعمل
- اختر لون النص ولون الخلفية، أو اكتبهما بصيغة HEX أو RGB أو HSL. اضبط عتامة النص إذا كان شبه شفاف.
- اقرأ نسبة التباين وشارات AA وAAA للنص العادي والنص الكبير وعناصر الواجهة، وتفقد المعاينة المباشرة.
- طبّق لونًا مقترحًا إذا رسب الزوج، واحفظ الأزواج الجيدة في لوحتك، وانسخ CSS إلى مشروعك.
حلول لا مجرد درجات
عندما يرسب زوج، تبحث الأداة عن أقرب لون نص ولون خلفية بنفس التدرج والتشبع يبلغ AA وAAA، وتطبقه بنقرة واحدة. ويُمزج النص شبه الشفاف بالخلفية أولًا، تمامًا كما يرسمه المتصفح.
خاص وقابل للنقل
تُحفظ ألوانك ولوحتك في هذا المتصفح فقط. احفظ كل شيء بصيغة JSON للنسخ الاحتياطي أو للنقل إلى جهاز آخر، أو احفظ النتيجة بصيغة PDF أو صورة. يشمل التراجع والإعادة كل تغيير.
الأسئلة المتداولة
هل أداة فحص تباين الألوان مجانية؟
نعم. إنها مجانية ولا تحتاج إلى حساب وتعمل في أي متصفح حديث.
ما النسبة التي أحتاجها؟
يطلب مستوى AA في WCAG نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير ولعناصر الواجهة مثل حدود الحقول والأيقونات. ويطلب مستوى AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير.
لماذا ترسب 4.48 مع أنها تُقرَّب إلى 4.5؟
حدود WCAG دقيقة. النسبة 4.48:1 أقل من 4.5:1، لذا ترسب في AA للنص العادي. تقارن الأداة القيمة غير المقربة، لذلك تكون الشارات صارمة دائمًا.
الأدوات ذات الصلة
القصة وراء مدقق تباين الألوان
من أين تأتي قيم التباين في WCAG: 4.5:1 و7:1، والنصوع النسبي من sRGB، وقاعدة 3:1 لمكونات الواجهة في WCAG 2.1، وعمى الألوان، وAPCA لـ WCAG 3.
مولد لوحة الألوان
أنشئ لوحات الألوان واقفِلها واخلطها في المتصفح. انسخ HEX أو متغيرات CSS أو JSON، وصدّر PNG أو SVG، واستخرج الألوان من صورة.
عجلة الألوان
اختر لونًا على عجلة تفاعلية، وقم بإنشاء لوحات تكميلية ومتماثلة وثلاثية ولوحات أخرى، وانسخ HEX أو RGB أو HSL أو HSV أو CMYK.
محرر التدرج
أنشئ تدرجات CSS خطية وشعاعية في المتصفح. اسحب نقاط اللون واضبط الزاوية وانسخ CSS أو HEX أو RGB أو HSL أو HSV أو CMYK.
الألوان
كيف يعمل اللون على الشاشات وفي الطباعة: RGB وCMYK وHSL والست عشري وعجلة الألوان والتدرجات والتباين وأدوات PictorX.
هل أنت مستعد لتجربتها؟
افتح PictorX في متصفحك - بدون تثبيت، ولا يلزم وجود بطاقة ائتمان للبدء.
الانتقال إلى المحرر