کنتراست رنگ WCAG برای طراحان

اگر متن شما کنتراست AA WCAG را نداشته باشد، حدود 285 میلیون نفر با اختلال بینایی نمی‌توانند آن را بخوانند. علاوه بر این، از نظر قانونی در اتحادیه اروپا و ایالات متحده در وضعیت شکننده‌ای قرار می‌گیرید. خبر خوب: قانون ساده است.

قانون 4.5:1

متن بدنه باید نسبت کنتراست حداقل 4.5:1 نسبت به پس‌زمینه خود داشته باشد تا WCAG AA را پاس کند. متن بزرگ (24px+ معمولی یا 18px+ پررنگ) حداقل پایین‌تری به میزان 3:1 دارد.

برای انطباق AAA: 7:1 برای بدنه، 4.5:1 برای متن بزرگ.

نحوه محاسبه نسبت کنتراست

WCAG از روشنایی نسبی استفاده می‌کند — هر رنگ را با استفاده از یک فرمول خاص به مقدار روشنایی (0 = سیاه، 1 = سفید) تبدیل کنید، سپس (L1 + 0.05) / (L2 + 0.05) را محاسبه کنید، که در آن L1 رنگ روشن‌تر است.

نیازی به انجام ریاضی نیست — از بررسی‌کننده کنتراست رایگان ما استفاده کنید تا هر دو رنگ را وارد کرده و نسبت را ببینید.

موارد رایج شکست

• خاکستری روشن روی سفید — #999 روی #fff = 2.85 (شکست می‌خورد). #767676 روی #fff = 4.54 (عبور می‌کند).
• سفید روی زرد — تقریباً همیشه شکست می‌خورد. از متن تیره روی زرد استفاده کنید.
• لینک‌های رنگی در متن بدنه — بیشتر لینک‌های آبی روی سفید عبور می‌کنند اما روی خاکستری روشن شکست می‌خورند. پس‌زمینه واقعی اطراف را آزمایش کنید.
• رنگ‌های برند که عالی به نظر می‌رسند — اغلب شکست می‌خورند. یک پس‌زمینه سفید مایل یا متن تیره‌تر اضافه کنید.

انتخاب جفت رنگ‌های قابل دسترس

سه الگوی قابل اعتماد:

1. تیره روی روشن — #1f2937 روی #fff = 14:1 (عالی).
2. سفید روی تیره — #fff روی #1f2937 = 14:1 (عالی).
3. تیره روی رنگ تاکیدی — #1f2937 روی #fbbf24 = 9:1 (عالی برای دکمه‌ها).

فراتر از متن

WCAG 2.1 همچنین برای عناصر غیرمتنی (دکمه‌ها، حلقه‌های فوکوس، حاشیه‌های فرم) به 3:1 نیاز دارد. بررسی‌کننده هر دو را پوشش می‌دهد.

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

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

ابزارهای رایگان ما را امتحان کنید

بیشتر این راهنماها با یک ابزار عملی همراه هستند که می‌توانید همین حالا استفاده کنید — بدون نیاز به ثبت‌نام برای اولین بار:

• تغییر اندازه تصویر — کاهش و افزایش اندازه با دقت پیکسل.
• تبدیل به WebP — فایل‌های 30-50٪ کوچک‌تر از JPG.
• حذف پس‌زمینه — برش یک کلیکی، PNG شفاف.
• تولید کننده فاوآیکون — همه اندازه‌های مرورگر از یک منبع.
• تغییر اندازه شبکه‌های اجتماعی — ابعاد دقیق هر پلتفرم.
• پردازش دسته‌ای — اعمال هر ابزار روی حداکثر 200 تصویر به طور همزمان.

کاتالوگ کامل ابزارها را مرور کنید.