On each web page, information must not be conveyed by color alone. Is this rule followed?

8% of men have a form of color blindness. For them, a form field displayed in red looks exactly like a normal field if that's the only difference. If your interface communicates "this field is required" only through red color, a portion of your users does not receive this information.

This criterion requires that each piece of information conveyed by color have at least one other visual indicator: an icon, explicit text, a typographic effect (bold, italic, underline), a geometric shape, or a title attribute. Color can remain present; it helps those who perceive it. But it cannot be the sole channel.

The criterion covers six types of content: colored words, text, images, CSS properties, temporal media (videos, animations), and non-temporal media (infographics, static SVGs). For each occurrence, the question is simple: if you remove the colors, is the information still understandable? If not, the criterion is violated.

Quick verification method: disable CSS stylesheets in your browser (via the Web Developer extension or DevTools) and browse the page. Any content that becomes incomprehensible without color is a defect to correct.

6 tests to detect if information relies solely on color

Color information in a word or group of words

  1. Identify all words or groups of words whose color conveys information (e.g., a word in red to signal an error, a term in green to indicate a valid status).
  2. For each, verify that another visual indicator is present: title attribute, adjacent icon, typographic formatting (<strong>, <em>, underline), distinct shape or position.
  3. If each informational word has an alternative indicator, the test passes. A single word with no indicator other than color is enough to fail the test.

Color information in a passage of text

  1. Identify text passages (sentences, paragraphs) whose background or text color communicates information (e.g., yellow background for a warning, blue text to distinguish links in running content).
  2. For each, verify the presence of a complementary indicator: icon, explicit text label, title attribute, typographic effect.
  3. If all passages have an alternative indicator, the test passes. Otherwise, it fails.

Color information in an image

  1. Identify images (PNG, JPG, exported SVG…) whose content uses color to convey information (e.g., line chart differentiated only by color, geographical map with colored zones).
  2. For each, verify that another means is present in the image itself or in its context: text label on the data, different shape, fill pattern, hatching, or complete description in the alt attribute.
  3. If each image has an alternative indicator, the test passes.

Color information via CSS property

  1. Identify visual effects generated by CSS that convey information through color: colored background of an active element, colored border of an error field, background color of a selected row in a table.
  2. For each, verify that another visual indicator is present (explicit text, icon, shape, different border thickness, pattern).
  3. If each informational CSS property has an alternative indicator, the test passes.

Color information in a temporal media

  1. Watch the temporal media present (videos, animations) and identify moments when color alone communicates information (e.g., a red curve in an animated graph, a status indicator that changes color).
  2. Verify that each colored information has an equivalent: captions, audio description, visible text label on screen simultaneously.
  3. If each occurrence has an alternative indicator, the test passes.

Color information in a non-temporal media

  1. Examine non-temporal media: infographics, static SVG diagrams, exported illustrations. Identify information conveyed solely by color (e.g., pie chart with color legend without labels on the slices).
  2. Verify that each colored information has a non-colored visual equivalent: text label directly on the data, distinct shape or fill pattern, or description in the alt or aria-label attribute.
  3. If each medium has an alternative indicator for each colored information, the test passes.

Examples

❌ Non-compliant : Required fields indicated only by color

<form>
  <label for="nom" style="color: red;">Name</label>
  <input type="text" id="nom" name="nom">
 
  <label for="email" style="color: red;">Email address</label>
  <input type="email" id="email" name="email">
 
  <label for="tel">Phone</label>
  <input type="tel" id="tel" name="tel">
</form>

Red labels are supposed to indicate that fields are required. A red-green colorblind user, or someone viewing the page without CSS (screen reader, high contrast mode, print), does not receive this information. They don't know which fields to fill in priority before submitting the form.

✅ Compliant : Required fields indicated by color AND asterisk

<form>
  <p>Fields marked with an asterisk (<abbr title="required">*</abbr>) are required.</p>
 
  <label for="nom" style="color: red;">Name <abbr title="required">*</abbr></label>
  <input type="text" id="nom" name="nom" required aria-required="true">
 
  <label for="email" style="color: red;">Email address <abbr title="required">*</abbr></label>
  <input type="email" id="email" name="email" required aria-required="true">
 
  <label for="tel">Phone</label>
  <input type="tel" id="tel" name="tel">
</form>

The information "required" is conveyed by red color AND by the asterisk accompanied by a legend at the beginning of the form. Even without CSS, the * symbol and the text instruction allow you to understand which fields are required.

❌ Non-compliant : Server tracking table where critical status is coded by background color only

