Insufficient Color Contrast on Links, Headings, and Paragaphs

[bbertucc]

Description:

This issue addresses several instances of insufficient color contrast found on various pages of the website. Proper color contrast is crucial for ensuring text readability and accessibility for users with visual impairments.

Current Code:

Our spreadsheet (linked) contains the nodes, messages, and related URLs where the violation occurs.

Proposed Fix:

Increase the color contrast ratio for the text and background to meet at least the WCAG 2.1 AA standard of 4.5:1 for normal text and 3:1 for large text.

For instance, on https://wordpress.org/state-of-the-word/, the link for "Matt Mullenweg" is currently styled with the color code #ff2b2b. The color contrast ratio of that is 3.73:1, lower than standards. Updating the color to #E42929 would improve contrast with minimal visual change. Note: You can play with that particular color contrast at this link: https://coolors.co/contrast-checker/ff2b2b-ffffff

Steps to Reproduce:

1. Visit the URLs in the attached CSV and identify the elements mentioned
2. Use a single page accessibility checker. (We recommend using Lighthouse with your browser dev tools. See: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/lighthouse)
3. Apply the proposed fix and recheck the contrast to ensure it meets the required standards.

Acceptance Criteria:

• All identified elements should have a color contrast ratio that meets WCAG 2.1 AA standards.
• Ensure that the text remains legible and accessible for users with visual impairments.
• Verify the changes across different browsers and devices to ensure consistent accessibility.

How critical is this fix?

This fix is critical as it directly impacts the accessibility and usability of the website for users with visual impairments. Resolving this ticket will resolve 86 reported issues that the Equalify scan discovered.

Reviewed by:

This ticket was automatically generated by Equalify and reviewed by the human, @bbertucc.

[ryelle]

I've broken this down into the unique pages flagged, and identifying which sections are at issue. Most of the issues are in the old theme, so those probably won't have a high priority on getting fixed, but ideally we can move to create those pages in the new design. Pinging @WordPress/meta-design so they can review the issues & suggested fixes.

New theme

https://wordpress.org/

1. In the "Latest WordPress news" section, the category links for each news item need more contrast/non-color indicator as links.

The link has insufficient color contrast of 2.96:1 with the surrounding text. (Minimum contrast is 3:1, link text: #3858e9, surrounding text: #1e1e1e)

Possible fix: These links are flagged because they appear to use color for link identification, so they would need 3:1 contrast. I wonder if the text transform (they're uppercase) is enough of a non-color indicator to flag thesea as links? If not, I think we could just underline them.

https://wordpress.org/state-of-the-word/

1. The red link color does not have enough contrast against the white background.

Element has insufficient color contrast of 3.72 (foreground color: #ff2b2b, background color: #ffffff, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1

Possible fix: The red color should be updated, or swapped out for a different link color — but I know the red was chosen intentionally to match the State of the Word branding. Note that this page will likely have a full design refresh when the 2024 SotW happens.

Old theme

https://wordpress.org/about/privacy/cookies/

https://wordpress.org/about/privacy/data-erasure-request/

https://wordpress.org/about/privacy/data-export-request/

1. The navigation links in the top blue bar don't have enough contrast.

Element has insufficient color contrast of 3.91 (foreground color: #cce3ee, background color: #0073aa, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1

Possible fix: All the links could be white? But then we need a different hover state design.

2. The links in the table are only identified with color, so they need to be 3:1 contrast with text and they are not.

The link has insufficient color contrast of 2.3:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0073aa, surrounding text: #32373c)

Possible fix: Links in tables could also be underlined by default.

https://wordpress.org/hosting/

1. The page tagline does not have enough contrast against the blue background.

Element has insufficient color contrast of 3.91 (foreground color: #cce3ee, background color: #0073aa, font size: 16.9pt (22.5px), font weight: normal). Expected contrast ratio of 4.5:1

Possible fix: Make the tagline white?

Or update all these pages to the new theme, where these are not issues.

Old theme, pages never launched

These pages were flagged, but they're not actually used anywhere, so we can safely ignore these issues. If we decide to launch these pages, they would get an overhaul and use the new design.

• https://wordpress.org/enterprise/content-marketing/
• https://wordpress.org/enterprise/ecommerce/
• https://wordpress.org/enterprise/education/
• https://wordpress.org/enterprise/integrations/
• https://wordpress.org/enterprise/media/

[jasmussen]

In the "Latest WordPress news" section, the category links for each news item need more contrast/non-color indicator as links.

They were deliberately uppercase as the way to differentiate. Underlined would work, but I'd prefer to better understand the criterion first. Another alternative would be to make an edge-case #3959ea color for this; we would not want to update the main blueberry, but that particular shade would pass 3:1.

[jasmussen]

The red link color does not have enough contrast against the white background.

Can update the red to #ee0000.

[jasmussen]

For all the old themes, I'd tend to suggest the real solution is to update those to the new design, which was specifically created to improve contrast and clarity. Bandaids can be fine (white color, underlines, etc), but the problems with those pages are not in accessibility only, and they could very much benefit from the added clarity brought by the larger typeface of the new design, the wider grid, and the stronger color contrast.

[joedolson]

@jasmussen Regarding the Latest WordPress news section, I think a big part of the problem is that we have a compact area that uses three different designs for links:

We have a normal, underlined blue link for 'More news', the post title which are a larger, bold font, and the category which is blue, all caps. It just makes the whole thing a bit confusing.

Additionally, while in the context of this specific panel, all caps means link and so does large and bold, that's not true in a broader sense; the large bold links are almost identical to the headings in the previous panel, which are not linked. All caps is rarely used on the site, but mostly means "this is an acronym" when it does appear.

So...is there an actual WCAG violation here? Maybe not. I think that they technically pass, although if you compare the article link to the headings (which are the nearest comparable text style,) that's more dubious. But because every piece of text in this panel is different from every other piece of text, I don't think it does anything for the user to provide clarity. Having five different text styles in this panel feels very busy.

[fcoveram]

Here is an idea that I think addresses the point correctly and consistently:

• Change the three types of links (More news, Post title, and Category) to be blue without underline. Similar to the topic title in the forum index page, like in "Installing WordPress".
• Change the text style of post title to Paragraph (Short), as documented in the Design Library.
• Change the uppercase of category label to be regular. Similar to how it's shown in a post in News, like this one.

[ryelle]

Just to be clear, @fcoveram, you're suggesting something like this?

As I understand it, we would still need to change the link color to be 3:1 contrast against surrounding text, because this has removed any non-color indicators that these are links. This is for users who can't see color well (low vision or color blindness), who still need some indication that these are links.

Personally, I don't think switching to the default link style for categories looks bad. It doesn't really solve the heading issue @joedolson raised, though.

[fcoveram]

Just to be clear, @fcoveram, you're suggesting something like this?

Yes. But your suggestion seems better after your point of removing non-text indicators.