Theme accessibility

[not-my-profile]

Web accessibility is very important. For a syntax highlighting library this is particularly relevant when it's used for a website that is meant to be used by many users, some of whom may not have perfect vision and struggle to read code highlighted with themes that have a low contrast. The WCAG web accessibility standard defines the following AA success criteria:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

I think PrismJS should help making the web more accessible by implementing the following two changes:

• Making the default theme meet the WCAG AA standard for contrast.

• Making the download page raise awareness about the impact contrast has on accessibility. Which can be done just by indicating which of your themes meet WCAG AA and providing a link to an informative website.

I have already raised the same issue with Pygments (pygments/pygments#1718) and Highlight.js (highlightjs/highlight.js#3392) and they are working on addressing these concerns.

While I unfortunately don't have any time to help you implement these changes, I am more than happy to try to answer any questions you have in this matter.

[RunDevelopment]

Thank you for reporting this issue.

We are already aware of this problem and have a PR (#2313) to automatically detect and fix colors that do not meet the WCAG AA standard. However, we view fixing the contrast issues as a breaking change and will only do so in Prism v2.0.

[not-my-profile]

Great! Is there a planned release date for v2.0?

[RunDevelopment]

Unfortunately no. We have a lot planned for v2.0, so it will likely take us some time.

[not-my-profile]

Ok, I get that this issue will be addressed by v2.0 but since that might take "some time", how about addressing this issue in a minor version update in the meantime?

You could add the adjusted themes as additional "high contrast" versions and make Default High Contrast the default selection at https://prismjs.com/download.html. The download page could even hide the current themes in a collapsed "Legacy themes" section. My point is that I don't think that addressing this issues requires a breaking change.

[kaylumah]

Hi there,

Is there any way I can make sure I have a high contrast variant on my website while we wait for V2?

Thanks
Max

[RunDevelopment]

Hello @kaylumah.

Unfortunately, there isn't. The WCAG-AA-compliant themes are still in development.

However, the output in the comment in PrismJS/prism#2313 (see "Details") lists every non-compliant color along with a corrected compliant color in all of Prism's themes. You could make the theme you're using WCAG AA compliant with this information.