<table>
  <caption>Server tracking</caption>
  <thead>
    <tr>
      <th>Server</th>
      <th>IP address</th>
      <th>CPU load</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #ffcccc;">
      <td>srv-prod-01</td>
      <td>192.168.1.10</td>
      <td>94 %</td>
    </tr>
    <tr style="background-color: #ccffcc;">
      <td>srv-prod-02</td>
      <td>192.168.1.11</td>
      <td>12 %</td>
    </tr>
  </tbody>
</table>

Red background signals a server under critical load, green a healthy server. No column, no text, and no icon explicitly indicates this. A red-green colorblind user sees two visually identical rows and does not detect the alert. The background color alone is the only vector of information.

✅ Compliant : Pie chart with data accessible via alt and figcaption

<figure>
  <img
    src="camembert-budget-2025.png"
    alt="2025 budget allocation: Marketing 40%, R&amp;D 35%, Support 25%"
  >
  <figcaption>
    <ul>
      <li>Marketing: 40%</li>
      <li>R&amp;D: 35%</li>
      <li>Support: 25%</li>
    </ul>
  </figcaption>
</figure>

The alt attribute describes the graph data in its entirety. The figcaption provides a structured, readable text version, even without seeing the colors of the slices. A colorblind or blind user has access to the same information as someone who can distinguish the colors of the pie chart.

Tips and pitfalls

⚠️ The striped table without explicit status column

A table where critical rows are colored red without any explicit status column is the most frequent error in auditing this criterion. The fix is minimal: add a "Status" column with text values ("Critical", "Normal"). The background color can remain; it then becomes a visual reinforcement rather than the sole information source.

💡 <strong> and <em> validate the criterion, even if not read by assistive technologies

RGAA explicitly specifies that <strong> and <em> tags constitute another way to retrieve information given by color, even if these elements are not systematically announced by assistive technologies. Writing <strong style="color: red;">required field</strong> is sufficient to validate test 3.1.1. It's one of the rare cases where RGAA accepts a semantic solution not perceived by screen readers.

⚠️ Exported graphs as images without direct labels on the data

A PNG line graph with a colored legend outside the graph does not meet test 3.1.3 if the curves themselves do not carry text labels. The colored legend without other distinction is insufficient. Solutions: label the curves directly in the image, provide the data in an adjacent HTML table, or describe all data in the alt attribute.

⚠️ Inline SVG: use shapes and patterns in addition to colors

For non-temporal media in inline SVG (test 3.1.6), combining different shapes (square, circle, triangle) and fill patterns (hatching, dotted, solid) with colors is the most robust solution. It also benefits users who print in black and white or work on a monochrome screen.

⚠️ An error message in red respects the criterion if the text describes the error

An error message text displayed in red under a form field is not a violation. The text carries the information; the color is just a reinforcement. What would constitute a violation: a red icon alone without text, or a red border around a field with no associated error message. Color alone cannot be the only signal.

Frequently asked questions

Why does an error indicated only by red color violate RGAA criterion 3.1?

Yes, if the text itself describes the error. The text is the information; red is a visual reinforcement. What would violate the criterion: a red icon without text, or a red border around a field without visible error message. Tests 3.1.1 and 3.1.2 apply to cases where color is the sole information vector, not to cases where it accompanies information.

How do you audit a PNG or JPG image graph for RGAA criterion 3.1?

Apply the CSS filter filter: grayscale(100%) to the image via DevTools and verify if the data remains readable. If you can no longer distinguish the series in a graph or zones on a map, it's a violation of test 3.1.3. Then check the alt attribute: if it contains the complete data, the criterion is met even if the image itself has no internal solution.

How do you evaluate CSS hover and focus states in the context of RGAA criterion 3.1?

Yes, if these states convey information in the sense of the criterion. A button whose background alone turns green on hover to indicate "action available" violates test 3.1.4. Adding a shape change, icon, or additional label on hover fixes the problem. Focus is more covered by criterion 10.7 (focus visibility), but if focus color is the only indicator of specific information, 3.1 also applies.

How do you fix a video encoding data by color when you cannot modify it?

Audio description or captions can explicitly mention the colored information ("the red curve represents sales, the blue one expenses"). For an animated graph without narration, adding an adjacent HTML table with the same data meets test 3.1.5 without touching the video file. It's often the quickest solution in an existing audit context.

Why do links distinguished only by color in running text violate RGAA 3.1?

It's covered by test 3.1.2. A link identified only by its color in running text is acceptable under two cumulative conditions: the contrast ratio between the link color and the surrounding text color is at least 3:1, AND a supplementary visual indicator appears on hover or focus (underline, border). If one of these two conditions is missing, it's a violation.

References

RGAA 4.1.2: Criterion 3.1
WCAG 2.1:1.3.1 (A)1.4.1 (A)G14G182G111G117G138G2051.3.1 (A)1.4.1 (A)