-
Notifications
You must be signed in to change notification settings - Fork 82
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feedback - Accessibility: Button links fail color contrast on Learn website #2232
Comments
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? |
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:
***@***.***>
|
Thanks @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:
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.
The text was updated successfully, but these errors were encountered: