✅ [outreachy] fix: adjust styles to fix a11y issues

[FatumaA]

This PR Fixes #5371

It focuses on color contrast between buttons and links. And aims to solve these issues - https://gist.github.com/FatumaA/3141068e904cbcf4e2c53936f42d3d62

[svrnm]

Can you run the reporting tool against the preview site and verify that the issues have been resolved?

https://deploy-preview-5481--opentelemetry.netlify.app/

[FatumaA]

It's all clear for 2AA except for the code blocks

pa11y https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

Welcome to Pa11y

Running Pa11y on URL https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

Results for URL: https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(347) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_ecto

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(347) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 1.2.0"

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(351) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_bandit

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(351) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 0.1.4"

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(354) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_ecto

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(354) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 1.2.0"

6 Errors

[FatumaA]

And same for the other tool

[svrnm]

I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR. Thank you!

---

if you want to clean the CI check issues run npm run fix:all locally and update the changes.