Making WordPress.org

Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#3194 closed enhancement (fixed)

Improve color contrast of link text to meet accessibility requirements

Reported by: philter's profile philter Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: good-first-bug, has-patch, accessibility
Cc:

Description

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;
}

Attachments (3)

3194.diff (580 bytes) - added by audrasjb 7 years ago.
CSS patch
3194.2.diff (589 bytes) - added by audrasjb 7 years ago.
add #page a css rule
3194.3.diff (589 bytes) - added by audrasjb 7 years ago.
replace #page with .site css selector

Download all attachments as: .zip

Change History (16)

This ticket was mentioned in Slack in #accessibility by philter. View the logs.


7 years ago

@audrasjb
7 years ago

CSS patch

#3 @audrasjb
7 years ago

  • Keywords has-patch added; needs-patch removed

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

#4 @sami.keijonen
7 years ago

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

#5 @audrasjb
7 years ago

@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?

Last edited 7 years ago by audrasjb (previous) (diff)

#6 @sami.keijonen
7 years ago

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.

Version 0, edited 7 years ago by sami.keijonen (next)

#7 @audrasjb
7 years ago

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

@audrasjb
7 years ago

add #page a css rule

#8 @sami.keijonen
7 years ago

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

@audrasjb
7 years ago

replace #page with .site css selector

#9 @audrasjb
7 years ago

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

#10 @iandunn
7 years ago

  • Keywords accessibility added

This ticket was mentioned in Slack in #meta by sami.keijonen. View the logs.


7 years ago

#12 @coffee2code
7 years ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 6082:

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

Props audrasjb, samikeijonen, coffee2code.
Fixes #3194.

This ticket was mentioned in Slack in #themereview by poena. View the logs.


5 years ago

Note: See TracTickets for help on using tickets.