audioxide / website

The Audioxide website, made with Vue
https://audioxide.com
GNU Affero General Public License v3.0
0 stars 0 forks source link

Change the hue of our hyperlinks to meet accessibility contrast requirements #166

Closed frederickobrien closed 3 years ago

frederickobrien commented 3 years ago

I know the pink we use (#f01d4f) is close to our hearts, but it does only have a contrast ratio of 4.2:1 on a white background, while 4.5:1 or more meets the AA requirements of the Web Content Accessibility Guidelines. It's the only thing (currently) flagged by Lighthouse where accessibility is concerned:

image

Using this WebAIM tool it seems #E60F41 would do the trick. That would take us from this:

image

To this:

image

Yes those are two different colours.

It is also worth mentioning that to pass WCAGAAA standards (7:1 ratio) a colour closer to #B10B32 (pictured below) would be needed.

image