Skip to content

Supported Brands & Accessibility Audit

Seth Cottle edited this page Mar 18, 2025 · 2 revisions

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 ⚠️

Clone this wiki locally