Theme accessibility

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

Currently highlight.js already comes with several themes that meet this criteria. However most themes that come with highlight.js do not meet WCAG AA. I don’t think that this is a problem per se, since highlight.js might be used just for e.g. just a personal application where the user chooses can choose their own color theme as they wish.

I do however think that highlight.js should address two things:

• If highlight.js comes with themes that do not meet WCAG AA, the Demo should raise awareness about which themes have a high contrast and which themes don’t. This could be as simple as dividing the themes list in Themes with high contrast, Themes with lower contrast and linking some informative web page that explains when/why this matters.

• I find it problematic that the Default theme does not meet WCAG AA. I think either it’s colors should be changed to meet WCAG AA or it should be renamed to something else (maybe Legacy Default). This is important because accessibility by default is important. (And also because the README currently suggests using default.css).

To get this started I opened the pull request #3390 which calculates the minimum WCAG contrasts for each theme and asserts that they are the same as defined in test/contrast/min_contrasts.json. (Contrasts can still be decreased but not accidentally).

[not-my-profile]

Seeing that https://highlightjs.org/ still does not raise awareness about accessibility, maybe you can take some inspiration from https://pygments.org/ for which I have since implemented such changes.

• https://pygments.org/styles/ now lists styles with a good contrast first and styles with a lower contrast only after the paragraph:

  The following styles do not meet the WCAG 2.1 AA contrast minimum, so they might be difficult to read for people with suboptimal vision. If you want your highlighted code to be well readable for other people, you should use one of the earlier styles instead.

• https://pygments.org/demo/ separates the styles in the <select> into two <optgroup> (good contrast & suboptimal contrast) and selecting a style with a suboptimal contrast shows the warning “style may have poor contrast”.

[joshgoebel]

I feel like that only works if they are collapsible or we have some sort of table of contents. Or maybe I’m just imagining what the UI would look like. It would have to be clear that if you scroll they were dark themes below. 

That doesn’t necessarily solve the badge floating onto the next line problem. You could solve that with a nonbreaking space but then you might end up where the badges are so far to the right that they can’t be seen at all.