کنتراست رنگ و دسترس‌پذیری در WCAG 2.2: آزمودن کوررنگی در تصاویر دیجیتال

۱. شناخت نقص‌های دید رنگ: پروتانوپیا، دوتانوپیا و تریتانوپیا

ادراک رنگ انسان بر سه سلول مخروطی گیرنده نور ویژه در شبکیه متکی است که به طول‌موج‌های بلند (مخروط‌های L برای قرمز)، متوسط (مخروط‌های M برای سبز) و کوتاه (مخروط‌های S برای آبی) حساس‌اند. نقص دید رنگ زمانی رخ می‌دهد که یک یا چند نوع از این مخروط‌ها از نظر ژنتیکی وجود نداشته باشند، جهش یافته یا از نظر عملکردی آسیب دیده باشند.

پروتانوپیا و پروتانومالی (ضعف قرمز): ناشی از نبود یا نقص مخروط‌های L است؛ افراد مبتلا به پروتانوپیا قرمز را خاکستری تیره یا سیاه مایل به قهوه‌ای می‌بینند. چون طول‌موج‌های قرمز کمترین پاسخ شبکیه را برمی‌انگیزند، قرمزهای روشن بسیار کدر به نظر می‌رسند. در طراحی رابط کاربری، دکمه قرمز زنده «حذف حساب» ممکن است برای کاربر پروتانوپ تقریباً سیاه دیده شود.

دوتانوپیا و دوتانومالی (ضعف سبز): شایع‌ترین نوع کوررنگی که بیش از ۶۰٪ همه موارد CVD را تشکیل می‌دهد. افراد دوتانوپ به دلیل نقص مخروط‌های M در تمایز سبز، زرد، نارنجی و قرمز مشکل دارند. نمودار خطی که «سود» را با سبز و «زیان» را با قرمز نشان می‌دهد، به‌صورت سایه‌های یکسانی از خاکی مایل به زرد دیده می‌شود.

تریتانوپیا و تریتانومالی (کوری آبی-زرد): وضعیتی نادر که حدود ۱ نفر از هر ۱۰٬۰۰۰ نفر را به‌طور برابر در مردان و زنان درگیر می‌کند و ناشی از نقص مخروط‌های S است. افراد تریتانوپ آبی را با سبز و زرد را با بنفش یا صورتی اشتباه می‌گیرند. می‌توانید توازن پالت خود را در همه شرایط فوراً با ابزار سمت کاربر استخراج رنگ‌های غالب ما تحلیل و بررسی کنید.

۲. ریاضیات کنتراست WCAG 2.2: روشنایی نسبی و نسبت‌های کنتراست

رهنمودهای دسترس‌پذیری محتوای وب (WCAG 2.2) کنتراست رنگ را با مدل‌های ذهنی چرخه رنگ انسانی ارزیابی نمی‌کنند. در عوض، این استاندارد دسترس‌پذیری نوری را با فرمول ریاضی سخت‌گیرانه‌ای بر پایه روشنایی نسبی (L) ارزیابی می‌کند که به‌صورت درخشندگی نسبی هر نقطه در فضای رنگی تعریف و برای تیره‌ترین مشکی به ۰ و برای روشن‌ترین سفید به ۱ نرمال‌سازی می‌شود.

فرمول روشنایی نسبی: برای محاسبه روشنایی، مقادیر کانال‌های رنگی sRGB ‏(R، G، B در مقیاس ۰ تا ۲۵۵) ابتدا برای حذف تصحیح گاما خطی می‌شوند. هر کانال بر ۲۵۵ تقسیم می‌شود: اگر C <= 0.04045 باشد، C_lin = C / 12.92؛ در غیر این صورت C_lin = ((C + 0.055) / 1.055) ^ 2.4. سپس روشنایی از طریق فرمول وزن‌دهی نورسنجی انسانی محاسبه می‌شود: 'L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin'. توجه کنید که کانال سبز بیش از ۷۱٪ روشنایی محسوس را تشکیل می‌دهد که بازتاب زیست‌شناسی شبکیه انسان است.

فرمول نسبت کنتراست: نسبت کنتراست میان یک رنگ روشن‌تر (L1) و یک رنگ تیره‌تر (L2) چنین تعریف می‌شود: '(L1 + 0.05) / (L2 + 0.05)'. این نسبتی از 1:1 ‏(رنگ‌های یکسان، کنتراست صفر) تا 21:1 ‏(مشکی خالص روی سفید خالص) به دست می‌دهد.

۳. آستانه‌ها: اهداف انطباق WCAG AA ‏(4.5:1) در برابر AAA ‏(7:1)

WCAG 2.2 انطباق را در سه رده پیش‌رونده دسته‌بندی می‌کند: سطح A ‏(حداقل)، سطح AA ‏(استاندارد حقوقی جهانی برای وب‌سایت‌های سازمانی و درگاه‌های دولتی) و سطح AAA ‏(استاندارد طلایی برای محیط‌هایی با دسترس‌پذیری بالا مانند نرم‌افزارهای پزشکی و رابط‌های کمکی).

الزامات سطح AA: برای متن استاندارد بدنه (کوچک‌تر از فونت معمولی ۱۸pt یا فونت پررنگ ۱۴pt)، نسبت کنتراست میان متن پیش‌زمینه و پس‌زمینه آن باید دست‌کم 4.5:1 باشد. برای متن بزرگ (دست‌کم ۱۸pt یا ۱۴pt پررنگ) و اجزای گرافیکی ضروری رابط کاربری (مانند حاشیه‌های ورودی، کلیدهای تغییر وضعیت و نمادهای نمودار) آستانه به 3:1 کاهش می‌یابد.

الزامات سطح AAA: برای حداکثر خوانایی زیر نور شدید خورشید، خیرگی یا نقص بینایی شدید، سطح AAA نسبت کنتراست دست‌کم 7:1 برای متن معمولی بدنه و 4.5:1 برای متن بزرگ را می‌طلبد. اگر گرافیک‌های وب یا تصاویر بنر شما زیر این آستانه‌های ریاضی باشند، می‌توانید کنتراست میان‌تن‌ها و سایه‌ها را با ابزار سمت کاربر تنظیم کنتراست ما به‌طور پویا افزایش دهید.

۴. دالتونیزاسیون: الگوریتم پشت اصلاح بی‌درنگ کوررنگی

ابزارهای نرم‌افزاری مدرن چگونه کوررنگی را در گرافیک‌های دیجیتال شبیه‌سازی و اصلاح می‌کنند؟ این فرایند بر یک تبدیل ریاضی پیشرفته تصویر به نام «دالتونیزاسیون» (Daltonization) متکی است که نخستین بار توسط پژوهشگران Brettel، ‏Viénot و Mollon ‏(۱۹۹۷) صورت‌بندی و توسط Machado و همکاران (۲۰۰۹) پالایش شد.

مرحله ۱: تبدیل پاسخ مخروط‌های LMS: الگوریتم ابتدا مقادیر پیکسلی sRGB را به فضای رنگی فیزیولوژیک LMS تبدیل می‌کند که نرخ جذب فیزیکی فوتون توسط مخروط‌های بلند، متوسط و کوتاه شبکیه را مدل‌سازی می‌کند: '[L, M, S]^T = M_sRGB_to_LMS * [R, G, B]^T'. برای پروتانوپ‌ها، مقدار L مفقود به‌صورت تصویری در امتداد خط اشتباه دوفامی خنثی درون‌یابی می‌شود.

مرحله ۲: جابه‌جایی و ترکیب بردار خطا: برای اصلاح تصویر برای کاربر کوررنگ (اصلاح دالتونیزاسیون)، تفاوت میان تصویر LMS اصلی و تصویر شبیه‌سازی‌شده دوفامی نشان‌دهنده اطلاعات بصری ازدست‌رفته است. الگوریتم دالتونیزاسیون این بردار خطای ازدست‌رفته را به کانال‌های رنگی باقی‌مانده منتقل می‌کند — کنتراست قرمز ازدست‌رفته را به کنتراست آبی و روشنایی قابل تشخیص تبدیل می‌کند. می‌توانید مقادیر روشنایی پیکسل‌ها را با ابزار انتخابگر رنگ قطره‌چکان ما بررسی کنید.

۵. قواعد عملی طراحی UI/UX: فراتر از اطلاعات صرفاً رنگی

معیار موفقیت WCAG 1.4.1 ‏(استفاده از رنگ) اکیداً تصریح می‌کند: رنگ نباید تنها وسیله بصری برای انتقال اطلاعات، نشان دادن یک اقدام، درخواست پاسخ یا متمایز کردن یک عنصر بصری باشد. پذیرش الگوهای طراحی فراگیر تضمین می‌کند اپلیکیشن شما صرف نظر از توانایی بینایی، شهودی باقی بماند.

قاعده ۱: رنگ را با گلیف‌ها و برچسب‌های متنی معنادار همراه کنید: هرگز فیلد خطا را فقط با حاشیه قرمز ورودی نشان ندهید. همیشه حاشیه را با یک نماد هشدار صریح و یک پیام متنی توصیفی همراه کنید («رمز عبور باید شامل یک عدد باشد»). به همین ترتیب، در نشان‌های وضعیت فرم، رنگ را با وضعیت متنی روشن ترکیب کنید: «فعال»، «در انتظار» یا «ردشده».

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

قاعده ۳: طراحی‌ها را در خاکستری تک‌رنگ بیازمایید: مطمئن‌ترین آزمون برای دسترس‌پذیری طراحی، تبدیل کل چیدمان به سیاه‌وسفید است. اگر نمودارها، دکمه‌ها و بنرهای اطلاع‌رسانی شما در خاکستری خالص ۱۰۰٪ قابل فهم باقی بمانند، طراحی شما از نظر ریاضی در برابر همه انواع کوررنگی مصون است. می‌توانید هر دارایی را فوراً با ابزار سمت کاربر تبدیل به سیاه‌وسفید ما به سیاه‌وسفید تبدیل کنید.

۶. ممیزی دسترس‌پذیری سمت کاربر در برابر خطرات آپلود به سرور

ممیزی ماکت‌های اختصاصی محصول، درگاه‌های محرمانه سلامت و طراحی‌های منتشرنشده رابط کاربری بانکی با ابزارهای آنلاین دسترس‌پذیری، اگر آن ابزارها تصاویر خام را برای پردازش در سرورهای ابری آپلود کنند، اغلب آسیب‌پذیری‌های امنیتی جدی ایجاد می‌کند.

2run.tools با اجرای ۱۰۰٪ تبدیل‌های ماتریسی، شبیه‌سازی‌های کوررنگی و محاسبات روشنایی پیکسل کاملاً درون محیط اجرای خصوصی JavaScript مرورگر شما از طریق HTML5 Canvas و TypedArrayها، حریم خصوصی کامل را تضمین می‌کند. فایل‌های طراحی شما هرگز رایانه‌تان را ترک نمی‌کنند و این انطباق امنیتی سازمانی را ممکن می‌سازد.