ابزار رایگان دسترس‌پذیری

بررسی کنتراست رنگ

رنگ متن را با رنگ پس‌زمینه همین‌جا بر اساس WCAG 2.2 مقایسه کنید، یا آدرس یک صفحه را وارد کنید تا هر بخشی از متن را که زیر حداقل کنتراست است، همراه با رنگ‌های اندازه‌گیری‌شده و نزدیک‌ترین رنگ قابل‌قبول، پیدا کنید.

محاسبه‌گر کنتراست

یک رنگ متن و یک رنگ پس‌زمینه وارد کنید. همه محاسبات در مرورگر شما انجام می‌شود.

متن معمولی در اندازه 16 پیکسل این‌گونه دیده می‌شود.

متن بزرگ در اندازه 24 پیکسل

حاشیه یک دکمه

نسبت کنتراست4.54:1

نتایج WCAG 2.2 برای این رنگ‌ها
متن معمولی، AAWCAG 1.4.3، نیازمند 4.5:1قبول
متن بزرگ، AAWCAG 1.4.3، نیازمند 3:1قبول
متن معمولی، AAAWCAG 1.4.6، نیازمند 7:1رد
متن بزرگ، AAAWCAG 1.4.6، نیازمند 4.5:1قبول
آیکون‌ها، حاشیه‌ها و فیلدهای فرمWCAG 1.4.11، نیازمند 3:1قبول

نزدیک‌ترین رنگ‌های متن که روی این پس‌زمینه قبول می‌شوند

متن بزرگ یعنی دست‌کم 24 پیکسل، یا 18.66 پیکسل به‌صورت پررنگ (bold). نسبت‌ها به پایین گرد می‌شوند، بنابراین 4.499:1 به‌صورت 4.49:1 نمایش داده می‌شود و رد می‌شود، همان‌طور که WCAG در نظر دارد.

یا یک صفحه را برای یافتن متن کم‌کنتراست اسکن کنید

رایگان. آدرسی را که وارد می‌کنید در حدود 20 ثانیه بررسی می‌کند.

این ابزار چه چیزهایی را بررسی می‌کند

  • نسبت WCAG هر دو رنگ دلخواه

    محاسبه‌گر از فرمول روشنایی نسبی (relative luminance) در تعاریف WCAG 2.2 استفاده می‌کند و نتیجه را برای متن معمولی، متن بزرگ و اجزای رابط کاربری در سطح AA و AAA نشان می‌دهد. این محاسبه در مرورگر شما انجام می‌شود.

  • یک رنگ قابل‌قبول، محاسبه‌شده

    وقتی یک جفت‌رنگ رد می‌شود، ابزار نزدیک‌ترین رنگ متن با همان فام را پیدا می‌کند که به 4.5:1 یا 7:1 می‌رسد، تا تا حد ممکن کمتر در طراحی خود تغییر دهید.

  • همه متن‌های کم‌کنتراست یک صفحه

    اسکن صفحه، قاعده color-contrast از axe-core را در یک مرورگر Chrome واقعی اجرا می‌کند و هر عنصر ردشده را با رنگ متن، رنگ پس‌زمینه، اندازه فونت و نسبت آن فهرست می‌کند.

  • گروه‌بندی بر اساس جفت‌رنگ

    خطاها بر اساس رنگ متن و پس‌زمینه گروه‌بندی می‌شوند، چون یک تغییر در یکی از رنگ‌های قالب معمولاً همه عناصری را که از آن استفاده می‌کنند اصلاح می‌کند.

  • آستانه درست برای متن بزرگ

    متن با اندازه دست‌کم 24 پیکسل، یا 18.66 پیکسل به‌صورت پررنگ، به‌جای 4.5:1 به 3:1 نیاز دارد. اسکن آستانه درست را بر اساس اندازه و وزن محاسبه‌شده هر عنصر اعمال می‌کند.

  • آنچه نتوانستیم اندازه بگیریم و دلیل آن

    متن روی تصاویر، گرادیان‌ها یا عناصر هم‌پوشان جداگانه و همراه با دلیل فهرست می‌شود، تا دقیقاً بدانید چه چیزی را باید با چشم بررسی کنید.

