I’ve been working with a lot of different color palettes lately as I’ve been redecorating my room, helping a friend redecorate their room, and also working on other web and graphic design projects. Color palettes are an essential tool for helping to organize color information for branding and design projects, and being able to share them in an accessible way is important for people with vision loss and color deficiencies. Here are my tips for how to write alt text for color palettes and how to make color palettes accessible and easy to understand.
What is alt text?
Alt text is a short written description that displays in place of an image if the image fails to load that tells people what is in an image, such as text, colors, or basic essential details. Screen readers will read alt text out loud so that users who are blind or that have low vision can understand what is in an image. If someone fails to add alt text for an image, the screen reader will either simply say “image” or ignore the image entirely, which means that users miss out on potentially valuable visual content.
Related links
Options for including alt text in color palettes
Alt text for color palettes can be added in a few different ways, including:
- By adding a text description to the alt text attribute when uploading an image
- Adding alt text as a caption or comment to the original image
- When posting an image on social media, such as Facebook, Instagram, Twitter, or Pinterest
- Reading text from the image with another alt text tool (full post on this linked below)
Related links
Choosing color palettes for vision loss and colorblindness
I have an entire post about choosing high contrast color schemes for low vision linked below, but I recognize that some users may need to have more than two or three colors in a color palette. When I am working with someone who has vision loss, I like to ask them what their favorite color is and work around that- even my friends with no usable sight have a favorite color and have a general reference for what certain colors look like.
When choosing a color palette for someone who has a color deficiency or who is colorblind, it helps to visualize how the color palette will look with different types of colorblindness. I’ve linked one of my favorite sources for choosing colors with colorblindness, as it gives users the option to input custom color values and see how their palette would look.
Related links
- Choosing High Contrast Color Schemes For Low Vision
- Coloring for Colorblindness (davidmathlogic.com)
My favorite free tool for organizing color palettes
There are many different ways to create a color palette, but my favorite tool for generating and organizing color palettes is Coolors. The free version allows users to generate palettes with up to 5 different colors and browse different color schemes, as well as randomly generate new ones. I also like that users can browse different colors by shade names and lock colors in place before generating a new palette. Coolors is available as a website and as an Android and iOS app, though my favorite way to access it is with the iOS app.
Related links
- Coolors – The super fast color palettes generator!
- Coolors on the App Store (apple.com)
- Coolors – Apps on Google Play
What to include in alt text for color palettes
When writing alt text for color palettes, it helps to include the following information:
- If a designer or design/paint company created the color palette, mention the author at the beginning of the description with the palette title, i.e “Colors of the year 2022 by Pantone”
- Colors should be listed in order of appearance, from left to right or top to bottom
- Mention color shade names such as lime green or wine red, or default to the listed shade names if they are available on the palette (i.e Purple Mountain Majesty)
- Include HEX or RGB values next to each color, if relevant
- If there is additional text on the color palette such as descriptions, make sure to write that text out verbatim in the order in which it appears
What to exclude in alt text for color palettes
When writing alt text for color palettes, the following information is not helpful for audiences with vision loss or color deficiencies:
- Overly detailed descriptions of colors- it’s ok to include color or shade names, but don’t spend a lot of time describing what red looks like
- Basic color names such as red, orange, purple, etc- color palettes are specific about what colors go together, so shade or specific color names are immensely helpful
- If there is an image associated with a color palette, the image does not need to have extensive alt text since the accompanying color palette is the most valuable information. If I had a color palette with a photo of a parrot, I would write “Color palette inspired by an image of a parrot. Colors included are” followed by the color information
- Opinions on how the color palette looks that are not expressed in the palette itself. If a color palette is labeled “bad colors for a kitchen”, this is considered text that should be included in the alt text, but the author of the alt text should make sure their description is objective and let the viewer come to their own conclusion
Other tips for how to write alt text for color palettes
- Use a color selection tool to get colors from an image and create a palette- there are several browser extensions available that can do this
- Users can search for color names or HEX/RGB values to get in-depth color information or find palettes in an image search tool
- When working on a design project, keep the color palette and its alt text/description handy so that values can be copied and pasted into different programs
- For website color palettes, use black text on a white background whenever possible, as this is the highest contrast option for users with print disabilities and makes it easier for them to use simplified reading tools or assistive technology
