SiteLint documentation and guidelines

Alt text should not reference colors

Description

Rule id: alt-color-convey-information.

The rule determines if specified image alt attribute contains named color from the following list:

Named colors list
[
  "alice blue",
  "antique white",
  "aqua",
  "aquamarine",
  "azure",
  "beige",
  "bisque",
  "black",
  "blanched almond",
  "blue",
  "blue violet",
  "brown",
  "burly wood",
  "cadet blue",
  "chartreuse",
  "chocolate",
  "coral",
  "cornflower blue",
  "cornsilk",
  "crimson",
  "cyan",
  "dark blue",
  "dark cyan",
  "dark golden rod",
  "dark gray",
  "dark grey",
  "dark green",
  "dark khaki",
  "dark magenta",
  "dark olive green",
  "darkorange",
  "dark orchid",
  "dark red",
  "dark salmon",
  "dark sea green",
  "dark slate blue",
  "dark slate gray",
  "dark slate grey",
  "dark turquoise",
  "dark violet",
  "deep pink",
  "deep sky blue",
  "dim gray",
  "dim grey",
  "dodger blue",
  "fire brick",
  "floral white",
  "forest green",
  "fuchsia",
  "gainsboro",
  "ghost white",
  "gold",
  "golden rod",
  "gray",
  "grey",
  "green",
  "green yellow",
  "honey dew",
  "hot pink",
  "indian red",
  "indigo",
  "ivory",
  "khaki",
  "lavender",
  "lavender blush",
  "lawn green",
  "lemon chiffon",
  "light blue",
  "light coral",
  "light cyan",
  "light golden rod yellow",
  "light gray",
  "light grey",
  "light green",
  "light pink",
  "light salmon",
  "light sea green",
  "light sky blue",
  "light slate gray",
  "light slate grey",
  "light steel blue",
  "light yellow",
  "lime",
  "lime green",
  "linen",
  "magenta",
  "maroon",
  "medium aqua marine",
  "medium blue",
  "medium orchid",
  "medium purple",
  "medium sea green",
  "medium slate blue",
  "medium spring green",
  "medium turquoise",
  "medium violet red",
  "midnight blue",
  "mint cream",
  "misty rose",
  "moccasin",
  "navajo white",
  "navy",
  "old lace",
  "olive",
  "olive drab",
  "orange",
  "orange red",
  "orchid",
  "pale golden rod",
  "pale green",
  "pale turquoise",
  "pale violet red",
  "papaya whip",
  "peach puff",
  "peru",
  "pink",
  "plum",
  "powder blue",
  "purple",
  "red",
  "rosy brown",
  "royal blue",
  "saddle brown",
  "salmon",
  "sandy brown",
  "sea green",
  "sea shell",
  "sienna",
  "silver",
  "sky blue",
  "slate blue",
  "slate gray",
  "slate grey",
  "snow",
  "spring green",
  "steel blue",
  "tan",
  "teal",
  "thistle",
  "tomato",
  "turquoise",
  "violet",
  "wheat",
  "white",
  "white smoke",
  "yellow",
  "yellow green"
]

What if the image alt text mentions a color that isn’t actually in the image?

If the image alt text mentions a color that isn’t actually in the image, it’s not providing useful information for blind users. To fix this, you should describe the content of the image using the alt text, rather than relying on color. For example, you could say See the red bar on the chart to determine the spike instead of See the red bar on the chart.

This ensures that all users can understand the content of the image, regardless of their ability to see color.

How to fix it

Determine if the named color does not refer to part of the content that conveys information.

Standard

Accessibility, WCAG 2.0, Success Criteria 1.4.1