آنچه نمی‌تواند بررسی کند

  • اندازه‌گیری متن روی عکس‌ها، گرادیان‌ها یا ویدیو. نرم‌افزار نمی‌تواند بداند کدام بخش از تصویر پشت هر حرف قرار دارد، بنابراین این موارد برای بررسی شما فهرست می‌شوند.
  • بررسی حالت‌های hover، فوکوس یا حالت‌های دیگر. اسکن صفحه را همان‌طور که بارگذاری می‌شود می‌بیند؛ این رنگ‌ها را با محاسبه‌گر بررسی کنید.
  • اسکن آیکون‌ها، حاشیه‌ها و فیلدهای فرم صفحه برای WCAG 1.4.11. محاسبه‌گر نتیجه 3:1 را برای هر جفت‌رنگی که وارد کنید نشان می‌دهد.
  • خواندن متنی که بخشی از یک تصویر است، مانند بنری که کلمات در خود تصویر نوشته شده‌اند.
  • تست چیزی بیش از صفحه‌ای که وارد می‌کنید. اسکن رایگان کامل تا پنج صفحه کلیدی را تست می‌کند.

چرا اهمیت دارد

کنتراست پایین رایج‌ترین خطای دسترس‌پذیری در وب است. تحلیل WebAIM در سال 2026 از صفحات اصلی یک میلیون وب‌سایت برتر، در 83.9% آن‌ها متن کم‌کنتراست پیدا کرد، با میانگین 34 مورد در هر صفحه.

خواندن متن کم‌رنگ برای افراد کم‌بینا یا دارای اختلال دید رنگ، و برای هر کسی که زیر نور شدید آفتاب از گوشی استفاده می‌کند، دشوار است. معیار موفقیت 1.4.3 در WCAG 2.2، در سطح AA، حداقل را 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ تعیین می‌کند.

این مشکل یکی از کم‌هزینه‌ترین مشکلات برای رفع هم هست: در بیشتر سایت‌ها چند رنگ محدود قالب عامل تقریباً همه خطاها هستند و تغییر آن‌ها همه صفحات را یک‌جا اصلاح می‌کند.

نحوه خواندن نتایج

نسبت کنتراست
از 1:1 (یک رنگ دو بار) تا 21:1 (سیاه روی سفید). نسبت‌ها به پایین گرد می‌شوند، بنابراین جفت‌رنگی که 4.49:1 نشان می‌دهد در حداقل 4.5:1 رد می‌شود.
متن معمولی، AA (4.5:1)
حداقل برای متن اصلی، لینک‌ها، برچسب‌ها و متن دکمه‌ها بر اساس WCAG 1.4.3.
متن بزرگ، AA (3:1)
برای متن با اندازه دست‌کم 24 پیکسل، یا 18.66 پیکسل به‌صورت پررنگ. WCAG متن بزرگ را 18 پوینت، یا 14 پوینت پررنگ تعریف می‌کند.
AAA (7:1 و 4.5:1)
سطح ارتقایافته در WCAG 1.4.6. برای انطباق با سطح AA لازم نیست، اما به خوانندگان بیشتری کمک می‌کند.
آیکون‌ها، حاشیه‌ها و فیلدهای فرم (3:1)
WCAG 1.4.11 برای بخش‌هایی از کنترل‌ها و گرافیک‌ها که افراد برای استفاده باید ببینند، نسبت 3:1 در برابر رنگ‌های مجاور را الزامی می‌کند.
متن ردشده
هر عنصری که اسکن آن را پایین‌تر از آستانه‌اش اندازه گرفته، با سلکتور، رنگ‌ها، اندازه و نسبت آن. هر کدام را باز کنید تا کد HTML آن و در صورت وجود یک اسکرین‌شات را ببینید.
برای بررسی چشمی
متنی که axe-core نتوانست اندازه بگیرد، همراه با دلیل، مثلاً تصویر یا گرادیانی که پشت آن است.

