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

راهنمای کامل کنتراست رنگ و خوانایی

کنتراست پرتاثیرترین اصلاح دسترسی در وب است — و رایج ترین مورد ناموفق هم هست. متن خاکستری روشن روی پس زمینه های سفید برای طراحان «تمیز» به نظر می رسد و برای میلیون ها بازدیدکننده ناخواناست، از جمله هر کسی بالای چهل سال، هر کسی در نور شدید خورشید، و تقریبا 5% افراد با دید کم. این راهنما استانداردها، ریاضی، و روش اصلاح ناموفقی ها را بدون نابود کردن طراحی توضیح می دهد.

استاندارد WCAG به زبان ساده

WCAG 2.x دو سطح انطباق کنتراست را تعیین می کند. سطح AA (که قوانین به آن اشاره می کنند — از جمله قانون دسترسی اروپا و پرونده های ADA در آمریکا) برای متن معمولی به 4.5:1 و برای متن بزرگ به 3:1 نیاز دارد. سطح AAA (استاندارد طلایی) به ترتیب به 7:1 و 4.5:1 نیاز دارد. لوگوها و متن کاملا تزئینی مستثنی هستند — اما اگر اطلاعاتی برسانند، باید قبول شوند. و توجه: WCAG 3.0 (در پیش نویس) در نهایت مدل جدید APCA را جایگزین نسبت ها می کند، اما نسبت ها امروز هم استاندارد قابل اجرا هستند.

چرا کنتراست این قدر ناموفق می شود

سه مجرم: مد (در گالری های نمونه کار خاکستری بسیار روشن مد هستند) ورنگ های برند با تمام قدرت برای متن استفاده می شوند (نارنجی برند درخشانی که به عنوان دکمه برجسته می شود اما به عنوان متن 12px ناموفق می شود) ومتن روی تصاویر جایی که پس زمینه تغییر می کند — لکه روشنی در تصویر می تواند بی سر و صدا خوانایی را نابود کند. اصلاح تصاویر: روکش تیره نیمه شفاف یا پرده جامد پشت متن، سپس بدترین ناحیه را دوباره آزمایش کنید.

فراتر از نسبت: خوانایی واقعی

نسبت لازم است اما کافی نیست. وزن های نازک قلم (100 تا 300) به کنتراست بیشتری از برآورد فرمول نیاز دارند — برای متن اصلی 400+ را ترجیح دهید. متن بسیار کوچک (زیر 12px) حتی با نسبت های قبول شده هم فشار می آورد. صفحه های براق، نور خورشید و صفحه های ارزان کنتراست عملی را کم می کنند، پس 4.5:1 را مقصد نه، کف بدانید — 7:1 برای متن اصلی برای همه به طور قابل توجهی راحت است، نه فقط برای افراد دارای معلولیت.

اصلاح زیبای ناموفقی ها

از ابتدا دوباره طراحی نکنید. تکان دهید: متن را 10 تا 20% در روشنایی تیره کنید یا به رنگ های پس زمینه شفافیت اضافه کنید — این معمولا برای عبور از حد در حالی که روی برند می مانید کافی است. برای پیوندها، به یاد داشته باشید که فقط رنگ نمی تواند آنها را متمایز کند (زیرخط هم استفاده کنید). برای دکمه های غیر فعال و نگهدارنده ها، کنتراست کم مورد انتظار است — اما مطمئن شوید که دلیل به روش دیگری گفته شود. و پالت نهایی خود را به صورت خاکستری آزمایش کنید: اگر سلسله مراتب خوانا بماند، کنتراست شما کار خود را می کند.

این به چه کسی کمک می کند (اشاره: همه)

بهبودهای دسترسی بسیار فراتر از ذی نفعان نامزد شده کمک می کنند: زیرنویس ها در کافه پر سر و صدا کمک می کنند، کنتراست بالا در نور خورشید کمک می کند، و وضعیت های فوکوس واضح به کاربران قدرتمند صفحه کلید کمک می کنند. تقریبا 15% جمعیت جهان با معلولیتی زندگی می کنند — طراحی برای کنتراست طراحی برای یک ششم مخاطبان شماست، به علاوه هر کسی که روز بدی با صفحه داشته باشد.