Accessibility: contrast ratio for hljs-built_in

I’m having trouble reading the color-coded blue text on dark background, like the var keyword on line 17 of the solution here:

Could we do something to increase the contrast ratio?
The text color of --tertiary-high is #036299
The background is --secondary #313146

That yields only 1.93:1, which is a long way from 3:1 for large text or 4.5:1 for regular text. I’m happy to help if I can. Can you tell I’ve just finished the basic CSS course? :slight_smile:

I was going to suggest you try the dark theme but the contrast on that is even worse :slight_smile:

There is actually an issue about this on github (#38947) but it hasn’t gotten any traction in a while. One of the suggestions is to allow users to completely disable colored syntax highlighting, which I think is a very good idea. But yes, the colors being used definitely need to have more contrast.

Anyone can make contributions to the project.

Set up freeCodeCamp locally on your computer

Are you at a point where you feel you could do this?

P.S. As a temporary workaround, if you are able, you can install the Stylus browser extension and use that to override the default styling for this (based on the class given this element). I just tried it and it works great. This is of course not a proper long term solution but Stylus has helped me quite a bit over the years with issues like this.

I am contributing small changes, so far mostly to verbiage. I could probably manage changing the colors up a bit, but wouldn’t be able to implement the feature to disable syntax highlighting.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.