منتقي الألوان ومدقق التباين
اختر ألوان المقدمة والخلفية وتحقق من التباين بينهما قبل الشحن. تعرض المعاينة الزوج كنص حقيقي، لذا يمكنك الحكم على سهولة القراءة مباشرة بدلاً من التخمين من خلال الرموز السداسية.
Live Text Contrast Preview
Sample paragraph text demonstrating visual contrast between selected text and background colors.
13.98 : 1
كيف يعمل
- 1
اختر لون المقدمة (النص).
- 2
اختر لون الخلفية الذي سيجلس عليه.
- 3
اقرأ المعاينة كنص فعلي بأحجام حقيقية وليس كعينتين.
- 4
انسخ القيم إلى ورقة الأنماط أو ملف التصميم المميز أو تكوين السمة.
المزايا والفوائد الرئيسية
الحكم في السياق
تظهر الألوان كنص على الخلفية، وهي الطريقة الوحيدة لمعرفة ما إذا كان الاقتران قابلاً للقراءة حقًا.
موجه نحو الوصول
تصبح مشاكل التباين واضحة قبل أن تصل إلى المستخدمين أو قبل تدقيق إمكانية الوصول.
قيم جاهزة للنسخ
خذ القيم السداسية مباشرة إلى CSS أو ملف رمز التصميم أو سمة مكتبة المكونات.
التكرار الفوري
اضبط أيًا من الألوان وشاهد التأثير على الفور، بدون إنشاء أو إعادة تحميل.
فيما يستخدمه الناس
- التحقق من اقتران ألوان العلامة التجارية قبل أن تصل إلى نظام التصميم.
- إصلاح النص منخفض التباين الذي تم وضع علامة عليه في Lighthouse أو تقرير إمكانية الوصول.
- اختيار الرابط المقروء وألوان الجسم لموضوع فاتح ومظلم.
- توثيق زوج الألوان في دليل النمط بالقيم السداسية الدقيقة.
التنسيقات والخيارات المدعومة
| إدخال اللون | القيم السداسية عبر منتقي الألوان الأصلي أو الإدخال المباشر |
|---|---|
| معاينة | عينة نصية حية في المقدمة على الخلفية |
الخصوصية ومعالجة البيانات
يتم تحديد اللون ومعاينته بالكامل في الصفحة. لا يتم إرسال أي قيم إلى الخادم أو تخزينها خارج علامة التبويب الحالية.
الحدود والأشياء التي يجب معرفتها
- تعتمد متطلبات التباين على حجم النص ووزنه - النص الكبير له عتبة أقل من النسخة الأساسية، لذا احكم على الاقتران بالحجم الذي ستستخدمه بالفعل.
- تتحقق الأداة من زوج واحد من المقدمة والخلفية. يحتوي النص الموجود فوق الصورة أو التدرج على نطاق من التناقضات، ويجب التحقق منه مقابل الجزء الأسوأ.
- تؤثر اختيارات الألوان أيضًا على المستخدمين الذين يعانون من قصور في رؤية الألوان؛ لا تعتمد أبدًا على اللون وحده ليحمل المعنى.
استكشاف الأخطاء وإصلاحها
يبدو اللون مختلفًا في التطبيق عنه هنا
يمكن أن يؤدي كل من العتامة وأوضاع المزج والخلفية الأصلية إلى تغيير اللون المعروض. قارن اللون المحسوب في أدوات تطوير المتصفح بدلاً من اللون المعلن.
لن يتم فتح المنتقى
يحتاج إدخال اللون الأصلي إلى متصفح يدعم نوع الإدخال = اللون. اكتب القيمة السداسية مباشرةً إذا لم يتم فتح العينة.
Online Color Picker — HEX, RGB & HSL Converter
Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.
- HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
- Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
- CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
- Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
- Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.
Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.
الأسئلة المتداولة
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.
Why does the colour look different in my app?
Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.
Is contrast enough for accessibility?
It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.
ما هي نسبة التباين الجيدة WCAG؟
مطلوب نسبة تباين تبلغ 4.5:1 للنص العادي بموجب معايير WCAG AA.
ما هي نسبة التباين التي أحتاجها؟
يطلب WCAG AA نسبة 4.5:1 للنص الأساسي و3:1 للنص الكبير (حوالي 24 بكسل أو 19 بكسل غامق). احكم على الاقتران بالحجم الذي ستشحنه بالفعل، نظرًا لأن العتبة تتغير معه.
لماذا يبدو اللون مختلفًا في تطبيقي؟
تعمل كل من العتامة وأوضاع المزج والخلفية الأصلية على تغيير النتيجة المعروضة. تحقق من اللون المحسوب في أدوات تطوير المتصفح بدلاً من القيمة التي أعلنتها.
هل التباين كافٍ لإمكانية الوصول؟
إنها ضرورية وليست كافية. وتجنب أيضًا استخدام اللون وحده لنقل المعنى — أضف رمزًا أو تسمية أو نمطًا حتى تظل المعلومات متاحة للمستخدمين الذين لا يستطيعون التمييز بين الأشكال.
الأدوات ذات الصلة
مولد CSS Glassmorphism
إنشاء تأثيرات واجهة المستخدم الزجاجية الحديثة ورمز CSS
مولد رمز الاستجابة السريعة
قم بتحويل أي رابط أو نص إلى رمز QR قابل للمسح الضوئي
العلامة الوصفية ومولد الرسم البياني المفتوح
قم بإنشاء علامات تعريف SEO لـ Google و Facebook و Twitter
SHA256 وMD5 مولد التجزئة
قم بإنشاء تجزئات تشفير SHA-256 وSHA-512 وMD5