CSS Accessibility Styling

🔹 ۱. کنتراست رنگ (Color Contrast)

❌ بد (کنتراست کم):


.text {
  color: #aaa;
  background: #fff;
}

✅ خوب (کنتراست مناسب):


.text {
  color: #000;
  background: #fff;
}

❌ بد:


button:focus {
  outline: none;
}

✅ خوب:


button:focus {
  outline: 3px solid #ff6347;
  outline-offset: 2px;
}

واحدهای نسبی (em, rem, %) رو جایگزین پیکسل کن تا کاربر بتونه متن رو بزرگ کنه.


body {
  font-size: 1rem; /* به جای px */
}

✅ نمونه:


a {
  color: #0056b3;
  text-decoration: underline;
}
a:hover {
  color: #ff6347;
}

بعضی کاربران از انیمیشن زیاد اذیت می‌شن. با این media query می‌تونی انیمیشن رو خاموش کنی.


@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

بعضی کاربران ترجیح می‌دن از حالت تاریک استفاده کنن. می‌شه با media query شناسایی کرد:


@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #ffffff;
  }
}

دکمه‌ها و لینک‌ها باید حداقل 44px × 44px باشن تا راحت کلیک بشن (طبق استاندارد اپل و WCAG).


button {
  padding: 12px 20px;
}


body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

برای CSS Accessibility Styling این موارد خیلی مهمن: