Retest color contrast of demo site

[cehfisher]

@fuzzbomb has done some preliminary testing on this, but with everything influx probably would be good to get some fresh eyes on this.

Ideally, we would achieve the 4.5:1 color ratio, but the site should at least have a 3:1 ratio. Elements to test include: text, buttons, icons, menus, all hover states, etc. Below is some additional information on the subject:

There are a few combinations which have a ratio of 3:1, which is the special exception threshold for big text. The text sizes aren't big enough though. Buttons pass in their resting state, but fail on hover. The icons could do with some hints about size, and where they'll be used.

The latest (hopefully last) working draft of WCAG has merged two of the new success criteria. User Interface Component Contrast has been merged into SC 1.4.11 Graphics Contrast.

Notably, the nitty-gritty about line thickness and different contrast thresholds was deemed too complex, so they've simplified it (this was hiinted at months ago, now they've done it). The required contrast for icons is now 3:1, which gives us much more leeway. Obviously, it would be better if we can get vibrant colours that are comfortably over that threshold, towards the 4.5:1 contrast that text uses, but it unblocks some of our palette.

The 3:1 threshold also applies to things like button focus outlines, main-menu active/hover styles, etc.

[cehfisher]

What It Means

Very low contrast between foreground and background colors. WCAG 2.0 1.4.3 Contrast (Minimum) (Level AA).

Examples

This is a funny issue. The inspector says it is showing white, but in reality is green after the link has been visited. I think the only change needed here is a default state for the link. You can see styling for: .menu-footer__link:link, and .menu-footer__link:hover But it is missing for: .menu-footer__link

---

Going to assume the white text on the peach background is something not finished. Maybe an image overlay? The rose color needs to be darkened a bit to meet requirements.

---

Ironically enough, the 'skip to content' button does not have enough contrast. Even though it is mainly non-sighted users who will be using this button, there are enough sighted keyboard only users out there that this contrast issue should be addressed.

Why It Matters

Adequate contrast is necessary for all users, especially users with low vision.

How to Fix It

Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. Elements with background images must have a background color defined that provides adequate contrast when images are disabled or unavailable.