Improve color contrast of link text to meet accessibility requirements

[philter]

Proposal to adjust CSS on all Make team pages to match the link styles on ​Make/Accessibility, which meets the WCAG AA standard for color contrast at this size (4.5:1). All other pages now use #3498db blue on #eeeeee gray, which is only 2.7:1. Please change the #3498db text color to #0072a9:

#wordpress-org .make-welcome a, #page a {
    color: #0072a9;
}

[Otto42]

Here's the theme all the sites are using:

https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe

​https://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/

[audrasjb]

CSS patch

[audrasjb]

Hi,
Here is a first attempt patch for this ticket :)

[sami.keijonen]

Thanks @audrasjb! What about all links inside .site?

When I quickly looked I saw something like this:

a, a:visited, a:active, .entry-meta .entry-actions:hover a, .entry-meta .entry-actions:hover a:visited, .comment-meta .comment-actions:hover a, .comment-meta .comment-actions:hover a:visited, #help dt, #media-buttons .button, .responsive-link {
       color: #3498db;
}

But those seems to come from parent theme p2-breathe. Which I don't seem to find from SVN :(

Anyways we can overwrite all styles in child theme. Here is direct link to parent theme CSS file if it's easier to find styles: ​https://make.wordpress.org/accessibility/wp-content/themes/p2-breathe/style.css?ver=4.9-beta2-41860

[audrasjb]

@sami.keijonen thanks :)
Sure we can also change .entry-content / .site link's color. That should be easy to override.

But as far as I know, #0072a9 / #fff existing color contrast meets WCAG level AA requirements, isn't it?

[sami.keijonen]

Yes, #0072a9 / #fff meets AA level contrast: ​http://leaverou.github.io/contrast-ratio/#%230072a9-on-white

Sure we can also change .entry-content / .site link's color. That should be easy to override.

Yes please:) Our goal is to make current theme as accessible as possible.

[audrasjb]

Ok @sami.keijonen !
Here is a new patch.

[audrasjb]

add #page a css rule

[sami.keijonen]

Thanks! Can you use CSS class .site? I'm picky like that for using classes for CSS.

[audrasjb]

replace #page with .site css selector

[audrasjb]

Sure, you are definitely right :)
Thanks @sami.keijonen

[coffee2code]

In 6082:

Breathe: Override p2-breathe defined uses of #3498db to #0072a9 for WCAG AA color contrast compliance.

Props audrasjb, samikeijonen, coffee2code.
Fixes #3194.