Feedback - Accessibility: Button links fail color contrast on Learn website

[amberhinds]

Type of feedback

//dev

Description

The buttons on learn.wordpress.org use #0085ba as the background color with 13px white text. This blue fails both AA and AAA color contrast for normal text. Here's the relevant CSS:

.is-style-primary .wp-block-button__link, .is-style-primary .wp-block-button__link:visited, .is-style-primary-full-width .wp-block-button__link, .is-style-primary-full-width .wp-block-button__link:visited, .is-style-secondary .wp-block-button__link, .is-style-secondary .wp-block-button__link:visited, .is-style-secondary-full-width .wp-block-button__link, .is-style-secondary-full-width .wp-block-button__link:visited {
    background: #0085ba;
    border: 1px solid #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 32px;
    padding: 0.9rem;
    text-align: center;
    text-decoration: none;
}

Step-by-step reproduction instructions (optional)

Go to the learn home page and inspect the buttons. Here's a color contrast report for reference.

Other information (optional)

It would be great if the color contrast on buttons and links would pass color contrast at a AAA level, so we can set an example of the best practice. This could be achieved by darkening the blue to #005B80.

[jonathanbossenger]

Hey @amberhinds, thanks for logging this issue.

In testing your suggested color of #005B80, I noticed that it doesn't match the other colors on the site.

If I use the color of the Lesson Plan panel at the top of the page, #006899, it passes WCAG 2.0 AA, which the WordPress project requires, and it matches the colors used in the current design.

Would this change be an acceptable compromise in your opinion?

[amberhinds]

Yes, the AA color would be sufficient. It would be great if it could be AAA everywhere, but perhaps that needs to be left for a redesign if it's not as simple as updating a color code in a variable.

…

On Wed, Feb 21, 2024, 4:35 AM Jonathan Bossenger ***@***.***> wrote: Hey @amberhinds <https://github.com/amberhinds>, thanks for logging this issue. In testing your suggested color of #005B80, I noticed that it doesn't match the other colors on the site. If I use the color of the Lesson Plan panel at the top of the page, #006899, it passes WCAG 2.0 AA <https://webaim.org/resources/contrastchecker/?fcolor=0085BA&bcolor=FFFFFF>, which the WordPress project requires <https://en-za.wordpress.org/about/accessibility/>, and it matches the colors used in the current design. Would this change be an acceptable compromise in your opinion? — Reply to this email directly, view it on GitHub <#2232 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADELJMCYEGZGPAVW7TKAMYTYUXEY3AVCNFSM6AAAAABDSJYSSGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJWGM2TONBVHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jonathanbossenger]

Thanks @amberhinds.