Surveys / State of CSS 2022
This survey closed on October 30, 2022. View Survey Results »

6/14Accessibility

  1. prefers-reduced-motion
  2. prefers-color-scheme
  3. prefers-reduced-data
  4. color-contrast()
  5. color-scheme
  6. prefers-contrast
  7. forced-colors
  8. :focus-visible

css 
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

css 
@media (prefers-color-scheme: dark) {
  .foo {
    background: #333;
    color: white;
  }
}

css 
@media (prefers-reduced-data: reduce) {
  body {
    font-family: system-ui;
  }
}

css 
.high-contrast {
  color: color-contrast(#008080 vs olive, var(--myColor), #d2691e);
}

css 
.foo {
  color-scheme: light dark;
}

css 
@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

css 
@media (forced-colors: active) {
  .button {
    border: 2px green solid;
  }
}

css 
.focus-visible-only:focus-visible {
  outline: 2px dashed darkorange;
}
Next sectionSelectors
Previous section Typography
State of CSS 2022