Ethical Design

Modern CSS allows respecting settings user chose in their system (Windows, macOS, Android).

1. prefers-reduced-motion

Some people feel discomfort from sharp animations.

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

2. prefers-contrast

For people with vision impairments, you can provide version with increased contrast.

3. forced-colors

Determines if high contrast mode is enabled (like in Windows), limiting palette.