نحوه برآورده کردن الزامات کنتراست رنگ WCAG قبل از صادرات PDF

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

شما معمولاً می توانید به راحتی این الزامات را در یک سند ساده با متن روی یک پس زمینه جامد برآورده کنید. زمانی که یک PDF شامل تصاویر، گرادیان ها، نمودارها، جعبه های عنوان، رنگ های برند و سایر عناصر طراحی باشد، دشوارتر می شود، زیرا هر ترکیبی از متن و پس زمینه باید نسبت کنتراست لازم را داشته باشد.

در این مقاله، الزامات کنتراست رنگ WCAG را توضیح می‌دهم، جایی که مشکلات کنتراست معمولاً در آن‌ها رخ می‌دهد، و نحوه رفع آنها قبل از صادرات فایل PDF.

یک تماس رزرو کنید

الزامات WCAG برای کنتراست رنگ برای متن چیست؟

معیار موفقیت WCAG 1.4.3: کنتراست (حداقل) به حداقل نسبت کنتراست رنگ 4.5:1 نیاز دارد تا متن معمولی به سطح AA برسد. این هم برای متن ساده و هم برای تصاویر نوشتاری (متنی که در داخل یک تصویر ظاهر می‌شود، نه به عنوان متن قابل ویرایش، مانند متنی که در یک بنر یا گرافیک قرار داده شده است) صدق می‌کند.

متن بزرگ (حداقل 18 یا 14 نقطه و پررنگ) حداقل نیاز کمتری 3:1 دارد.

برای سطح AAA، الزامات معیار موفقیت WCAG 1.4.6: کنتراست (بهبود) سختگیرانه تر است:

• 7:1 برای متن معمولی
• 4.5:1 برای متن بزرگ

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

چه زمانی الزامات کنتراست متن WCAG اعمال نمی شود؟

WCAG حداقل نسبت کنتراست متن را برای:

• لوگوها و نام های تجاری که در آن متن بخشی از لوگو است
• متنی کاملا تزئینی که هیچ اطلاعاتی را منتقل نمی کند
• متن در یک مؤلفه رابط کاربری غیرفعال
• متنی که برای کسی قابل مشاهده نیست
• متنی که به عنوان بخشی از یک تصویر حاوی محتوای بصری مهم دیگر، مانند متن روی یک علامت دنیای واقعی در عکس ظاهر می‌شود.

متن بزرگ نیز از این قاعده مستثنی نیست. هنوز باید الزامات کنتراست را برآورده کند، اما حداقل نسبت کمتر از متن معمولی است.

مرتبط: WCAG 2.2 در مقابل WCAG 3.0 برای دسترسی به PDF

تفاوت بین WCAG AA و AAA چیست؟

WCAG دارای سه سطح انطباق است: A، AA، و AAA.

سطح AA استانداردی است که اکثر سازمان ها به دنبال آن هستند. این الزامات دسترسی را پوشش می دهد که عموماً برای اکثر وب سایت ها، برنامه ها و اسناد دیجیتالی ضروری در نظر گرفته می شود تا برای افراد دارای معلولیت قابل استفاده باشد. در عمل، وقتی تیم‌ها می‌گویند که باید سندی را «مطابق با WCAG» بسازند، معمولاً سطح AA را هدف می‌گیرند، مگر اینکه یک الزام سخت‌گیرانه‌تر مشخص شود.

سطح AAA بالاترین سطح انطباق است. علاوه بر سطح A و AA، الزامات دقیق تری را اضافه می کند، از جمله نسبت کنتراست رنگ بالاتر. برخی از سازمان‌ها ممکن است AAA را برای محتوا یا مخاطبان خاص انتخاب کنند، اما WCAG نیاز به AAA برای کل سایت یا سند را توصیه نمی‌کند، زیرا برخی از محتواها نمی‌توانند به طور واقع بینانه هر معیار AAA را برآورده کنند.

بنابراین برای اکثر کارهای دسترسی به PDF، AA خط پایه ای است که باید پوشش دهید، در حالی که AAA استاندارد بالاتری است که ممکن است در موارد خاص آن را انتخاب کنید یا نیاز به رعایت آن داشته باشید.

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

WCAG یک معیار موفقیت جداگانه دارد 1.4.11: کنتراست بدون متن برای عناصر گرافیکی که افراد برای درک محتوا به آن نیاز دارند. این عناصر حداقل به نسبت کنتراست نیاز دارند 3:1 در برابر رنگ های مجاوراین می تواند شامل خطوط نمودار، نمادها، عناصر نمودار و کنترل های رابط باشد.

