modellbau/Linksammlung
1
0 Fork 0
Code Pull Requests Releases Wiki Activity
Page: Supported Brands & Accessibility Audit
Pages
Adding custom buttons to your own fork Button Builder Contrast Check Action Home Submitting a new brand to LittleLink Supported Brands & Accessibility Audit
Clone
Supported Brands & Accessibility Audit
Seth Cottle edited this page 2025-03-17 21:26:37 -04:00
Unescape Escape
Table of Contents
This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Introduction

This is a list of all the brands that live in LittleLink and 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 ❌ ⚠️