microsoft / microsoft/AdaptiveCards
Website Compliance Portal: Color contrast on hexo and storybook links
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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