modellbau/Linksammlung
1
0
Fork 0
Code Pull Requests Releases Wiki Activity

Updated Supported Brands (markdown)

Seth Cottle
2025-03-17 01:04:55 -04:00
parent 0439ce623e
commit bb09515612
2 changed files with 214 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
Supported-Brands-&-Accessibility-Audit.md Normal file

@@ -0,0 +1,214 @@
# LittleLink Brand Accessibility Audit
## Introduction
This is a list of all the brands that live in [LittleLink](https://github.com/sethcottle/littlelink) and [LittleLink Extended](https://github.com/sethcottle/littlelink-extended). I'll _try_ to keep this updated as new PRs are approved.
It's important to note that even though LittleLink strives to make accessibility a priority, that doesn't mean each brand that has been added to LittleLink is the hallmark of accessibility. In the event a brand has a public and published brand guidelines document, new additions follow it, even if it means impacting accessibility. In the absence of specific brand guidelines, the button's style is crafted to be consistent with the brand's public image on their website or social media platforms—adaptations retain the original essence of the brand.
---
## Accessibility Through Color
I've started validating the contrast ratios of the text color (foreground color) and button color (background color). This helps ensure we're using brand colors in a way that is recommended while also making decisions to improve visual accessibility where needed.
This process helps identify cases where improving contrast would enhance readability and usability, even if it means adapting a brand's guidelines slightly.
---
## Methodology
- The contrast ratios are calculated using the **WCAG 2.1 guidelines** for text contrast, with a minimum ratio of **4.5:1** for normal text. I've increased this from the previous 3.5:1 ratio we leaned on to further increase readability.
- Background colors are tested against both a **light theme background** (#ffffff) and a **dark theme background** (#121212).
- Buttons that fail the contrast test against a background may require a stroke to ensure sufficient contrast and visual separation.
- Gradients and non-solid backgrounds are flagged for **manual review** since automated contrast tools may not accurately assess them.
---
## Handling Brand Guidelines vs Accessibility
- Where possible, LittleLink adheres to the brand’s official guidelines for color and styling.
- If improving contrast would significantly enhance accessibility without sacrificing brand recognition, adjustments are considered on a case-by-case basis.
- If a brand’s official guidelines directly conflict with accessibility standards, I'd like to note that here.
---
## Stroke Recommendations
- A **dark stroke** is recommended when a button’s background color lacks sufficient contrast against a light theme background.
- A **white stroke** is recommended when a button’s background color lacks sufficient contrast against a dark theme background.
- Some buttons meets recommended contrast rations on both background colors, therefore, no stroke is required.
---
## How to Contribute
- If a brand updates its guidelines or colors, feel free to submit a PR.
- If you notice a contrast issue or have accessibility suggestions, open an issue or start a discussion in the repository.
---
## Why This Helps
Improving contrast isn’t just about meeting technical standards—it’s about ensuring that every user, regardless of visual ability, can comfortably navigate and engage with the content. Stronger contrast improves readability, reduces eye strain, and creates a more inclusive user experience.
## LittleLink Brands
|Brand |Text Color|Button Background |Border |Text Contrast Ratio|WCAG Text Pass|Button vs Light|Button vs Dark|Stroke Recommendation|Dark Stroke|Light Stroke|
|------------------|----------|-------------------------------------|-----------------|-------------------|--------------|---------------|--------------|---------------------|-----------|------------|
|Default |#ffffff |#2457F5 |1px solid #ffffff|5.4 |✅ |5.4 |4 |Light Stroke |❌ |✅ |
|Amazon |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Amazon Music |#000000 |#25D1DA |none |5 |✅ |5 |2.8 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Apple App Store |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Apple Invites |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Apple Music |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Apple Music Alt |#ffffff |Gradient ( #FB5C74, #FA233B) |none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Apple Podcasts |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Apple Podcasts Alt|#ffffff |Gradient ( #F452FF, #832BC1) |none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Bandcamp |#ffffff |#1d9fc3 |none |5.5 |✅ |5.5 |2.8 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Behance |#ffffff |#0057FF |1px solid #FFFFFF|5.5 |✅ |5.5 |2.8 |Light Stroke |❌ |✅ |
|Bluesky |#FFFFFF |#1185FE |none |4.5 |✅ |4.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Bluesky Alt |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Buy Me a Coffee |#000000 |#ffdd00 |none |10 |✅ |2 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Cal.com |#FFFFFF |#292929 |1px solid #FFFFFF|18 |✅ |18 |3 |Light Stroke |❌ |✅ |
|Calendly |#FFFFFF |#006BFF |none |4.5 |✅ |4.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Cash App |#ffffff |Gradient ( #00d64b, #00c244) |none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|dev.to |#000000 |#f5f5f5 |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Discogs |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Discogs Alt |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Discord |#ffffff |#5865F2 |none |4.6 |✅ |3.2 |7 |DARK STROKE NEEDED |⚠️ |❌ |
|Dribbble |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Etsy |#ffffff |#F45800 |none |3.5 |❌ |3.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Facebook |#ffffff |#0866FF |none |5 |✅ |5 |2.5 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Facebook Messenger|#ffffff |#0866FF |none |5 |✅ |5 |2.5 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Figma |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Fiverr |#ffffff |#1DBF73 |none |12 |✅ |12 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Flickr |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|GitHub |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|GitLab |#ffffff |#6151b2 |none |5 |✅ |5 |2.8 |LIGHT STROKE NEEDED |❌ |⚠️ |
|GoFundMe |#ffffff |#02A95C |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Goodreads |#333333 |#f3f1e6 |1px solid #212121|18 |✅ |18 |4 |Dark Stroke |✅ |❌ |
|Google Black |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Google Play Store |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Google Scholar |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Hashnode |#000000 |#ffffff |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Instagram |#ffffff |Gradient ( #1400c8, #b900b4, #f50000)|none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Kick |#ffffff |#000000 |1px solid #ffffff|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Kick Alt |#000000 |#01e701 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Kickstarter |#ffffff |#05ce78 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Kit |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Ko-fi |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Last.fm |#ffffff |#D51007 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Letterboxd |#ffffff |#2c3440 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Line |#FFFFFF |#06C755 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|LinkedIn |#ffffff |#2867b2 |none |5.5 |✅ |5.5 |2.8 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Mailchimp |#000000 |#FFE01B |none |10 |✅ |2 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Mastodon |#ffffff |#17063B |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Medium |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Microsoft |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Notion |#000000 |#ffffff |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Obsidian |#ffffff |#262626 |1px solid #ffffff|18 |✅ |18 |4 |Light Stroke |❌ |✅ |
|OnlyFans |#ffffff |#00AEEF |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Patreon |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|PayPal |#ffffff |#002991 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Pinterest |#000000 |#ffffff |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Product Hunt |#000000 |#ffffff |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Reddit |#FFFFFF |#FF4500 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Shop |#ffffff |#5A31F4 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Signal |#ffffff |#3a76f0 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Slack |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Snapchat |#000000 |#fffc00 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|SoundCloud |#ffffff |#ff5500 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Spotify |#191414 |#1db954 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Spotify Alt |#FFFFFF |#191414 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Square |#FFFFFF |#006AFF |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Stack Overflow |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Steam |#ffffff |Gradient ( #08BBFF, #2B75FF) |none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Steam Alt |#ffffff |Gradient ( #09172a, #072a57, #0c5085)|none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Strava |#ffffff |#fc5200 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Substack |#ffffff |#FF6719 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Telegram |#ffffff |#3faee8 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Threads |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Threema |#000000 |#3fe669 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|TikTok |#ffffff |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Trello |#ffffff |#0065ff |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Tumb |#ffffff |#131313 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Twitch |#ffffff |#9146ff |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Unsplash |#000000 |#ffffff |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Venmo |#ffffff |#008CFF |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Vimeo |#ffffff |#1ab7ea |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|VSCO |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|WhatsApp |#ffffff |#455a64 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|WordPress |#ffffff |#3858E9 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|X |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|YouTube |#ffffff |#282828 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|YouTube Alt |#ffffff |#FF0000 |none |18 |✅ |18 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Zoom |#ffffff |#0B5CFF |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
## LittleLink Extended Brands
|Brand |Text Color|Button Background |Border |Text Contrast Ratio|WCAG Text Pass|Button vs Light|Button vs Dark|Stroke Recommendation|Dark Stroke|Light Stroke|
|------------------|----------|-------------------------------------|-----------------|-------------------|--------------|---------------|--------------|---------------------|-----------|------------|
|500px |#000000 |#FFFFFF |1px solid #000000|21 |✅ |1 |18.7 |Dark Stroke |✅ |❌ |
|Alpha Universe |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|AniList |#FFFFFF |#2B2D42 |1px solid #FFFFFF|7.5 |✅ |5 |2.5 |Light Stroke |❌ |✅ |
|Audiomack |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Babylist |#FFFFFF |#6E3264 |1px solid #FFFFFF|9.1 |✅ |9.1 |4 |Light Stroke |❌ |✅ |
|Bandsintown |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|BeReal |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Big Cartel |#FFFFFF |#222222 |1px solid #FFFFFF|16 |✅ |16 |4 |Light Stroke |❌ |✅ |
|Bonfire |#FFFFFF |#F49979 |1px solid #3D4853|3.8 |❌ |2 |10 |Dark Stroke |✅ |❌ |
|Cameo |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Clubhouse |#1F1F1A |#F1EFE3 |1px solid #212121|15 |✅ |1.2 |20 |Dark Stroke |✅ |❌ |
|Codepen |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Deezer |#FFFFFF |#181818 |1px solid #FFFFFF|12 |✅ |10.5 |2.5 |Light Stroke |❌ |✅ |
|Devpost |#FFFFFF |#003E54 |1px solid #FFFFFF|15 |✅ |18 |3 |Light Stroke |❌ |✅ |
|Distiller |#FFFFFF |#ED5C47 |none |3.8 |❌ |3.8 |8 |DARK STROKE NEEDED |⚠️ |❌ |
|Filmweb |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|GOG |#FFFFFF |#303030 |1px solid #FFFFFF|15 |✅ |15 |3 |Light Stroke |❌ |✅ |
|Guilded |#000000 |#F5C400 |none |12 |✅ |1.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Gumroad |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|HackerEarth |#FFFFFF |#2B3352 |none |12 |✅ |10 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|HackerRank |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|itch.io |#FFFFFF |#FA5C5C |none |3.5 |❌ |3.5 |8 |DARK STROKE NEEDED |⚠️ |❌ |
|Layers |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|LeetCode |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Lemmy |#FFFFFF |#14854F |none |12 |✅ |12 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|ListenBrainz |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Matrix |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Micro.blog |#FFFFFF |#FD9927 |none |4 |❌ |4 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Mixcloud |#FFFFFF |#5000FF |none |7 |✅ |7 |3 |LIGHT STROKE NEEDED |❌ |⚠️ |
|MyAnimeList |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|NGL |#FFFFFF |Gradient (#ff8d10, #ec1187) |none |N/A |⛔️ |N/A |N/A |Gradient Review |⛔️ |⛔️ |
|Nostr |#FFFFFF |#A915FF |none |4.5 |✅ |4.5 |10 |LIGHT STROKE NEEDED |❌ |⚠️ |
|OP.GG |#FFFFFF |#5383E8 |none |5 |✅ |5 |2.8 |LIGHT STROKE NEEDED |❌ |⚠️ |
|OpenSea |#FFFFFF |#0086FF |1px solid #0086FF|3.6 |❌ |3.6 |8 |Dark Stroke |✅ |❌ |
|OpenStreetMap |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|ORCID ID |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|osu! |#000000 |#FF8EE6 |none |3.5 |❌ |3.5 |8 |DARK STROKE NEEDED |⚠️ |❌ |
|Partiful |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|PeerTube |#000000 |#FCE8DB |1px solid #000000|18 |✅ |1.1 |18 |Dark Stroke |✅ |❌ |
|Pixelfed |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|PlayStation |#FFFFFF |#0070D1 |none |4.5 |✅ |4.5 |10 |No Stroke Needed |⛔️ |⛔️ |
|Qobuz |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|QQ |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Ravelry |#000000 |#F3F4F0 |1px solid #000000|18 |✅ |18 |3 |Light Stroke |❌ |✅ |
|Redbubble |#e41321 |#ffffff |1px solid #212121|4.9 |✅ |4.9 |18 |Dark Stroke |✅ |❌ |
|ResearchGate |#000000 |#FFFFFF |1px solid #212121|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Revolut |#000000 |#ffffff |1px solid black |21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|Roll20 |#FFFFFF |#EC008C |none |6.5 |✅ |6.5 |3 |LIGHT STROKE NEEDED |❌ |⚠️ |
|SimpleX Chat |#000000 |#F3F6F7 |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|SimpleX Chat Alt |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Skoob |#FFFFFF |#3189C8 |none |4.5 |✅ |4.5 |10 |No Stroke Needed |⛔️ |⛔️ |
|SpaceHey |#FFFFFF |#3234CF |none |4.5 |✅ |4.5 |10 |No Stroke Needed |⛔️ |⛔️ |
|Tidal |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|Trakt |#ffffff |#ED1C24 |none |3.5 |❌ |3.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Untappd |#000000 |#ffc000 |none |5 |✅ |5 |2.5 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Upwork |#FFFFFF |#14A800 |none |12 |✅ |12 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Vero |#FFFFFF |#000000 |1px solid #FFFFFF|21 |✅ |21 |1.1 |Light Stroke |❌ |✅ |
|VRChat |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|WIP |#000000 |#F9DB00 |none |8 |✅ |1.5 |10 |DARK STROKE NEEDED |⚠️ |❌ |
|Write.as |#000000 |#FFFFFF |1px solid #000000|21 |✅ |21 |1.1 |Dark Stroke |✅ |❌ |
|WriteFreely |#000000 |#F4F4F4 |1px solid #000000|18 |✅ |18 |4 |Light Stroke |❌ |✅ |
|Xbox |#FFFFFF |#107C10 |none |15 |✅ |15 |4 |LIGHT STROKE NEEDED |❌ |⚠️ |
|Xing |#FFFFFF |#026466 |none |8 |✅ |8 |3 |LIGHT STROKE NEEDED |❌ |⚠️ |

77
Supported-Brands.md

@@ -1,77 +0,0 @@
# Introduction
This is a list of all the brands that live in the main repo. I'll try to keep this updated as new PRs are approved, and eventually add in the brands from LittleLink-Extended.
It's important to note that even though LittleLink strives to make accessibility a priority, that doesn't mean each brand that has been added to LittleLink is the hallmark of accessibility. In the event a brand has a public and published brand guidelines document, new additions follow it, even if it means impacting accessibility. In the absence of specific brand guidelines, the button's style is crafted to be consistent with the brand's public image on their website or social media platforms—adaptations retain the original essence of the brand.
## Accessibility Through Color
Using the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/), I've started to validate the contrast ratios of the text color (foreground color) and button color (background color). This gives an incentive to review updated brand guidelines to ensure we're using brand colors in a way that are recommended and where necessary, make decisions to deviate from those guidelines in the name of increased visual accessibility.
From WebAIM on what determines a pass/fail for WCAG AA and AAA.
> WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
> Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
## Brand Table (out of date)
| Brand | Text Color | Button Color | Contrast Ratio | Normal Text | - | Large Text | - |
|--------------------|------------|--------------|----------------|-------------|----------|------------|----------|
| - | - | - | - | WCAG AA | WCAG AAA | WCAG AA | WCAG AAA |
| Amazon | `#000000` | `#ffffff` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Apple App Store | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Bandcamp | `#ffffff` | `#1d9fc3` | `3.08:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Buy Me a Coffee | `#100a26` | `#ffdd00` | `14.26:1` | ✅ | ✅ | ✅ | ✅ |
| Cash App | `#ffffff` | `#00c244` | `2.38:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Default | `#ffffff` | `#0085ff` | `3.62:1` | ⛔ | ⛔ | ✅ | ⛔ |
| dev.to | `#000000` | `#f5f5f5` | `19.26:1` | ✅ | ✅ | ✅ | ✅ |
| Discord | `#ffffff` | `#5865f2` | `4.6:1` | ✅ | ✅ | ✅ | ✅ |
| Etsy | `#ffffff` | `#F45800` | `3.36:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Facebook | `#ffffff` | `#1877f2` | `4.23:1` | ✅ | ✅ | ✅ | ✅ |
| Facebook Messenger | `#ffffff` | `Gradient` | `Indeterminate` | ➖ | ➖ | ➖ | ➖ |
| Figma | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Flickr | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| GitGub | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Gitlab | `#ffffff` | `#6151b2` | `6.3:1` | ✅ | ⛔ | ✅ | ✅ |
| Goodreads | `#333333` | `#f3f1e6` | `11.15:1` | ✅ | ✅ | ✅ | ✅ |
| Google Play Store | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Gashnode | `#000000` | `#ffffff` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Instagram | `#ffffff` | `Gradient` | `Indeterminate` | ➖ | ➖ | ➖ | ➖ |
| Kickstarter | `#ffffff` | `#05ce78` | `2.07:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Kit | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Ko-fi | `#ffffff` | `#13C3FF` | `2.04:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Letterboxd | `#ffffff` | `#2c3440` | `12.55:1` | ✅ | ✅ | ✅ | ✅ |
| LinkedIn | `#ffffff` | `#2867b2` | `5.71:1` | ✅ | ⛔ | ✅ | ✅ |
| Mastodon | `#ffffff` | `#17063B` | `18.65:1` | ✅ | ✅ | ✅ | ✅ |
| Medium | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Notion | `#000000` | `#ffffff` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| OnlyFans | `#ffffff` | `#00AEEF` | `2.52:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Patreon | `#ffffff` | `#ff424d` | `3.42:1` | ⛔ | ⛔ | ✅ | ⛔ |
| PayPal | `#ffffff` | `#003087` | `11.84:1` | ✅ | ✅ | ✅ | ✅ |
| Pinterest | `#000000` | `#ffe2eb` | `1.21:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Producthunt | `#da552f` | `#ffffff` | `3.94:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Redbubble | `#e41321` | `#ffffff` | `4.75:1` | ✅ | ⛔ | ✅ | ✅ |
| Reddit | `#000000` | `#d7dfe2` | `15.54:1` | ✅ | ✅ | ✅ | ✅ |
| Signal | `#ffffff` | `#3a76f0` | `4.17:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Skoob | `#ffffff` | `#3189c8` | `3.78:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Snapchat | `#000000` | `#fffc00` | `19.17:1` | ✅ | ✅ | ✅ | ✅ |
| SoundCloud | `#ffffff` | `#ff5500` | `3.2:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Spotify | `#191414` | `#1db954` | `7.05:1` | ✅ | ✅ | ✅ | ✅ |
| Steam | `#ffffff` | `#171a21` | `17.41:1` | ✅ | ✅ | ✅ | ✅ |
| Strava | `#ffffff` | `#fc5200` | `3.3:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Telegram | `#ffffff` | `#3faee8` | `2.49:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Threema | `#000000` | `#3fe669` | `12.73:1` | ✅ | ✅ | ✅ | ✅ |
| TikTok | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Trello | `#ffffff` | `#0065ff` | `4.87:1` | ✅ | ⛔ | ✅ | ✅ |
| Tumblr | `#ffffff` | `#131313` | `18.58:1` | ✅ | ✅ | ✅ | ✅ |
| Twitch | `#ffffff` | `#9146ff` | `4.64:1` | ✅ | ⛔ | ✅ | ✅ |
| Twitter | `#ffffff` | `#1da1f2` | `2.82:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Untappd | `#ffffff` | `#ffc000` | `1.64:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| Venmo | `#ffffff` | `#008CFF` | `3.38:1` | ⛔ | ⛔ | ✅ | ⛔ |
| Vimeo | `#ffffff` | `#1ab7ea` | `2.33:1` | ⛔ | ⛔ | ⛔ | ⛔ |
| VRChat | `#000000` | `#ffffff` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| Website | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |
| WhatsApp | `#ffffff` | `#455a64` | `7.24:1` | ✅ | ✅ | ✅ | ✅ |
| Wordpress | `#ffffff` | `#21759b` | `5.14:1` | ✅ | ⛔ | ✅ | ✅ |
| Xing | `#ffffff` | `#026466` | `6.95:1` | ✅ | ⛔ | ✅ | ✅ |
| YouTube | `#ffffff` | `#000000` | `21:1` | ✅ | ✅ | ✅ | ✅ |