Native: adjust colours to meet WCAG AAA contrast guidelines

[hugovk]

I used both WAVE (Web Accessibility Evaluation Tool) and the CSS Overview panel in Chrome DevTools to identify these by checking https://python.github.io/peps/pep-0008/.

https://wave.webaim.org/report#/https://python.github.io/peps/pep-0008/

https://developer.chrome.com/blog/new-in-devtools-87/#css-overview

Some of the colours already met AA (all but one of these are for Native):

But I've bumped them all to AAA using Chrome's suggestions. They provide two suggestions, one to meet AA (4.5:1) and another for AAA (7:1).

For example, inspect element:

Click the colour box:

And click the icon to the right of the 🚫 to select AAA:

Demo

Before: https://python.github.io/peps/pep-0008/#other-recommendations
After: https://hugovk.github.io/peps/pep-0008/#other-recommendations

Before, 137 contrast errors: https://wave.webaim.org/report#/https://python.github.io/peps/pep-0008/
After, no contrast errors: https://wave.webaim.org/report#/https://hugovk.github.io/peps/pep-0008/

[Anteru]

First of all: Thanks for working on improved accessibility! However, I think something is up with your demo, both links show the exact same colors, and if I run the wave.webaim.org links , they show the same number of contrast errors? Am I missing something here?

[hugovk]

Ah sorry, I should have added this needs to be in dark mode. Either put your OS into dark mode or click the icon at the top right:

[hugovk]

Some screenshots because my demo page will likely get reset to upstream/main at some point.

Before

After

[Anteru]

Merged, thanks! The changes are subtle but worth it, IMHO, thanks for working on this.

[hugovk]

And thank you for maintaining Pygments, I find code in documentation much easier to read with syntax highlighting!