WordPress.org

Making WordPress.org

Opened 2 months ago

Closed 5 weeks ago

#3194 closed enhancement (fixed)

Improve color contrast of link text to meet accessibility requirements

Reported by: philter Owned by: 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 2 months ago.
CSS patch
3194.2.diff (589 bytes) - added by audrasjb 2 months ago.
add #page a css rule
3194.3.diff (589 bytes) - added by audrasjb 2 months ago.
replace #page with .site css selector

Download all attachments as: .zip

Change History (15)

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


2 months ago

@audrasjb
2 months ago

CSS patch

#3 @audrasjb
2 months ago

  • Keywords has-patch added; needs-patch removed

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

#4 @sami.keijonen
2 months 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
2 months 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 meet WCAG level AA requirements, isn't it?

Version 1, edited 2 months ago by audrasjb (previous) (next) (diff)

#6 @sami.keijonen
2 months 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.

Last edited 2 months ago by sami.keijonen (previous) (diff)

#7 @audrasjb
2 months ago

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

@audrasjb
2 months ago

add #page a css rule

#8 @sami.keijonen
2 months ago

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

@audrasjb
2 months ago

replace #page with .site css selector

#9 @audrasjb
2 months ago

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

#10 @iandunn
6 weeks ago

  • Keywords accessibility added

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


6 weeks ago

#12 @coffee2code
5 weeks 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.

Note: See TracTickets for help on using tickets.