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

Fix for acomplish pa11y contrast rules #744

Open
juanSanchezAlcala opened this issue May 27, 2022 · 2 comments
Open

Fix for acomplish pa11y contrast rules #744

juanSanchezAlcala opened this issue May 27, 2022 · 2 comments
Assignees
Projects

Comments

@juanSanchezAlcala
Copy link
Contributor

We have found that this article when we pass pa11y accessibility test it throws some errors on o-topper text due to it does not have enough contrast.
This error is false due that the image is on background , but this is not detected by this tool . The way that pa11y detects if there is an issue with the contrast is comparing color of letters with the background. If the background is transparent it will look thought all its parents until it found one with background color. In our case is the body. So the white color with the body background does not have enough contrast.
To avoid this errors the easiest way could be set background-color: black on class .o-topper--full-bleed-image-left. I've tested the change in origami registry and it does not change anything but now the tools does not detect a contrast error.
So what i suggest is to set background-color : black on @mixin _oTopperThemeFullBleedImage . e.g.

image

@origamiserviceuser origamiserviceuser added this to Backlog in Origami ✨ May 27, 2022
@chee
Copy link
Member

chee commented May 27, 2022

but surely this problem would then still occur if you used a light coloured background image and dark text?

@juanSanchezAlcala
Copy link
Contributor Author

No with dark text , but the problem is with o-topper text that i see that almost all o-toppers with .o-topper--full-bleed-image-left has white text and also in code seems that all text colors inside o-topper are light or white. So if I'm not mistaken with the last with a background black this contrast issue is going to be solve always

No with dark text , but the problem is with o-topper text that i see that almost all o-toppers with .o-topper--full-bleed-image-left has white text and also in code seems that all text colors inside o-topper are light or white. So if I'm not mistaken with the last with a background black this contrast issue is going to be solve always

@KamranMuniree KamranMuniree moved this from Backlog to To Do in Origami ✨ Sep 6, 2022
@KamranMuniree KamranMuniree moved this from To Do to Backlog in Origami ✨ Feb 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Origami ✨
  
Backlog
Development

No branches or pull requests

3 participants