به عنوان مثال، اگر از خطوط رنگی در نمودار استفاده می کنید، هر خط باید حداقل کنتراست 3:1 با پس زمینه نمودار داشته باشد، زمانی که خوانندگان برای درک داده ها به آن خطوط نیاز دارند. خطوط لزوماً نیازی به کنتراست 3:1 با یکدیگر ندارند.

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

هر متنی در نمودار، مانند برچسب‌های داده، برچسب‌های محور یا افسانه‌ها، همچنان از الزامات کنتراست متن معمولی 4.5:1 برای متن معمولی یا 3:1 برای متن در سطح AA بزرگ پیروی می‌کند.

مرتبط: پالت های دوستدار کوررنگ: چرا و نحوه استفاده در طراحی

نحوه بررسی کنتراست رنگ WCAG قبل از صادرات PDF

قبل از صادرات PDF، سند را پیش‌نمایش کنید و هر ترکیب رنگ پیش‌زمینه و پس‌زمینه را با نسبت WCAG که باید برآورده کنید بررسی کنید.

می‌توانید از یک کنترل‌کننده کنتراست رنگ رایگان برای بررسی نسبت بین دو رنگ استفاده کنید و متوجه شوید که آیا آنها الزامات AA یا AAA را برآورده می‌کنند.

مرحله 1: متن و پس زمینه پشت آن را شناسایی کنید

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

در اینجا مناطق اصلی ارزش بررسی نسبت کنتراست رنگ PDF را دارند.

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

تصاویر و گرادیان ها نیاز به توجه بیشتری دارند زیرا پس زمینه ثابت نیست. متن ممکن است در یک قسمت از تصویر کنتراست کافی داشته باشد، اما چند پیکسل کمتر از نسبت مورد نیاز است.

مرحله 2: جفت رنگ را با یک کنترل کننده کنتراست WCAG بررسی کنید

هنگامی که می دانید کدام رنگ های پیش زمینه و پس زمینه را باید آزمایش کنید، آنها را در بررسی کنتراست رنگ وارد کنید. اکثر ابزارها به شما امکان می دهند دو رنگ را به عنوان کد HEX اضافه کنید و نسبت کنتراست حاصل را به شما نشان دهند.

Venngage یک بررسی کنتراست رنگ رایگان برای بررسی نسبت کنتراست رنگ ارائه می دهد.

کنتراست رنگ را اکنون بررسی کنید

می توانید متن #FFFFFF را در پس زمینه #5267A3 بررسی کنید. بررسی به شما می گوید که آیا این ترکیب نسبت مورد نیاز برای متن معمولی، متن بزرگ، AA یا AAA را برآورده می کند.

مرحله 3: هر ترکیب رنگ استفاده شده در سند را بررسی کنید

گذراندن یک بار بررسی کنتراست به این معنی نیست که رنگ متن یکسان در همه جا کار می کند.

متن آبی تیره ممکن است شرایط 4.5:1 را در رنگ سفید برآورده کند، اما در صورت استفاده از آن در کارت آبی متوسط ناموفق است. هنگامی که از متن سفید در چندین رنگ برند استفاده مجدد می کنید یا همان سبک حروف را روی پس زمینه های مختلف قرار می دهید، همین امر صادق است.

برخی از ترکیب ها به ویژه ارزش بررسی دارند، زیرا اغلب به حداقل کنتراست مورد نیاز نزدیک می شوند:

اگر از همان فیلد توضیحات اضافی، سبک شرح یا قالب نمودار چندین بار استفاده می کنید، لازم نیست هر بار از ابتدا شروع کنید. هنگامی که متوجه شدید که یک جفت رنگ انجام می شود، می توانید از همان ترکیب تایید شده به طور مداوم در سراسر سند استفاده کنید.

چگونه می توانم ترکیب رنگ هایی را که کنتراست WCAG را ندارند برطرف کنم؟

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

به عنوان مثال، اگر متن خاکستری روشن روی سفید ناموفق بود، از خاکستری تیره استفاده کنید. اگر می خواهید رنگ متن را حفظ کنید، به جای آن پس زمینه را تغییر دهید.

شما همچنین می توانید در همان خانواده رنگ بمانید. یک آبی متوسط ​​که کنتراست کافی برای متن سفید ایجاد نمی کند، ممکن است فقط چند درجه تیره تر باشد. یا ممکن است متوجه شوید که تغییر به متن تیره بهتر از تغییر پس‌زمینه است.

بعد از انجام تغییر دوباره ترکیب جدید را بررسی کنید. سایه تیره‌تر یا روشن‌تر ممکن است بهتر به نظر برسد، اما همچنان باید مطمئن شوید که با نسبتی که مد نظر شماست مطابقت داشته باشد.

