Open cehfisher opened 6 years ago
fuzzbomb
commented
6 years ago This find out more link is hard to spot. The arrow head technically passes SC 1.4.1 Use of Color, but unless you are reading the text it just gets lost amongst the text. The link isn't very obvious when you're just scanning. It would benefit from being underlined like links inside other paragraphs.
cehfisher
commented
6 years ago Adding more link accessibility comments by @lyndsey in #110
By adding a background colour and changing the text colour you are still using colour alone to distinguish the links, so it's still an issue for colour blind people. I didn't check if there is a hue change but I doubt it. The best remedy is if on hover you remove the underline text decoration - text-decoration: none; therefore you have colour and the removal of the underline on hover as your visual cues.
Suggestion: Remove underline text decoration on hover for links in body, breadcrumbs, and tags
With the current style of the quote box background and recipe background #F4F2E9 and greenish link colour #00836D colours do not pass WCAG AA for normal text.
The orange as a link #cc2a00 with the #F4F2E9 background passes.
The greenish link colour #00836D and white #fff does pass contrast so if the hover state is #00836D text, #ff background and text-decoration:none; it will pass.
Suggestion: For quote and recipe box area, where background is #F4F2E9 make the link colour #cc2a00. On hover make the link colour #00836D, background #fff, and remove underline.
Link to contrast checker for link and background pallette of quote box https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=00836D,F4F2E9,cc2a00,fff&main=F4F2E9&level=AA
There has been some good progress on links from an accessibility perspective, but still seeing some inconsistencies and places where no hover state or underline is present. Might be good to get some fresh eyes on this issue.