نحوه بررسی کنتراست متن آنلاین رایگان برای دسترسی (راهنمای 2026)

ترکیب رنگ زیبا، متن ناخوانا. این یکی از رایج‌ترین اشکالات طراحی در وب است - متن خاکستری روشن روی پس‌زمینه سفید، دکمه‌های پاستلی مدرن با حروف سفید - و افراد واقعی را از کار می‌اندازد: کاربرانی که بینایی ضعیفی دارند، افرادی که کوررنگی دارند یا هرکسی که صفحه‌نمایش گوشی را در نور شدید خورشید دارد. راه حل قابل اندازه گیری است، سلیقه ای نیست. این راهنما قوانین کنتراست WCAG را توضیح می دهد و به شما نشان می دهد که ما رایگان بررسی کنتراست چگونه هر جفت رنگی را آزمایش کنیم، و راه‌های مشخصی برای رفع ترکیبات ناموفق ارائه می‌دهد.

بررسی کننده کنتراست رایگان چه کاری انجام می‌دهد؟

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

قوانین کنتراست WCAG (اعداد واقعی)

دستورالعمل‌های دسترسی به محتوای وب (WCAG) الزامات کنتراست را به عنوان نسبت‌ها تعریف می‌کنند، که در آن 1:1 به معنای عدم کنتراست (رنگ یکنواخت) و 21:1 حداکثر (سیاه روی سفید) است. محدوده‌های مهم عبارتند از:

• 4.5:1 — متن عمومی (WCAG AA). متن اصلی، پاراگراف‌ها، آیتم‌های فهرست و برچسب‌های رابط کاربری باید حداقل نسبت ابعاد 4.5:1 را نسبت به پس‌زمینه خود داشته باشند. این اساس متن قابل دسترس است.
• 3:1 — متن بزرگ (WCAG AA). متنی که حداقل 18pt (24px) یا 14pt (18.66px) پررنگ باشد، فقط به 3:1 نیاز دارد — حروف بزرگ طبیعتا راحت‌تر خوانده می‌شوند.
• 7:1 — متن عمومی (WCAG AAA). هر چه سطح سخت‌تر باشد، بهتر است. تا جایی که می‌توانید، برای محتوای مهم، آن را هدف قرار دهید.
• 3:1 - اجزای رابط کاربری. نمادها، مرزهای فرم و نشانگرهای فوکوس باید حداقل 3:1 بر خلاف رنگ های اطراف باشند تا کاربران بتوانند عناصر تعاملی را درک کنند.

توجه داشته باشید که این قوانین چه مواردی را پوشش نمی‌دهند: آن‌ها کنتراست نور در مقابل تاریکی (درخشندگی) را اندازه‌گیری می‌کنند، نه تفاوت رنگ. متن قرمز روی پس‌زمینه سبز می‌تواند از نظر عددی کنتراست بالایی داشته باشد و همچنان برای کاربران کوررنگی قرمز-سبز غیرقابل خواندن باشد - به همین دلیل است که هرگز نباید برای انتقال معنا تنها به رنگ تکیه کنید.

گام به گام: جفت رنگ خود را تست کنید

1. بررسی کنتراست باز کردن بدون ثبت نام، در هر مرورگر مدرنی کار می کند.
2. رنگ متن (پیش‌زمینه) خود را وارد کنید. از کد HEX یا RGB رنگ متن واقعی طرح خود استفاده کنید.
3. رنگ پس زمینه خود را وارد کنید. از پس‌زمینه واقعی که متن روی آن قرار دارد استفاده کنید - نه پس‌زمینه صفحه سه لایه پایین، پس‌زمینه بلافاصله پشت متن.
4. نسبت و تصمیم را بخوانید. این ابزار نسبت کنتراست محاسبه شده را نشان می دهد و اینکه آیا جفت AA برای متن معمولی، AA برای متن بزرگ و AAA می دهد یا خیر.
5. هر ترکیب واقعی را آزمایش کنید. متن اصلی در پس‌زمینه صفحه، متن دکمه روی رنگ دکمه، رنگ پیوند در پس‌زمینه، متن مکان‌نما در ورودی‌ها - هر جفت به آزمایش خاص خود نیاز دارد.
6. رفع خطاها (به پایین مراجعه کنید) و دوباره آزمایش کنید تا جفت عبور کند.

چگونه یک ترکیب ناموفق را اصلاح کنیم

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

• متن را تیره‌تر یا پس‌زمینه را روشن‌تر کنید. مطمئن ترین راه حل. یک قدم عمیق تر/سبک تر رفتن اغلب از خط 4.5:1 عبور می کند بدون اینکه شخصیت طرح را تغییر دهد. برای پیدا کردن سایه تنظیم شده انتخاب رنگ استفاده کنید.
• وزن یا اندازه فونت را افزایش دهید. متن‌های پررنگ یا تیترهای بزرگ، واجد شرایط نسبت متن بزرگ 3:1 هستند. این یک نقص نیست، بلکه یک استراتژی درست است - متن‌های بزرگ‌تر و پررنگ‌تر، در واقع خواناتر هستند.
• ورق پخت را اضافه کنید. متن سفید روی تصویر خراب می شود؟ ابتدا آن را روی یک پوشش تیره نیمه شفاف قرار دهید، سپس متن را با رنگ همپوشانی بررسی کنید.
• رنگ متن را تغییر دهید. گاهی اوقات این جفت‌سازی برعکس عمل می‌کند - متن تیره روی رنگ روشن برند به جای متن روشن روی آن.
• جفت‌های با کنتراست کم را فقط برای دکوراسیون رزرو کنید. سرتیترهای تزئینی بزرگ، وضعیت‌های غیرفعال و واترمارک‌ها می‌توانند از ترکیب‌های نرم استفاده کنند - تا زمانی که هیچ اطلاعات ضروری به خواندن آنها وابسته نباشد.