مراقب کدورت هم باشید. کاهش شفافیت متن، رنگ نهایی ظاهر شده در پس زمینه را تغییر می دهد. ممکن است همچنان به اندازه کافی برای شما متفاوت به نظر برسد، اما این بدان معنا نیست که از کنتراست WCAG عبور می کند.

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

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

این به شما کمک می‌کند تا به‌جای آزمایش و آزمایش مجدد چندین ترکیب رنگ، رنگ‌های متضاد را یک‌باره بیابید تا زمانی که یکی را پیدا کنید که با نسبت مورد نیازتان مطابقت داشته باشد.

نحوه ایجاد کنتراست رنگ برای متن روی تصاویر

تصحیح نوشتار روی تصویر سخت‌تر است، زیرا شما با یک رنگ پس‌زمینه ثابت کار نمی‌کنید.

متن سفید می تواند کنتراست کافی در قسمت تاریک یک تصویر داشته باشد و زمانی که همان تصویر روشن تر می شود از کار بیفتد. یک گرادیان می تواند همین مشکل را ایجاد کند.

ساده ترین راه حل این است که به متن پس زمینه منسجم تری بدهید.

به عنوان مثال، می توانید یک را اضافه کنید کادر تک رنگ پشت متن. این به شما یک رنگ پس زمینه برای بررسی می دهد و تغییرات را از تصویر حذف می کند.

اگر می‌خواهید تعداد بیشتری از تصویر قابل مشاهده باشد، a اضافه کنید بوم یا روکش در عوض یک پوشش تیره در پشت متن سفید یا یک پوشش روشن در پشت متن تیره می تواند بدون پوشاندن کامل تصویر، جداسازی کافی ایجاد کند.

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

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

برای برخی از تصاویر، یک یک طرح کلی یا هاله ای در اطراف متن همچنین می تواند به ایجاد یک لبه ثابت بین متن و پس زمینه در حال تغییر کمک کند. W3C این را به عنوان یکی از راه‌های حفظ کنتراست کافی در هنگام تغییر پس‌زمینه در نظر می‌گیرد.

افزایش اندازه یا وزن متن می تواند خوانایی را بهبود بخشد، اما این را به عنوان یک راه حل اصلی تلقی نکنید. متن همچنان باید کنتراست مورد نیاز برای اندازه آن را برآورده کند.

نحوه ایجاد کنتراست رنگ در نمودارها و اینفوگرافیک ها

برای نمودارها و اینفوگرافیک ها، الزامات کنتراست متن تغییر نمی کند. آنچه شما همچنین باید بررسی کنید عبارتند از خطوط، اشکال، رنگ ها و مرزهایی که افراد برای درک داده ها به آنها تکیه می کنند.

در اینجا الزامات WCAG برای کنتراست رنگ برای نمودارها و اینفوگرافیک ها آمده است:

متن نمودار را بررسی کنید

عناوین نمودار، برچسب‌ها، افسانه‌ها، مقادیر و حاشیه‌نویسی‌های شما از قوانین کنتراست مشابهی مانند هر متن دیگری در سند پیروی می‌کنند.

چیزی که باید با دقت بیشتری تماشا کنید، متن حمایتی کوچکتر است. برچسب‌های محور، خطوط منبع و حاشیه‌نویسی اغلب رنگ روشن‌تری دارند تا با داده‌ها رقابت نکنند. اگر آنها را خیلی سبک کنید، به راحتی می توانند کمتر از نسبت کنتراست لازم باشند.

لازم نیست هر برچسبی را سیاه کنید. از سایه تیره‌تری استفاده کنید که تغییر می‌کند و به جای آن سلسله مراتب را از طریق اندازه، وزن و مکان فونت حفظ کنید.

هنگامی که نمودار را به عنوان یک تصویر صادر می کنید یا آن را به PDF اضافه می کنید، این نیز اعمال می شود. متن همچنان باید همان شرایط کنتراست را داشته باشد.

خطوط نمودار و سایر تصاویر مهم را بررسی کنید

WCAG همچنین یک قانون جداگانه برای تضاد غیر متنی دارد.

اگر افراد برای درک اطلاعات به یک عنصر بصری نیاز دارند، معمولاً حداقل به یک کنتراست 3:1 با رنگ های مجاور نیاز دارند.

این ممکن است شامل موارد زیر باشد:

• خطوط روی نمودار
• میله ها و برش های پای
• آیکون های معنی دار
• فرم های نموداری
• کنترل ها
• محدودیت ها یا مرزهای لازم برای درک تصویری

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

