بررسی کنتراست رنگ
نسبت کنتراست WCAG هر ترکیب متن و پسزمینه را اندازه بگیرید و اگر کم بود، طیفی از همان رنگ پیدا کنید که از آزمون بگذرد.
سنجش کنتراست رنگ با معیار WCAG
متن کم‌کنتراست یکی از رایج‌ترین خطاهای دسترس‌پذیری در وب است. این مشکل برای افراد کم‌بینا و کسانی که دید رنگی متفاوتی دارند دردسر می‌سازد، اما برای هر کسی هم که زیر نور آفتاب با گوشی چیزی می‌خواند. رهنمودهای دسترس‌پذیری محتوای وب (WCAG) «به‌اندازه کافی خوانا» را به یک عدد تبدیل می‌کنند: نسبت کنتراست.
این صفحه مبدل رنگ را روی زبانه کنتراست باز می‌کند.
آستانه‌های WCAG در یک نگاه
| چه چیزی را می‌سنجید | AA | AAA |
|---|---|---|
| متن اصلی و برچسب‌ها | ۴٫۵ به ۱ | ۷ به ۱ |
| متن بزرگ (۲۴ پیکسل، یا ۱۸٫۷ پیکسل ضخیم) | ۳ به ۱ | ۴٫۵ به ۱ |
| آیکونها، حاشیه فیلدها، حلقه‌های فوکوس و اجزای نمودار | ۳ به ۱ | — |
AA سطحی است که بیشتر قوانین و ضوابط خرید و تدارکات به آن ارجاع می‌دهند. AAA سخت‌تر است و برای متن‌های طولانی ارزش هدف‌گذاری دارد، اما انتظار نمی‌رود همه عناصر یک سایت به آن برسند.
اصلاح رنگی که رد میشود
وقتی ترکیبی کم می‌آورد، ابزار نزدیک‌ترین طیف از همان فام را پیشنهاد می‌کند که روی پسزمینه شما به ۴٫۵ به ۱ می‌رسد؛ به این ترتیب رنگ برند قابل تشخیص می‌ماند و متن هم خوانا میشود. راه‌حل‌های رایج این‌هاست: تیره کردن رنگ متن به اندازه ۱۰ تا ۲۰ واحد روشنایی، یا نگه داشتن رنگ برند برای تیترهای بزرگ و دکمه‌ها و استفاده از نسخه‌ای تیرهتر برای متن‌های کوچک.
اشتباه‌های رایج
- متن placeholder خاکستری که شیک به نظر می‌رسد اما بسیار پایین‌تر از ۴٫۵ به ۱ است.
- متن سفید روی رنگهای روشن برند مثل نارنجی، زرد یا سبز روشن.
- بررسی فقط تم روشن: حالت تاریک هم بررسی جداگانه لازم دارد.
- متن روی تصویر: کنتراست را با روشن‌ترین ناحیه‌ای که متن ممکن است رویش بنشیند بسنجید، یا یک لایه تیره نیمهشفاف (scrim) زیر متن اضافه کنید.
فرمول پشت نسبت کنتراست
هر کانال sRGB به بازه ۰ تا ۱ برده و خطی‌سازی میشود و سپس به شکل 0.2126 R + 0.7152 G + 0.0722 B ترکیب میشود تا درخشندگی نسبی به دست آید. نسبت برابر است با (L1 + 0.05) / (L2 + 0.05) که در آن L1 رنگ روشنتر است. سبز بیشترین وزن را دارد، چون چشم به آن حساس‌تر است؛ به همین دلیل زرد روی سفید این‌قدر بد رد میشود. برای آماده کردن رنگ‌ها پیش از آزمون، آن‌ها را با تبدیل HEX به RGB تبدیل کنید یا روشنایی‌شان را با تبدیل HEX به HSL تنظیم کنید.