search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.33k stars 1.29k forks source link

Theme accessibility #3180

Open not-my-profile opened 3 years ago

not-my-profile commented 3 years ago

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:

I have already raised the same issue with Pygments (https://github.com/pygments/pygments/issues/1718) and Highlight.js (https://github.com/highlightjs/highlight.js/issues/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 commented 3 years ago

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 commented 3 years ago

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

RunDevelopment commented 3 years ago

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

not-my-profile commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

Hello @kaylumah.

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

However, the output in the comment in #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.