Update link color to increase contrast and legibility

Cara-Jo commented 9 years ago

Description

I care about the usability of the website and find the 'gold' links hard to read. Especially for the users who do not have 20/20 vision.

They should also be underlined so that users know they are a link.

Ask Let's change the links to either the standard blue or green! I'm open to discussion about this - but think the links should be blue.

Of course these colors will be GDI flavored.

To Do

[x] Discuss a new color
[ ] Make links that color and add a sweet underline.

Roenok commented 9 years ago

I vote blue, for maximum color blind friendliness. Also, we want to shoot for a 3:1 contrast ratio with our regular text color, if possible, per WCAG 2.0 guidelines

http://www.w3.org/TR/WCAG20-TECHS/G183.html

juliaelman commented 9 years ago

:+1: on blue! #0066CC?

Cara-Jo commented 9 years ago

Our brand blue is #00A9B4 Not sure if that matters at all or if it's high enough contrast.

See brandfolder.com/gdi

juliaelman commented 9 years ago

@Cara-Jo sticking with the brand sounds good to me!

@Roenok suggestions on the contrast?

Roenok commented 9 years ago

Brand blue is too light; it has a 2.9:1 contrast ratio with white, which isn't much better than the gold. If we go a touch darker, #00838C has a 4.5:1 ratio with white and a 3:1 ratio with our default text color, making it a perfect match with WCAG 2.0 guidelines

Cara-Jo commented 9 years ago

On February 16, 2015 at 7:16:21 PM, Sylvia Richardson (notifications@github.com) wrote:

Brand blue is too light; it has a 2.9:1 contrast ratio with white, which isn't much better than the gold. If we go a touch darker, #00838C has a 4.5:1 ratio with white and a 3:1 ratio with our default text color, making it a perfect match with WCAG 2.0 guidelines

— Reply to this email directly or view it on GitHub.

girldevelopit / gdi-website

Update link color to increase contrast and legibility #204