SpaceAdvocates/SpaceAdvocatesWebsite

Link color needs to be definied

Opened this issue · 1 comments

There are several shades of blue and light blue appearing around the site, some indicate links and some are plain text. But there is no consistency for which is which, sometimes the darker blue indicates a link (about page), whereas other places (blog) have the lighter blue as links. It also depends if the test is on a light or dark background.

We need to better define what is the link color.

Agree, its been on my to-do list. Because of our contrasting treatments we require two link colors, #075181 (dark blue) and #93D7F9 (light blue), these should be the only link colors used and should not be used for text. Static text should be either white or black. If we need to have static text in either link color, alternatively we could underline all text links.

In terms of link consistency:
Dark blue links on white backgrounds.
Light blue links on dark backgrounds.

The about page is a great example of our problem, there needs to be a way to differentiate between a static name and a name that links to the persons personal site. In this case, links should be light blue and static names should be white.

There is no way around using two link colors since we are talking contrast that is across the spectrum, no single color could meet both.*

*In my original design, I had all content on a white background, the pages without a white container, stemmed from the about page to also include, press room, get involved, contact, donate, etc. All these pages fail, links need to be light blue or the background needs to be white.

Here is a breakdown of our link contrast: Link Color/Background Color = contrast ratio

#075181/#FFF = 8.4:1 PASS AAA**
#93D7F9/#000 = 13.3:1 PASS AAA

#075181/#000 = 2.5.1 FAIL
#93D7F9/#FFF = 1.6:1 FAIL

**AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Anyways, I will go in and get this done ASAP. To clearly answer you, LOL, #075181 (dark blue) and #93D7F9 (light blue) are our link colors and plain text (white or black) should not use those colors.