Non-color indicators
Non-color indicators
Web A11y Checklist
- Overview
- Where do I start?
- Build structure/content
- Provide alternative means of accessing information
- Use color appropriately
- Make tables/docs accessible
Alternatives to color to convey meaning
It is important that you are not using color alone to convey meaning. This can be done through the use of styling (like underlining links), use of patterns, and the addition of text to describe intent.
Appropriate use
Use of text to convey meaning: Below we use color and text to signify dates with available tickets.
| Status | Event date | Description |
|---|---|---|
| Closed | 9/21/25 | Team A vs Team B |
| Open | 9/27/25 | Team A vs Team C |
Accessible links: We cannot use color alone to convey meaning, and that includes indicating to your users that the text is a link with color only. The easiest way to achieve this is by underlining your links.
Below are the WCAG requirements:
- A non-color indicator, such as an underline, must be present on hover.
- The contrast ratio between the surrounding text and the background must be at least 4.5:1.
- The contrast ratio between the link and the background must be at least 4.5:1.
- The contrast ratio between the link and the surrounding text must be at least 3:1.
How to test for compliance
We recommend using an automated checker like WebAIM’s WAVE Browser extension. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues.
You may have to manually check images with text as these will not be scanned with the automated checker.
Common mistakes
Using color in images to convey meaning: A common mistake we see are images that use color alone to convey meaning. This could include bar charts or other graphics. Consider the use of patterns in addition to the use of color.
Color contrast of text in images: If there is text on top of an image, please use WebAim’s Color Contrast Checker to manually check that the color of the text meets standards. In some cases, you may need to check multiple places on the image.
Please note, automated checkers will not pick up this issue. You will need to manually check these items. We recommend that you avoid using text on top of images.