prefers-contrast media query

by jorgeluis

HTML

<p>
Designers like the subtleness of low contrast text, but unless it's large in size, it gets very hard to read for a lot of people, including many people like me who always had great vision until they reached their 40s.
</p>

<p>
Thanks to accessibility efforts, readers can select high-contrast mode on their browsers (or their display settings in general) which a good web designer can check, so they can make that text a little less subtle and help readers actually read what it says.
</p>

CSS

:root {
  --grey: #aaa
}

p {
  color: var(--grey)
}

@media screen and (prefers-contrast: more) {
  :root {
    --grey: #555;
  }
}