microsoft / microsoft/AdaptiveCards

Website Compliance Portal: Color contrast on hexo and storybook links

Open
#6,327 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Accessibility-WCP Area-Accessibility Bug
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Problem Description

WCP scan result for https://adaptivecards.io/
WCP scan result for https://adaptivecards.io/explorer/

Paths:
https://adaptivecards.io/ and https://adaptivecards.io/explorer/

a[href$="storybook\.js\.org"]
a[href$="hexo\.io"]

Snippets:

<a class="ac-footer-link-no-chevron" target="_blank" rel="noopener" href="https://storybook.js.org">Storybook.js</a>
<a class="ac-footer-link-no-chevron" target="_blank" rel="noopener" href="https://hexo.io">Hexo</a>

How to Fix:
Fix the following:

  • Element has insufficient color contrast of 4.06 (foreground color: #0b78d0, background color: #f2f2f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1Element has insufficient color contrast of 4.06 (foreground color: #0b78d0, background color: #f2f2f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

  • Use foreground color: #096cbb and the original background color: #f2f2f2 to meet a contrast ratio of 4.84:1Use foreground color: #096cbb and the original background color: #f2f2f2 to meet a contrast ratio of 4.84:1

  • Or use background color: #fefefe and the original foreground color: #0b78d0 to meet a contrast ratio of 4.52:1.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Search the website and explorer sources for the footer links to storybook.js.org and hexo.io and their color styles. Re-run the linked WCP scans after the change; done means both links meet the required 4.5:1 contrast ratio against their background.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
accessibility, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.