می توانید با استفاده از رنگ زرد تیره تر که هنوز با بقیه پالت کار می کند، آن را برطرف کنید.

اگر افراد برای درک داده ها به عناصر تزئینی مانند شبکه پس زمینه نیاز ندارند، نیازی به مطابقت 3:1 ندارند.

تشخیص رنگ های مجاور را آسان تر کنید

همچنین باید مناطقی را که رنگ‌ها دقیقاً در کنار یکدیگر قرار دارند، مانند برش‌های پای، میله‌های روی هم، نقشه‌های درختی یا مناطق روی نقشه بررسی کنید.

اگر خوانندگان برای درک داده ها نیاز به دیدن مرز بین این مناطق دارند، اطمینان حاصل کنید که جداسازی واضح است.

فرض کنید دو برش پاستل در نمودار دایره ای با یکدیگر ترکیب می شوند. لازم نیست کل پالت را تغییر دهید. افزودن یک حاشیه متضاد بین برش ها می تواند نمایاندن حاشیه را بسیار آسان تر کند.

اگر برچسب‌ها و مقادیر از قبل اطلاعات یکسانی را به هم منتقل می‌کنند، ممکن است مناطق رنگی همیشه مجبور نباشند این کار را به تنهایی انجام دهند. نکته کلیدی این است که آیا خوانندگان برای درک داده ها به مرز بصری نیاز دارند یا خیر.

فقط به رنگ تکیه نکنید

یک نمودار می تواند هر کنترل کنتراست را انجام دهد و همچنان خواندن آن دشوار باشد. اگر تنها راه تشخیص دو سری داده با رنگ است، افراد مبتلا به کوررنگی ممکن است نتوانند نمودار شما را بخوانند.

WCAG این موضوع را در قانون جداگانه ای به نام استفاده از رنگ پوشش می دهد.

برای رفع آن، به خوانندگان راه دیگری برای تشخیص داده ها بدهید:

• هر ردیف، نوار یا برش را مستقیماً برچسب بزنید
• الگوها یا بافت ها را به قسمت های پر شده اضافه کنید
• از سبک های مختلف خطوط مانند یکپارچه و خط چین استفاده کنید
• نشانگرهای مختلف مانند دایره و مربع را به نقاط داده اضافه کنید

برچسب‌های مستقیم همچنین خواندن نمودار شما را راحت‌تر از دیگران می‌کنند. اگر هر تکه یا نوار برچسب و ارزش خود را نشان دهد، خوانندگان برای درک داده ها مجبور نیستند رنگ ها را با یک افسانه مطابقت دهند.

چگونه Venngage به شما کمک می کند قبل از صادرات کنتراست رنگ WCAG را برآورده کنید

بررسی کنتراست دستی زمانی قابل کنترل است که فقط یک یا دو ترکیب رنگ داشته باشید. در یک گزارش، ارائه یا اینفوگرافیک با پس‌زمینه‌های متعدد، نمودارها، پیام‌ها و رنگ‌های برند بسیار وقت‌گیرتر می‌شود. هر ترکیب جدید به معنای بررسی نسبت، تنظیم رنگ و آزمایش مجدد است.

Venngage این فرآیند را وارد ویرایشگر می‌کند. دارای یک کنترل کننده کنتراست زمان واقعی است که به تنظیم کنتراست رنگ در هنگام انتخاب رنگ کمک می کند.

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

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

فقط روی نمودار کلیک کنید و به تنظیمات نمودار > رنگ نمودار بروید. می توانید ببینید رنگ نمودار کنتراست کافی با پس زمینه دارد یا خیر.

پس از آماده شدن طرح، کل سند را با چک کننده دسترسی Venngage دوباره بررسی کنید. اگر نسبت کنتراست در هر جایی از طراحی کافی نباشد، بررسی کننده مشکل را برجسته می کند تا بتوانید قبل از صادرات آن را اصلاح کنید.

برای اسناد تکراری، می‌توانید از همان ابتدا با قالب‌های در دسترس، فرآیند را آسان‌تر کنید. ترکیب رنگ و متن قبلاً با در نظر گرفتن قابلیت دسترسی طراحی شده‌اند، بنابراین لازم نیست هر گزارش، ارائه یا اینفوگرافیک را از ابتدا ایجاد کنید. می‌توانید محتوا، نام تجاری و رنگ‌ها را سفارشی کنید، سپس بررسی‌های داخلی را مجدداً اجرا کنید تا مطمئن شوید که تغییرات شما همچنان کنتراست لازم را دارد.

