body { -ms-overflow-style: scrollbar; overflow-y: scroll; overscroll-behavior-y: none; } .errorContainer { background-color: #FFF; color: #0F1419; max-width: 600px; margin: 0 auto; padding: 10%; font-family: Helvetica, sans-serif; font-size: 16px; } .errorButton { margin: 3em 0; } .errorButton a { background: #1DA1F2; border-radius: 2.5em; color: white; padding: 1em 2em; text-decoration: none; } .errorButton a:hover, .errorButton a:focus { background: rgb(26, 145, 218); } .errorFooter { color: #657786; font-size: 80%; line-height: 1.5; padding: 1em 0; } .errorFooter a, .errorFooter a:visited { color: #657786; text-decoration: none; padding-right: 1em; } .errorFooter a:hover, .errorFooter a:active { text-decoration: underline; } #placeholder, #react-root { display: none !important; } body { background-color: #FFF !important; }

JavaScript is not available.

We’ve detected that JavaScript is disabled in this browser. Please enable JavaScript or switch to a supported browser to continue using twitter.com. You can see a list of supported browsers in our Help Center.

Terms of Service Privacy Policy Cookie Policy Imprint Ads info © 2023 Twitter, Inc.

Conversation

The World Health Organization estimates that at least 2.2 billion people globally have a vision impairment. Here’s my favorite tip for choosing colors that create enough contrast between background and foreground element: 🧵

3

18

50

In your design tool, choose a color to start with. I usually start with a background color, but the process still applies if you prefer to start with a foreground color instead. Copy the hex color to your clipboard.

Two screens on an app: the first shows a grayscale design, and the second shows a navy blue color applied to the background.

read image description

ALT

2

5

Open colorsafe.co. Paste your hex code into the input labeled “background color” and tap “Generate Color Palette.”

A screenshot of ColorSafe.co showing input fields for background color and WCAG ratio in order to generate color palettes

read image description

ALT

2:55 PM · Jan 12, 2023

959

Views

Replying to

Voilà! A generous helping of colors that you KNOW meet the contrast requirement you’re aiming for, sorted by hue.

Many color swatches generated by ColorSafe.co that have sufficient contrast against the background color I input

read image description

ALT

2

8

What I love most about this tool is that it provides options that I probably wouldn’t have tried on my own.

4 different color options in situ for text that work with my background color

read image description

ALT

1

5

To see this entire process in more detail, check out my video, “How to Quickly Design Beautiful, Accessible, Digital Color Palettes.”

How to Quickly Design Beautiful, Accessible, Digital Color Palettes

In this video, I'll be sharing my favorite tip for creating beautiful and accessible digital color palettes that follow the Web Content Accessibility Guideli...

1

7

Want more small but powerful design tips like this? Lemme know! 1. Follow me

for more of these 2. RT the tweet below to share this entire thread

Quote Tweet

The World Health Organization estimates that at least 2.2 billion people globally have a vision impairment. Here’s my favorite tip for choosing colors that create enough contrast between background and foreground element:

Show this thread

2