Financial-Times
Fix for acomplish pa11y contrast rules
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.
but surely this problem would then still occur if you used a light coloured background image and dark text?
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