Contrast fix

[eslteacher902010]

Fixes: [processing/p5.js-website] [Content] Insufficient text-to-background contrast (Issue #886)

Added

/* Force 'function' keyword to have better contrast /
code span[style="#D73A49"] {
color: #000 !important;
}

which seems to have fixed the contrast issue with the word 'function' in the tutorial part of the website.

[coseeian]

LGTM

I also noticed that the contrast between the annotations and the background color needs to be adjusted.

[eslteacher902010]

Thanks, I'll take a look at that and get back to you soon.

[eslteacher902010]

Hi @coseeian — I realized there was a small improvement I probably should have included in the function color fix. Using *= like this:

code span[style*="#D73A49"] {
color: #000 !important;
}
makes the selector more flexible. I noticed a couple of the function keywords were still showing up pinkish which made me want to try this fix.

That said, if some text is supposed to stay that color, feel free to let me know — this might not be the right adjustment in that case.

I also tweaked the annotation styling to make it a bit darker — I assumed you were referring to the // circle in the center..... (in your picture above)

BTW, you’ll see both changes reflected in the Files Changed tab.

Let me know if you need anything else. Thanks!!

[ksen0]

Hi @eslteacher902010, sorry for the long delay in reviewing this. Please let me know if you'd like to finish this issue based on the feedback below, or if it should be reassigned - totally ok either way, thanks so much for your work already. You can confirm either way within the next ~7 days (though you don't have to finish in that time, of course)

The challenge was that the approach in your PR doesn't quite resolve all instances of insufficient contrast in a maintainable way - rather than overriding individual colors, it would be better to use (or create) a new theme for the AnnotatedCode blocks. So I didn't want to respond here until I had a better understanding myself of what the better approach would be (thanks to @davepagurek who explained the below to me, as I was not sure how to proceed in reviewing this issue)

• This is where annotated code block theme is defined: https://github.com/processing/p5.js-website/blob/main/src%2Fcomponents%2FAnnotatedCode%2Findex.astro#L53-L56
• This is where editable sketch code the theme is de fined: https://github.com/processing/p5.js-website/blob/main/src%2Fcomponents%2FCodeEmbed%2Findex.jsx#L124-L126

@davepagurek suggested to look for available themes for these two libraries, CodeMirror and shiki.

So the PR for this issue should, instead of using CSS to override specific elements, switch the theme used in the code blocks to a theme that has sufficient text-to-background contrast. If no such theme exists, then this PR should rather add such a theme and use it - though making new themes might need a bit more research and iteration.

What do you think?

[eslteacher902010]

Hi @ksen0, thanks so much for the thoughtful review and for pointing me to the right files. I kind of suspected my original approach was more of a patch than a maintainable fix, so it makes sense that a theme-based solution would be better long-term.

My schedule probably only allows me a few hours to work on this, but I’d like to take a stab at updating it with the theme approach you and @davepagurek suggested (starting with existing CodeMirror/shiki options). If it looks like it’ll take more than I can realistically handle, I’ll let you know so it can be reassigned.

Appreciate the guidance!

[ksen0]

Thanks for the quick ping @eslteacher902010, that sounds good! Please don't hesitate to follow up here or on Discord, I'll be happy to help as well as I can. Especially if a new theme turns out to be necessary.

[eslteacher902010]

Thanks, will definitely do that! :)

[eslteacher902010]

@ksen0 @davepagurek Hey thanks again for the guidance. I tried switching to a high-contrast GitHub theme, but it looks like the current Shiki version (1.1.7) doesn’t include it — so the site falls back to the default and the pink “function” is still there. Would you be open to me upgrading Shiki to a newer version so we can use github-light-high-contrast directly? That way we’d meet the accessibility need without a CSS patch. If there's a solution I'm missing, let me know. Thanks.

[ksen0]

@eslteacher902010 Thanks for the update and the research! Yes, please try to upgrade; if the tests pass with the new version, then no problem. If there are any issues with upgrading, I'd be happy to help too. Just to confirm, the github-light-high-contrast theme does have sufficient contrast?

[eslteacher902010]

@eslteacher902010 Thanks for the update and the research! Yes, please try to upgrade; if the tests pass with the new version, then no problem. If there are any issues with upgrading, I'd be happy to help too. Just to confirm, the github-light-high-contrast theme does have sufficient contrast?

Hi @ksen0, I’ve upgraded Shiki and set the theme to github-light-high-contrast. Functionally this works — Shiki is outputting the expected colors — but the CSS rules (maybe .code-box) overrides are muting those changes in the rendered site so I'm unable to see the change but I can confirm it's happening by console logging.

I do think GitHub Light High Contrast is a decent choice from seeing previews of it. Would you prefer I push this update as-is, or adjust/remove background rules so the new theme is fully visible? I’m also mindful of not getting too far into the weeds here, so happy to follow whatever approach you and @davepagurek think is best. Thanks!

[eslteacher902010]

@eslteacher902010 Thanks for the update and the research! Yes, please try to upgrade; if the tests pass with the new version, then no problem. If there are any issues with upgrading, I'd be happy to help too. Just to confirm, the github-light-high-contrast theme does have sufficient contrast?

Hi @ksen0, I’ve upgraded Shiki and set the theme to github-light-high-contrast. Functionally this works — Shiki is outputting the expected colors — but the CSS rules (maybe .code-box) overrides are muting those changes in the rendered site so I'm unable to see the change but I can confirm it's happening by console logging.

I do think GitHub Light High Contrast is a decent choice from seeing previews of it. Would you prefer I push this update as-is, or adjust/remove background rules so the new theme is fully visible? I’m also mindful of not getting too far into the weeds here, so happy to follow whatever approach you and @davepagurek think is best. Thanks!

[eslteacher902010]

fyi...Just pushed the Shiki upgrade and applied the GitHub Light High Contrast theme to both annotated and editable code blocks. Figured it might be helpful for you to see it. Thanks again for the helpful guidance!