🎩 What? Why?

The color contrast between the phases header background and the phase dates for processes is not sufficient.

This darkens the color to make the color contrast difference sufficient.

The background color is #e8e8e8 and the foreground color is #97a2b2.

📌 Related Issues

• Related to Seek alternatives to design changes due to accessibility #5942, Accessibility/final #6246, Improve accessibility vol 2 #6124, Improve accessibility issues #5684

Testing

1. Go to: https://webaim.org/resources/contrastchecker/
2. Add the old foreground color (#97a2b2) as the foreground color
3. Add the body background color (#e8e8e8) as the background color
4. See the contrast ratio
5. Repeat the test with the updated foreground color (#2c2930)

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.

📷 Screenshots

Before:

After: