Fix the contrast-related accessibility violations

[huangkevin-apr]

Issue Description

When running IBM Accessibility Checker (Version 4.0.8) on the homepage, several contrast-related accessibility violations were reported.
Specifically, 8 elements were flagged with the following violation:

The contrast ratio of text with its background must meet WCAG AA requirements

When text and its background colors have less than a 4.5 to 1 contrast ratio it can be difficult for people with moderately low vision to read the text without contrast-enhancing technology.

Violation Screenshot

Violation Report

Refer to Understanding 1.4.3 Contrast (Minimum) for more information about this violation type.

Fix Description

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications.
The generated fixes were manually reviewed and validated before submission.

The reasoning process of A11YRepair to repair current accessibility violations:

"Reasoning": "The user has reported multiple text contrast accessibility violations. All violations share the same root cause: insufficient contrast between the text color and its background.\n\n
### Bug Analysis\n\n1.  **A11Y Rule Violation**: `text_contrast_sufficient`.\n2.  **Violation Details**: The contrast ratio is 4.48, which is below the WCAG AA requirement of 4.5:1 for normal text.\n3.  **Colors**: The foreground text color is `#007d9c`, and the background color is `#f8f8f8`.\n4.  **Affected Elements**: The violations are on \"Learn More\" links (`<a>` tags) and their associated forward arrow icons (`<i>` tags) within several card components, as highlighted in the screenshot. These components share the class `WhyGo-reason`.\n\n
### Root Cause\n\nBy inspecting the provided CSS file `_content/css/styles.css`, I've identified the source of these colors:\n\n*   The text color `#007d9c` is defined by the CSS custom property `--turq-dark`. This variable is then assigned to `--color-text-link`, which is used for links throughout the site.\n*   The background color `#f8f8f8` is defined by `--gray-10`. This is used for `--color-background-accented` and `--color-background-card-footer`, which are applied to the card components containing the failing links.\n\nThe core issue is that the `--turq-dark` color in the site's color palette is not dark enough to provide sufficient contrast against the light gray background defined by `--gray-10`.\n\n
### Remediation Strategy\n\nInstead of applying a narrow fix to only the reported elements, the most effective solution is to correct the color palette itself. This ensures that this contrast issue is resolved for all elements across the website that use this color combination.\n\nI will adjust the value of `--turq-dark` to a slightly darker shade that meets the 4.5:1 contrast ratio requirement. I have selected `#007491`, which provides a contrast ratio of 5.0:1 against `#f8f8f8`, comfortably passing the WCAG AA standard. This change is subtle enough to not drastically alter the site's visual design while fixing the accessibility issue globally.\n\n

Screenshot after applying patches

Verification

• Re-ran IBM Accessibility Checker after applying the patch.
• Confirmed that the previously reported contrast-related accessibility violations no longer occur.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gopherbot]

This PR (HEAD: 70f5638) has been imported to Gerrit for code review.

Please visit Gerrit at https://go-review.googlesource.com/c/website/+/733020.

Important tips:

• Don't comment on this PR. All discussion takes place in Gerrit.
• You need a Gmail or other Google account to log in to Gerrit.
• To change your code in response to feedback:
  • Push a new commit to the branch used by your GitHub PR.
  • A new "patch set" will then appear in Gerrit.
  • Respond to each comment by marking as Done in Gerrit if implemented as suggested. You can alternatively write a reply.
  • Critical: you must click the blue Reply button near the top to publish your Gerrit responses.
  • Multiple commits in the PR will be squashed by GerritBot.
• The title and description of the GitHub PR are used to construct the final commit message.
  • Edit these as needed via the GitHub web interface (not via Gerrit or git).
  • You should word wrap the PR description at ~76 characters unless you need longer lines (e.g., for tables or URLs).
• See the Sending a change via GitHub and Reviews sections of the Contribution Guide as well as the FAQ for details.

[gopherbot]

Message from Gopher Robot:

Patch Set 1:

(1 comment)

---

Please don’t reply on this GitHub thread. Visit golang.org/cl/733020.
After addressing review feedback, remember to publish your drafts!

[gopherbot]

Message from Gopher Robot:

Patch Set 1:

Congratulations on opening your first change. Thank you for your contribution!

Next steps:
A maintainer will review your change and provide feedback. See
https://go.dev/doc/contribute#review for more info and tips to get your
patch through code review.

Most changes in the Go project go through a few rounds of revision. This can be
surprising to people new to the project. The careful, iterative review process
is our way of helping mentor contributors and ensuring that their contributions
have a lasting impact.

---

Please don’t reply on this GitHub thread. Visit golang.org/cl/733020.
After addressing review feedback, remember to publish your drafts!