# Color Contrast and Independence
Contrast ratios, color independence, sensory characteristics.
## Criteria
| Standard | Criteria |
| -------- | --------------------------------------------------------------------------------------------------------------------- |
| WCAG 2.2 | 1.3.3 Sensory Characteristics (A), 1.4.1 Use of Color (A), 1.4.3 Contrast Minimum (AA), 1.4.11 Non-text Contrast (AA) |
| RGAA 4.1 | 3.1–3.3 Colors |
### Sensory Characteristics — WCAG 1.3.3 (A) / RGAA 3.1
Instructions must not rely solely on shape, color, size, location, or sound. Wrong: "Click the round button" or "See the red text". Correct: "Click the Submit button" or "See the error message labeled Email".
### Use of Color — WCAG 1.4.1 (A) / RGAA 3.1
Color cannot be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. Always add a secondary indicator: icon, text label, pattern, underline.
### Contrast Minimum — WCAG 1.4.3 (AA) / RGAA 3.2
| Element | Ratio |
| ------------------------------- | -------------- |
| Normal text (<18pt) | **4.5:1** |
| Large text (≥18pt or 14pt bold) | **3:1** |
| Incidental/decorative, logos | No requirement |
### Non-text Contrast — WCAG 1.4.11 (AA) / RGAA 3.3
UI components and graphical objects: **3:1** contrast ratio. Applies to: form field borders, button borders, focus indicators, icons conveying information, chart elements.
---
## RGAA 4.1 — Theme 3: Couleurs (Criteria 3.1–3.3)
### Criterion 3.1 — Information must not be conveyed by color alone (Level A)
> Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur.
WCAG references: 1.3.1 Info and Relationships (A), 1.4.1 Use of Color (A).
#### Test 3.1.1 — Color on words or groups of words
For each word or group of words whose color carries information, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where color on a word or group of words conveys information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### Test 3.1.2 — Color indication given by text
For each color indication given by text, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where a text references color to convey information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### Test 3.1.3 — Color on images conveying information
For each image conveying information via color, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where color in an image conveys information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### Test 3.1.4 — CSS color properties conveying information
For each CSS property determining a color and conveying information, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where a CSS color property conveys information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### Test 3.1.5 — Time-based media conveying information by color
For each time-based media conveying information via color, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where color in a time-based media conveys information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### Test 3.1.6 — Non-temporal media conveying information by color
For each non-temporal media conveying information via color, the information must not be conveyed by color alone.
**Methodology:**
1. Find all instances where color in a non-temporal media conveys information.
2. For each, verify an alternative means exists (title attribute, icon, graphical effect of shape/position, typographic effect, etc.).
3. If all pass, the test is validated.
#### WCAG Techniques for 3.1
G14, G182, G111, G117, G138, G205.
---
### Criterion 3.2 — Text contrast must be sufficient (Level AA)
> Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
WCAG reference: 1.4.3 Contrast (Minimum) (AA).
#### Test 3.2.1 — Normal-weight text < 24px
Text and text images without bold effect at a rendered size below 24px must satisfy one of:
- Contrast ratio between text and background is at least **4.5:1**.
- A mechanism allows the user to display text with a contrast ratio of at least **4.5:1**.
**Methodology:**
1. Find all non-bold text and text images with rendered size < 24px that could pose contrast issues.
2. For each, verify that either the contrast ratio is at least 4.5:1, or a mechanism allows the user to achieve 4.5:1.
3. If all pass, the test is validated.
#### Test 3.2.2 — Bold text < 18.5px
Text and text images in bold at a rendered size below 18.5px must satisfy one of:
- Contrast ratio between text and background is at least **4.5:1**.
- A mechanism allows the user to display text with a contrast ratio of at least **4.5:1**.
**Methodology:**
1. Find all bold text and text images with rendered size < 18.5px that could pose contrast issues.
2. For each, verify that either the contrast ratio is at least 4.5:1, or a mechanism allows the user to achieve 4.5:1.
3. If all pass, the test is validated.
#### Test 3.2.3 — Normal-weight text >= 24px
Text and text images without bold effect at a rendered size >= 24px must satisfy one of:
- Contrast ratio between text and background is at least **3:1**.
- A mechanism allows the user to display text with a contrast ratio of at least **3:1**.
**Methodology:**
1. Find all non-bold text and text images with rendered size >= 24px that could pose contrast issues.
2. For each, verify that either the contrast ratio is at least 3:1, or a mechanism allows the user to achieve 3:1.
3. If all pass, the test is validated.
#### Test 3.2.4 — Bold text >= 18.5px
Text and text images in bold at a rendered size >= 18.5px must satisfy one of:
- Contrast ratio between text and background is at least **3:1**.
- A mechanism allows the user to display text with a contrast ratio of at least **3:1**.
**Methodology:**
1. Find all bold text and text images with rendered size >= 18.5px that could pose contrast issues.
2. For each, verify that either the contrast ratio is at least 3:1, or a mechanism allows the user to achieve 3:1.
3. If all pass, the test is validated.
#### Test 3.2.5 — Contrast mechanism itself
In a mechanism that allows displaying a conforming contrast ratio, the contrast ratio between text and background color must be sufficient.
**Methodology:**
1. Find all mechanisms that allow displaying a conforming contrast ratio.
2. For each, verify the contrast ratio between text and background is sufficient.
3. If all pass, the test is validated.
#### Cas particuliers (3.2)
The criterion is not applicable when:
- Text is part of a logo or brand name of an organization or company.
- Text or text image is purely decorative.
- Text is part of an image conveying information but the text itself provides no essential information.
- Text or text image is part of an interface element on which no action is possible (e.g., a button with the `disabled` attribute).
#### WCAG Techniques for 3.2
G18, G136, G148, G174, G145, C29.
---
### Criterion 3.3 — Non-text contrast for UI components and informational graphics (Level AA)
> Dans chaque page web, les couleurs utilisées dans les composants d'interface ou les éléments graphiques porteurs d'informations sont-elles suffisamment contrastées (hors cas particuliers) ?
WCAG reference: 1.4.11 Non-text Contrast (AA).
#### Test 3.3.1 — UI component contrast against adjacent background
The contrast ratio between the colors of a UI component in its different states and the adjacent background color must satisfy one of:
- Contrast ratio is at least **3:1**.
- A mechanism allows a contrast ratio of at least **3:1**.
**Methodology:**
1. Find all UI components that could pose contrast issues.
2. For each, verify that either the contrast ratio between the component colors (in all states) and the adjacent background is at least 3:1, or a mechanism allows the user to achieve 3:1.
3. If all pass, the test is validated.
#### Test 3.3.2 — Informational graphic element contrast against adjacent background
The contrast ratio between the colors of a graphic element necessary for comprehension and the adjacent background color must satisfy one of:
- Contrast ratio is at least **3:1**.
- A mechanism allows a contrast ratio of at least **3:1**.
**Methodology:**
1. Find all graphic elements that could pose contrast issues.
2. For each, verify that either the contrast ratio between the colors necessary for comprehension and the adjacent background is at least 3:1, or a mechanism allows the user to achieve 3:1.
3. If all pass, the test is validated.
#### Test 3.3.3 — Adjacent colors within a graphic element
The contrast ratio between adjacent colors within a graphic element, when necessary for comprehension, must satisfy one of:
- Contrast ratio is at least **3:1**.
- A mechanism allows a contrast ratio of at least **3:1**.
**Methodology:**
1. Find all graphic elements that could pose contrast issues.
2. For each, verify that either the contrast ratio between adjacent colors within the element (when necessary for comprehension) is at least 3:1, or a mechanism allows the user to achieve 3:1.
3. If all pass, the test is validated.
#### Test 3.3.4 — Contrast mechanism itself for non-text elements
In a mechanism that allows displaying a conforming contrast ratio, the colors of the UI component or informational graphic elements composing it must be sufficiently contrasted.
**Methodology:**
1. Find all mechanisms that allow displaying a conforming contrast ratio.
2. For each, verify the contrast ratio between the colors of the component or informational graphic elements is sufficient.
3. If all pass, the test is validated.
#### Cas particuliers (3.3)
The criterion is not applicable when:
- Inactive UI component (e.g., a button with a `disabled` attribute) on which no action is possible.
- UI component whose appearance is managed by native browser styles without any author modification (e.g., native focus style in Chrome or Firefox).
- UI component where color is not necessary to identify the component or its state (e.g., a navigation link group where position, size, and text color make the links identifiable even if the underline color against white does not meet 3:1, provided the text itself meets 4.5:1).
- Graphic element or parts of a graphic element that do not carry information or have an alternative (long description, identical information visible on the page).
- Graphic element or parts of a graphic element that are part of a logo or brand name.
- Graphic element or parts of a graphic element whose presentation is essential to the information conveyed (e.g., flags, logotypes, photos of people or scenes, screenshots, medical diagrams, heat maps).
- Dynamic graphic element or parts of a dynamic graphic element whose contrast on hover/focus is sufficient.
#### WCAG Techniques for 3.3
G18, G195, G207, G174, G145, G183, F78.
---
## Patterns
**Never rely on color alone:**
```html
Email is required
```
Use additional indicators: icons, text labels, patterns, underlines.