شعار XTools
XTools

فاحص التباين

فحص تباين النص والخلفية وفق WCAG AA وAAA
  • الملفات لا تغادر جهازك
  • يعمل في المتصفح
  • مجاني، بلا حساب، بلا علامة مائية

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

كيفية استخدام فاحص التباين

افحص زوج لون النص والخلفية وفق WCAG 2 ‏(AA وAAA للنص العادي والنص الكبير ومكوّنات الواجهة) وشاهد تباين الإضاءة APCA من مسودة WCAG 3. وعندما يفشل زوج، يقترح أقرب الألوان الناجحة.

  1. 1

    أدخل «لون النص» و«لون الخلفية» بصيغة HEX أو rgb() أو hsl() أو oklch() أو اسم لون، أو انقر عيّنة لفتح منتقي اللون.

  2. 2

    اقرأ «نسبة التباين» ونتيجة «ناجح» أو «فاشل» لكل فحص AA وAAA.

  3. 3

    انظر إلى «المعاينة»، واكتب «نص العيّنة» الخاص بك، واستخدم «تبديل الألوان» لاختبار العكس.

  4. 4

    ضمن «أقرب الألوان الناجحة»، انقر «تطبيق» على اقتراح «ضبط النص» أو «ضبط الخلفية» لـ AA ‏(4.5:1) أو AAA ‏(7:1).

  5. 5

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

أسئلة شائعة

ما نسبة التباين التي أحتاجها؟

يطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (24 بكسل فأكثر، أو 18.66 بكسل عريضًا) ولمكوّنات الواجهة مثل الأيقونات وحدود الحقول. ويطلب AAA نسبة 7:1 و4.5:1.

لماذا تُعرض 4.497:1 على أنها 4.49 بدل 4.50؟

لا تُقرَّب النسبة إلى الأعلى عبر عتبة، فلا يبدو الزوج الذي يخطئ 4.5:1 بقليل ناجحًا.

هل يمكنني اختبار نص شبه شفاف؟

نعم. استخدم منزلق «شفافية النص»؛ يُمزج النص الشفاف فوق الخلفية قبل قياس النسبة.

ما رقم APCA؟

يأتي APCA من مسودة WCAG 3 ويعطي تباين إضاءة (Lc) يعتمد على أي اللون هو النص؛ والقيم السالبة تعني نصًا فاتحًا على خلفية داكنة. ما زال مسودة، فتبقى نسب WCAG 2 هدف الامتثال المعتاد.

كيف تُختار الألوان المقترحة؟

تُغيَّر الإضاءة فقط (في OKLCH)، فتبقى صبغة لونك وإحساسه كما هما. إذا لم يبلغ أي اتجاه الهدف، يقول «لا يمكن بلوغه بتغيير الإضاءة وحدها؛ جرّب ضبط اللون الآخر».