قبل از صادرات طرح خود از شبیه ساز بصری Venngage به عنوان آخرین بررسی استفاده کنید. گاهی اوقات یک ترکیب رنگ می تواند از نظر فنی کنترل کنتراست را انجام دهد، اما هنوز برای افرادی که دارای اختلالات بینایی خاصی هستند، دیدن آن دشوار است.

شبیه ساز به شما این امکان را می دهد تا ببینید که چگونه طراحی ممکن است برای افراد دارای انواع مختلف اختلالات بینایی به نظر برسد. این به شما کمک می‌کند تا مشکلاتی را که ممکن است از قلم افتاده‌اید، فقط با کنتراست بررسی کنید و قبل از صادرات PDF، آن‌ها را برطرف کنید.

قبل از صادرات کنتراست رنگ را بررسی و تنظیم کنید

مطابق با الزامات کنتراست رنگ WCAG هنگامی که هنوز در حال طراحی سند هستید، کنتراست را بررسی می کنید.

با نسبت‌هایی که نیاز دارید شروع کنید، ترکیب‌های پیش‌زمینه و پس‌زمینه واقعی را بررسی کنید، سپس مکان‌هایی را که کنتراست متمایل به از بین رفتن است، مانند تصاویر، نمودارها، جعبه‌های عنوان و رنگ‌های برند را برطرف کنید.

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

با Venngage، بررسی کنتراست، پیشنهادات رنگی قابل دسترس، بررسی‌کننده دسترس‌پذیری و شبیه‌ساز بصری، همگی در یک گردش کار قرار دارند، بنابراین می‌توانید به جای اینکه بعداً دوباره PDF را دوباره انجام دهید، مشکلات را قبل از صادرات برطرف کنید.

یک تماس رزرو کنید

سوالات متداول کنتراست رنگ WCAG

الزامات کنتراست رنگ WCAG چیست؟

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

برای انطباق WCAG AA به چه نسبت کنتراست نیاز دارم؟

برای متن معمولی به 4.5:1 و برای متن بزرگ به 3:1 نیاز دارید. متن بزرگ به معنای حداقل 18 یا 14 نقطه و پررنگ است. عناصر غیر متنی معنی دار، مانند خطوط روی نمودار یا نمادهایی که افراد برای درک محتوا به آن نیاز دارند، معمولاً به کنتراست 3:1 با رنگ های مجاور نیاز دارند.

چگونه کنتراست رنگ را قبل از صادرات PDF بررسی کنم؟

برای مقایسه رنگ پیش‌زمینه با رنگ پس‌زمینه بلافاصله از یک بررسی‌کننده کنتراست رنگ WCAG استفاده کنید. هر مکانی که پس‌زمینه تغییر می‌کند، از جمله جعبه‌های متن، تصاویر، گرادیان‌ها، نمودارها و بخش‌های رنگی را بررسی کنید. اگر در Venngage طراحی می‌کنید، می‌توانید در حین کار نسبت کنتراست را بررسی کنید و قبل از صادرات فایل PDF، ترکیب رنگ‌ها را تنظیم کنید.

چرا متن خوانا به نظر می رسد اما همچنان در بررسی کنتراست ناموفق است؟

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

اگر رنگ های برند من الزامات کنتراست WCAG را برآورده نمی کند، چه کاری باید انجام دهم؟

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

آیا کنتراست رنگ به تنهایی باعث دسترسی به PDF می شود؟

خیر. کنتراست رنگ تنها بخشی از قابلیت دسترسی PDF است. همچنین باید مواردی مانند متن جایگزین، ساختار عنوان، ترتیب خواندن منطقی، برچسب‌های سند و نمودارها و جداول قابل دسترسی را بررسی کنید. اگر رنگ تنها راهی است که خوانندگان می توانند سری داده ها را تشخیص دهند، برای نمودارها، حذف کنتراست کافی نیست. نشانه های دیگری مانند برچسب های مستقیم، نشانگرها، الگوها یا سبک های مختلف خط را اضافه کنید.

ابزار خوبی برای بررسی تضاد رنگ در طراحی چیست؟

به دنبال ابزاری باشید که نسبت کنتراست، وضعیت عبور/عقب WCAG و الزامات متن معمولی و بزرگ را نشان دهد. Venngage به شما امکان می دهد هنگام طراحی کنتراست را بررسی کنید تا بتوانید رنگ ها را قبل از صادرات تنظیم کنید. همچنین می‌توانید از بررسی کنتراست رنگ برای جفت‌های رنگ جداگانه و ژنراتور پالت رنگی قابل دسترس در مواقعی که به ترکیب رنگ‌های سازگار نیاز دارید استفاده کنید.