The way to present an accessible excessive distinction different to a pastel shade scheme?

Impressed by a dialogue at a convention, I made a decision to analysis and put the issue, or moderately problem, into correct phrases. I even dared to ask it as a query on StackOverflow, though most of my questions are likely to get downvoted and deleted, so higher make a DEV weblog submit out of it as properly.

How is it attainable to make sure an internet site’s shade theme provides a high-contrast different which complies to the WCAG 2 minimal distinction necessities whereas preferring a pastel, low-contrast theme until the person needs or wants larger distinction?

I attempted to outline a fallback theme with a better distinction and offering a decrease distinction model until the person requires excessive distinction, utilizing the prefers-contrast media question, however the next instance (additionally as a codepen right here which fails the accessibility audit by the axe Chrome extension as a result of low distinction of two.71 of foreground shade: #eeeeee, background shade: #f26600.)

What CSS code is required to outline a correct fallback? How are the customers anticipated to point their distinction desire, and is there a solution to make browsers or working techniques adapt the distinction desire primarily based on daylight settings, darkish/mild theme, ambient mild sensors or the like?

p {
  background-color: #f26600;
  shade: #eeeeee;
}

@media (prefers-contrast: extra) {
  p {
    background-color: #aa3300;
    shade: #ffffff;
  }
}

Ideas and solutions are very welcome!