نحوه رفع رایج‌ترین مشکلات

  • متن خاکستری روی سفید

    #767676 تقریباً روشن‌ترین خاکستری است که روی سفید به 4.5:1 می‌رسد (4.54:1). خاکستری‌های روشن‌تر مانند #999999 (2.84:1) علت رایج خطا در فوترها، کپشن‌ها، متن‌های placeholder و قیمت‌ها هستند.

  • متن سفید روی دکمه‌ای به رنگ برند

    اگر متن سفید روی رنگ برند شما رد می‌شود، پس‌زمینه دکمه را چند درجه تیره‌تر کنید یا از متن تیره استفاده کنید. رنگ‌های hover و فوکوس را هم بررسی کنید، چون اغلب روشن‌تر می‌شوند.

  • متن placeholder در فرم‌ها

    متن placeholder هم متن است و به 4.5:1 نیاز دارد. بهتر از آن، یک برچسب قابل مشاهده بالای فیلد بگذارید تا placeholder تنها راهنما نباشد.

  • متن روی تصاویر و اسلایدرها

    متن را روی یک پس‌زمینه یکدست یا نیمه‌شفاف قرار دهید، یا یک لایه تیره روی تصویر بیفزایید، سپس روشن‌ترین بخش تصویر را که پشت متن قرار دارد بررسی کنید.

  • نشان‌های حراج و متن‌های ریز

    متن در کنترل‌های غیرفعال از 1.4.3 مستثناست، اما نشان‌های حراج، قیمت‌ها و متن‌های ریز حقوقی مستثنا نیستند. این‌ها اغلب کم‌رنگ‌ترین متن در صفحات فروشگاه هستند.

کنتراست رنگ پایین: چرا اهمیت دارد و چگونه آن را در Shopify، WooCommerce و هر سایتی رفع کنیم

پرسش‌هایی درباره این ابزار

WCAG چه نسبت کنتراستی را الزامی می‌کند؟

برای سطح AA، نسبت 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ (معیار موفقیت 1.4.3)، و 3:1 برای اجزای رابط کاربری و گرافیک‌های معنادار (1.4.11). سطح AAA نسبت 7:1 و 4.5:1 را می‌خواهد (1.4.6).

چه متنی بزرگ به حساب می‌آید؟

WCAG متن بزرگ‌مقیاس را دست‌کم 18 پوینت، یا 14 پوینت پررنگ تعریف می‌کند. در پیکسل‌های CSS این حدود 24px، یا 18.66px پررنگ است.

آیا لوگوها باید حداقل کنتراست را رعایت کنند؟

خیر. WCAG 1.4.3 لوگوتایپ‌ها و متنی را که بخشی از لوگو یا نام برند است، و همچنین متن صرفاً تزئینی و متن کنترل‌های غیرفعال را مستثنا می‌کند.

چرا اسکن متن روی تصویر را برای بررسی فهرست می‌کند؟

axe-core رنگ‌های یکدست را اندازه می‌گیرد. وقتی تصویر، گرادیان یا عنصر دیگری پشت متن قرار دارد، نمی‌تواند بفهمد کدام رنگ‌ها کنار هم قرار می‌گیرند، بنابراین به‌جای حدس زدن، عنصر را برای بررسی یک انسان گزارش می‌کند.

آیا به کنتراست سطح AAA نیاز دارم؟

AAA برای انطباق با سطح AA لازم نیست و W3C الزام AAA را برای کل سایت‌ها توصیه نمی‌کند. با این حال، رسیدن به 7:1 برای متن اصلی، هر جا که طراحی شما اجازه دهد، روش خوبی است.

آیا APCA بخشی از WCAG است؟

خیر. APCA روش دیگری برای سنجش کنتراست است که برای WCAG 3 مطرح شده، و WCAG 3 هنوز پیش‌نویس است. انطباق امروز با نسبت WCAG 2 سنجیده می‌شود که همین ابزار محاسبه می‌کند.

منابع

ابزارهای مرتبط

گزارش رفع مشکلات دسترس‌پذیری ($174، یک‌باره) از اسکن رایگان کامل شروع می‌کند و صفحات بیشتر، تغییر لازم برای هر یافته، یک فایل PDF و تست‌های مجدد برای تأیید اصلاحات شما را اضافه می‌کند.

درباره گزارش رفع مشکلات دسترس‌پذیری