mpchadwick / pygments-high-contrast-stylesheets

WCAG AA passing Pygments stylesheets

pygments-high-contrast-stylesheets

A hard fork of pygments-css with WCAG AA passing stylesheets.

Why?

When you're choosing a theme for your personal IDE feel free to choose whatever you'd like. But when you're publishing to the web, keep in mind that you're not the only one reading the code using the selected theme.

These high contrast themes pass WCAG AA's standards, making them more friendly to the large segment of the population with color vision deficiency.

Examples

vim.css

Before

After

View demos for all stylesheets here

Contributing

Converting a stylesheet

Original pygments stylesheets are automatically converted by the tools/make-stylesheet Ruby script.

In order to convert a new stylesheet, first add the original to the original-stylesheets directory.

Next you'll need to install the gems make-stylesheet uses to convert the original. Do this from within the tools directory:

bundle install

Then invoke make-stylesheet, first passing it the path to the original stylesheet, followed by the destination location. Converted stylesheets should be placed in the root directory of the project.

./make-stylesheet ../original-stylesheets/new-stylesheet.css ../new-stylesheet.css

Updating the demos

After you've converted a stylesheet, you should update the demos on index.html. This page is dynamically generated by the tools/make-demos script.

At the top of the file, there's an array of stylesheet file names that are added to the demos...

demos = [
  "autumn",
  "colorful",
  "fruity",
...

Add your stylesheet to the list.

Then invoke make-demos.

./make-demos

Now you can commit your changes and submit a pull request!

pygments-high-contrast-stylesheets's Issues

Red Text on Dark Background

In the case of red-blindness, they are known to confuse red and black.

See the simulator results.

For better accessibility, it would be better to increase the brightness of red text on a dark background.

The `.err` style in `autumn.css` fails Chrome's contrast audit

The error style in autumn.css

.highlight .err { color: #ec0505; background-color: #FFAAAA } /* Error */

has contrast ratio only 2.52:1, so fails AA. (See https://webaim.org/resources/contrastchecker/?fcolor=EC0505&bcolor=FFAAAA.)