a11y: low contrast for `span.token.comment` in code blocks
Closed this issue · 4 comments
I noticed on the site that the contrast value for span.token.comment is currently too low (in both light and dark mode) to be accessible as it is 1.64. Generally the minimum contrast level to be accessible is 4.5:1 for AA or 3:1 for large text.
I was able to encounter this issue by going to https://learn-redwood.netlify.app/docs/tutorial/cells and viewing the code example that contains // web/src/components/BlogPostsCell/BlogPostsCell.js at the top (screenshot below)
visually the contrast looked too low for me, I used the Google Developer Tools to confirm the contrast level.
I am available to work on resolving this issue.
I had some additional code block changes (including a darker background) but those styles aren't showing in certain environments! So strange, but I can't comprehend all the combined processes that are in place to make CSS in the modern JS world. :(
I'll see what I can do!
^ I fixed the bug that was causing dev/prod style differences
However, it looks like we could still improve contrast of comments in code blocks
@clairefro Great, I am glad the styling issue between dev and staging is sorted out now. I just opened a PR (#42) to improve the contrast of comments in code blocks.