مدقق تباين الألوان

تحقق من تباين المقدمة/الخلفية مقابل WCAG AA وAAA. شاهد تحديث النسبة أثناء اختيار الألوان.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Text / on-page input

تعمل مولدات الألوان وCSS بالكامل في متصفحك. لا تقوم المعاينات والتحويلات أبدًا بتحميل أنماطك.

استخدم مدقق تباين الألوان عندما تحتاج إلى ذلك: تحقق من تباين المقدمة/الخلفية وفقًا لإرشادات WCAG AA وAAA.

تحقق من وجود CSS منافس على صفحتك (إعادة التعيين، الألوان الموروثة). انسخ القاعدة التي تم إنشاؤها إلى ورقة أنماط معزولة أولاً.

لا. يتم تشغيل المولدات والمحولات في متصفحك من خلال المعاينة المباشرة.

لا، افتح الأداة، وقم بتعديل عناصر التحكم، وانسخ ملف CSS.

Convert colors between HEX, RGB, and HSL instantly with a live swatch.

Craft readable text-shadow styles with live typography preview.

Build linear, radial, and conic gradients with live preview and copy-ready CSS.