Background and foreground colors do not have a sufficient contrast ratio.

[veronicamar]

From PageSpeed: Low-contrast text is difficult or impossible for many users to read.

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.

Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements found to have a 1:1 ratio are considered "incomplete" and require a manual review.

Color Contrast Analysis Tools: Below are links to tools that will analyze color contrast ratios against guidelines:

axe DevTools Browser Extensions — Deque's enterprise product, axe DevTools HTML, enables development groups to integrate accessibility testing into existing automated testing processes and is used by customers in conjunction with Deque's axe Monitor accessibility monitoring and reporting product. In addition to providing a code library for integration in many programming languages, axe DevTools also includes web accessibility analysis extensions for Google Chrome and Mozilla Firefox, enabling enterprise front-end developers to run a quick accessibility test at any time. Analysis tools return detailed information on accessibility violations and instructions to fix issues with including links to more in-depth knowledge. axe-core — The axe accessibility engine is an open-source JavaScript accessibility rules library that is fast, returns no false positive errors or duplicate results, and is available as a GitHub repository, browser plugin, or framework integration.

[kohantikanath]

Hi @cdrini @veronicamar,

I’d like to address the low-contrast text issue. I’ll ensure all text elements meet the required color contrast ratios for accessibility. Please assign me to this task!

[cdrini]

Thanks @kohantikanath ! This one needs some design before it can be implemented.

@veronicamar would you be willing propose some designs we can make so this can meet the colour accessibility criteria? Maybe changes to the colour, or changes to the styling of this UI element?

[veronicamar]

Hi so I have looked at passable colours for this and with the following it passes the accessibility test:

White: #FFFFFF Blue: #3A5B7D - this is from the current shade used but contrast increased

Please let me know if you need further support

[rebecca-shoptaw]

Hi @veronicamar, thanks for working on this! That color contrast looks great to me, but I worry it would be too similar to the non-selected hover behavior, which the lighter blue was supposed to distinguish from:

Perhaps instead, if the un-selected color (#456f9f) passes the accessibility test, we could make the selected link that color, and the un-selected link another existing color from the codebase, i.e. perhaps a gray like so:

Or even better, we could try to style the un-selected link to look like the vanilla button style (since I know the gray background usually indicates a disabled button on the site):

But that might differentiate the two too much and look a little strange! Perhaps just finding another existing color from the site to use for the non-selected on hover would be best. 🙂

[veronicamar]

@rebecca-shoptaw I think those suggestions are great and you are totally right about the colour! Perhaps the 'edit' button is the best way to go forward as it will pass the accessibility score however I will look at other buttons on the site to see if it makes sense

[rebecca-shoptaw]

@veronicamar Thank you and that sounds good, would love to get some more input from others (@cdrini ? more design people?) before making a call since it's a fairly big design decision.