Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line highlight color against background color does not meet WCAG (3:1) #36

Open
gabalafou opened this issue Feb 7, 2024 · 0 comments
Open
Labels
type: bug 🐛 Something isn't working

Comments

@gabalafou
Copy link
Contributor

I think this might be an issue for all of the themes under this repo but this is definitely an issue for a11y-light.

Between the background color of the code block and the background color of a highlighted line, WCAG guidelines require that the contrast ratio between those two to be 3:1, but it's much less.

I suspect that it's not possible (or very hard) to find a color palette that meets the following three criteria:

  • 8 different text colors that contrast at least 4.5:1 against the background color
  • Those same colors contrast 4.5:1 against the line highlight color
  • The line highlight color contrasts 3:1 against the background color

Eric Bailey's solution was to put a top and bottom border on highlighted lines. We could do the same thing but we would have to modify the CSS that we get back from Pygments, which we already do in the generate_css() function in utils.py.

Originally posted by @gabalafou in #33 (comment)

@trallard trallard added the type: bug 🐛 Something isn't working label Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants