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.