مظنونین همیشگی: ترکیب‌هایی که تقریباً همیشه شکست می‌خورند

• متن خاکستری روشن روی زمینه سفید (#999 و روشن‌تر) — مجرم کلاسیک، به خصوص در متن ثانویه و جایگزین‌ها.
• متن سفید روی پاستل — دکمه‌های صورتی روشن، آبی آسمانی یا نعنایی با برچسب‌های سفید معمولاً نسبت رنگ پایین‌تری از 4.5:1 دارند.
• متن رنگی برند روی پس‌زمینه رنگی برند — دو رنگ برند که برای قرار گرفتن در کنار هم طراحی شده‌اند، اغلب اختلاف نوری که متن به آن نیاز دارد را ندارند.
• متن روی تصاویر — روشنایی یک تصویر در ناحیه‌ی آن متفاوت است، بنابراین متنی که در یک ناحیه‌ی تاریک به خوبی کار می‌کند، در یک ناحیه‌ی روشن با شکست مواجه می‌شود. پوشش‌ها یا سایه‌های متن، راه‌حل‌های استاندارد هستند.
• متن جای جای در فیلدهای فرم — مرورگرها به طور پیش‌فرض متغیرهایی را به رنگ خاکستری کدر نمایش می‌دهند؛ آنها را عمداً با رنگی قابل قبول استایل‌دهی کنید.

تضاد لازم است اما کافی نیست.

قبولی در بررسی نسبت‌ها، اساس کار است، نه سقف آن. دسترسی واقعی همچنین به این معناست: اندازه فونت کافی، فاصله بین خطوط که خطوط را به هم فشرده نمی کند، هرگز اطلاعات را تنها با رنگ منتقل نمی کند (این وضعیت قرمز/سبز را با یک نماد یا برچسب مرتبط کنید)، نشانگرهای فوکوس قابل مشاهده برای کاربران صفحه کلید، و آزمایش طراحی خود در مقیاس خاکستری برای دریافت معنای وابسته به رنگ. بررسی‌کننده کنتراست بخش قابل اندازه‌گیری را در عرض چند ثانیه انجام می‌دهد؛ بقیه کار به نظم و انضباط طراحی بستگی دارد.

بررسی کنتراست را به گردش کار خود اضافه کنید

1. انتخاب رنگ رنگ های برند را از یا انتخاب کنید پالت رنگ تصادفی با ابزار ایده تولید کنید.
2. قبل از نهایی کردن هر جفت متن/پس زمینه، آن را انجام دهید بررسی کنتراست خرجش کن.
3. اگر یک جفت ناموفق بود، با یک جمع‌کننده تنظیم کنید و دوباره بررسی کنید - دو دقیقه برای هر جفت.
4. همانطور که مورد نیاز است تبدیل HEX به RGB تبدیل فرمت‌ها از (مثلاً برای ایجاد پوشش‌های RGBA).
5. بعد از هر طراحی مجدد دوباره بررسی کنید - یک تغییر رنگ "کوچک" می‌تواند بی‌سروصدا نسبت قبولی را بشکند.

سوالات متداول

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

بله - بررسی کنتراست WCAG نامحدود، بدون نیاز به ثبت نام.

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

حداقل 4.5:1 در مقایسه با پیشینه آن برای WCAG AA، یک خط پایه به طور گسترده پذیرفته شده است. 7:1 با سطح سختگیرانه AAA مطابقت دارد.

آیا الزامات متفاوتی برای تیترها وجود دارد؟

متن بزرگ — 18pt/24px و بزرگتر، یا 14pt/18.66px پررنگ و بزرگتر — فقط 3:1 در سطح AA می خواهد.

جفت من از مهره عبور می‌کند اما هنوز خواندن آن دشوار به نظر می‌رسد - چرا؟

این نسبت فقط کنتراست نور را اندازه‌گیری می‌کند. فونت‌های نازک، اندازه‌های کوچک، پس‌زمینه‌های شلوغ و تفاوت‌های دید رنگی، همگی فراتر از این عدد، بر خوانایی واقعی تأثیر می‌گذارند. نسبت 4.5:1 را حداقل در نظر بگیرید، نه یک هدف.

آیا چکر کوررنگی را در نظر می‌گیرد؟

این ابزار کنتراست نور را اندازه‌گیری می‌کند که مستقل از کوررنگی است - یک ویژگی مفید. اما هرگز از رنگ به تنهایی برای انتقال معنا استفاده نکنید؛ آن را با متن، آیکون‌ها یا الگوها ترکیب کنید.

همین حالا رنگ‌هایتان را بررسی کنید: رایگان بررسی کنتراست · رایگان انتخاب رنگ · رایگان تبدیل HEX به RGB