I create customizable shirts and other products for sale on Redbubble and Zazzle. To help choosing colors for texts and graphics that go well with the colors available for different t-shirt design options, I created the Shirt Color Helper tool.
The Shirt Color Helper is hopefully easy to use and self-explanatory. Nonetheless, I'll explain what it does and how to use it.
Right on top you can pick the text color you want to use for printing on a shirt, by default it is set to black.
In the first tab pane below you see the different colors you can pick on Redbubble when creating a shirt. Colors are displayed in rectangular boxes with the phrase "Sample Text" printed on top in the selected text color. Below each box you see the shirt color name and whether the contrast with the text color is okay to use.
When you choose a different text color, the sample texts and contrast indicators are updated on the fly. The 2nd and 3rd tabs show the colors available as light and dark shirts on Zazzle respectively.
Choosing a good color combination is not only a matter of good contrast, but readability matters especially when printing meaningful text.
Whether the contrast of a color combination is indicated as okay to use () or not () is based on recommendations and formulae from the Web Content Accessibility Guidelines.
A contrast ratio of 3 or higher (WCAG Level AA for large scale text) for shirt and text colors passes as okay, assuming that the font sizes used on shirts are larger than 18pt or 14pt bold. The calculated ratio is shown in a tooltip, when you move your mouse over the indicator icon next to the shirt color name. Values range from1 to 21, the higher the better the contrast.
If you find this tool helpful share it with your shirt-creating friends and don't forget to check out my stores on Redbubble and Zazzle to see if you find a nice shirt or other product for yourself or someone you love.
Happy shirt creation!
Funny programmer shirts offered on Amazon.
This post was written by Ramiro Gómez (@yaph) and published on (updated: ). Ramiro is a developer who likes open source, data mining, visualization and writing. To be informed about new posts you can subscribe to the Geeksta RSS feed.
External links on this website may contain affiliate IDs, which means that I earn a commission if you make a purchase using these links. This allows me to offer hopefully valuable content for free while keeping this website sustainable. For more information, please see the disclosure section on the about page.