Updated Supported Brands (markdown)
Seth Cottle
@@ -1,23 +1,27 @@
|
|||||||
Here is a list of all the currently support brands in the main repo. I'll try to keep this updated as new PRs are approved. One of my goals with this list is to help track the color accessibility of the buttons.
|
# Introduction
|
||||||
|
|
||||||
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 will give an incentive to review updated brand guidelines to ensure we're using recommend brand colors, and where necessary, make decisions to deviate from those guidelines in the name of increased visual accessibility.
|
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.
|
||||||
|
|
||||||
|
## 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.
|
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.
|
> 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.
|
> Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
|
||||||
|
|
||||||
|
## Brand Table
|
||||||
|
|
||||||
| Brand | Text Color | Button Color | Contrast Ratio | Normal Text | - | Large Text | - |
|
| Brand | Text Color | Button Color | Contrast Ratio | Normal Text | - | Large Text | - |
|
||||||
|--------------------|------------|--------------|----------------|---------------|-----------|--------------|-----------|
|
|--------------------|------------|--------------|----------------|-------------|----------|------------|----------|
|
||||||
| - | - | - | - | WCAG AA | WCAG AAA | WCAG AA | WCAG AAA |
|
| - | - | - | - | WCAG AA | WCAG AAA | WCAG AA | WCAG AAA |
|
||||||
| Default | #ffffff | #0085ff | 3.62:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
|
||||||
| Amazon | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| Amazon | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Apple App Store | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| Apple App Store | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Bandcamp | #ffffff | #1d9fc3 | 3.08:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
| Bandcamp | #ffffff | #1d9fc3 | 3.08:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
||||||
| Buy Me a Coffee | #100a26 | #ffdd00 | 14.26:1 | ✅ | ✅ | ✅ | ✅ |
|
| Buy Me a Coffee | #100a26 | #ffdd00 | 14.26:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Ko-fi | #ffffff | #13C3FF | 2.04:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
|
||||||
| Cash App | #ffffff | #00c244 | 2.38:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
| Cash App | #ffffff | #00c244 | 2.38:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
||||||
|
| Default | #ffffff | #0085ff | 3.62:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
||||||
| dev.to | #000000 | #f5f5f5 | 19.26:1 | ✅ | ✅ | ✅ | ✅ |
|
| dev.to | #000000 | #f5f5f5 | 19.26:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Discord | #ffffff | #5865f2 | 4.6:1 | ✅ | ✅ | ✅ | ✅ |
|
| Discord | #ffffff | #5865f2 | 4.6:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Etsy | #ffffff | #F45800 | 3.36:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
| Etsy | #ffffff | #F45800 | 3.36:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
||||||
@@ -29,9 +33,12 @@ From WebAIM on what determines a pass/fail for WCAG AA and AAA.
|
|||||||
| Gitlab | #ffffff | #6151b2 | 6.3:1 | ✅ | ⛔ | ✅ | ✅ |
|
| Gitlab | #ffffff | #6151b2 | 6.3:1 | ✅ | ⛔ | ✅ | ✅ |
|
||||||
| Goodreads | #333333 | #f3f1e6 | 11.15:1 | ✅ | ✅ | ✅ | ✅ |
|
| Goodreads | #333333 | #f3f1e6 | 11.15:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Google Play Store | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| Google Play Store | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
|
| hashnode | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Instagram | #ffffff | Gradient | Indeterminate | ➖ | ➖ | ➖ | ➖ |
|
| Instagram | #ffffff | Gradient | Indeterminate | ➖ | ➖ | ➖ | ➖ |
|
||||||
| kickstarter | #ffffff | #05ce78 | 2.07:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
| kickstarter | #ffffff | #05ce78 | 2.07:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
||||||
| Kit | #ffffff | #000000 | 21: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 | ✅ | ⛔ | ✅ | ✅ |
|
| LinkedIn | #ffffff | #2867b2 | 5.71:1 | ✅ | ⛔ | ✅ | ✅ |
|
||||||
| Mastodon | #ffffff | #17063B | 18.65:1 | ✅ | ✅ | ✅ | ✅ |
|
| Mastodon | #ffffff | #17063B | 18.65:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Medium | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| Medium | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
@@ -57,8 +64,8 @@ From WebAIM on what determines a pass/fail for WCAG AA and AAA.
|
|||||||
| Tumblr | #ffffff | #131313 | 18.58:1 | ✅ | ✅ | ✅ | ✅ |
|
| Tumblr | #ffffff | #131313 | 18.58:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Twitch | #ffffff | #9146ff | 4.64:1 | ✅ | ⛔ | ✅ | ✅ |
|
| Twitch | #ffffff | #9146ff | 4.64:1 | ✅ | ⛔ | ✅ | ✅ |
|
||||||
| Twitter | #ffffff | #1da1f2 | 2.82:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
| Twitter | #ffffff | #1da1f2 | 2.82:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
||||||
| Venmo | #ffffff | #008CFF | 3.38:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
|
||||||
| Untappd | #ffffff | #ffc000 | 1.64:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
| Untappd | #ffffff | #ffc000 | 1.64:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
||||||
|
| Venmo | #ffffff | #008CFF | 3.38:1 | ⛔ | ⛔ | ✅ | ⛔ |
|
||||||
| Vimeo | #ffffff | #1ab7ea | 2.33:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
| Vimeo | #ffffff | #1ab7ea | 2.33:1 | ⛔ | ⛔ | ⛔ | ⛔ |
|
||||||
| VRChat | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| VRChat | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Website | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| Website | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
@@ -66,5 +73,3 @@ From WebAIM on what determines a pass/fail for WCAG AA and AAA.
|
|||||||
| Wordpress | #ffffff | #21759b | 5.14:1 | ✅ | ⛔ | ✅ | ✅ |
|
| Wordpress | #ffffff | #21759b | 5.14:1 | ✅ | ⛔ | ✅ | ✅ |
|
||||||
| Xing | #ffffff | #026466 | 6.95:1 | ✅ | ⛔ | ✅ | ✅ |
|
| Xing | #ffffff | #026466 | 6.95:1 | ✅ | ⛔ | ✅ | ✅ |
|
||||||
| YouTube | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
| YouTube | #ffffff | #000000 | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
||||||
| Letterboxd | #ffffff | #2c3440 | 12.55:1 | ✅ | ✅ | ✅ | ✅ |
|
|
||||||
| hashnode | #000000 | #ffffff | 21:1 | ✅ | ✅ | ✅ | ✅ |
|
|
||||||
Reference in New Issue
Block a user