Rule 3.2.1
Summary
This test consists in checking whether the contrast ratio between text and its background is at least 4.5:1 for the
normal weighted, under 24px sized, textual elements
Business description
Criterion
Test
Description
Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers)?
Cas particuliers (3.2)
Dans ces situations, les critères sont non applicables pour ces éléments
- Le texte fait partie d’un logo ou d’un nom de marque d’un organisme ou d’une société
- Le texte ou l’image de texte est purement décoratif
- Le texte fait partie d’une image véhiculant une information mais le texte lui-même n’apporte aucune information essentielle
- Le texte ou l’image de texte fait partie d’un élément d’interface sur lequel aucune action n’est possible (par exemple un bouton avec l’attribut
disabled).
Level
AA
Technical description
Scope
Page
Decision level
Decidable
Algorithm
Selection
Set1
All the textual elements from the DOM with a font-size inferior or equals to 24px and not bold
Set2
All the hidden textual elements from the DOM with a font-size inferior or equals to 24px and not bold
Set3
All the <img> tags
Process
Test1
For each element of Set1, the contrast ratio is computed (regarding the
contrast ratio definition) to check whether it is superior to 4.5.
For each element returning false in Test1, if the ALTERNATIVE_CONTRAST_MECHANISM is set to true by the user, raise a MessageA, raise a MessageB instead.
If an element has a contrast ratio that cannot be determined (background defined with an image or a gradient), raise a MessageC
Test2
For each element of Set2, the contrast ratio is computed (regarding the
contrast ratio definition) to check whether it is superior to 4.5.
For each element returning false in Test2, raise a MessageD
Messages
Message1: Bad Contrast
- code: BadContrast
- status: Failed
- parameter: foreground color, background color, contrast ratio, Snippet
- present in source: yes
Message2: Bad Contrast But Alternative Contrast Mechanism Present On Page
- code: BadContrastButAlternativeContrastMechanismOnPage
- status: Pre-Qualified
- parameter: foreground color, background color, contrast ratio, Snippet
- present in source: yes
Message3: Not Treated Background Color
- code: NotTreatedBackgroundColor
- status: Pre-Qualified
- parameter: none
- present in source: no
Message4: Bad Contrast on Hidden Element
- code: BadContrastHiddenElement
- status: Pre-Qualified
- parameter: foreground color, background color, contrast ratio, Snippet
- present in source: yes
Analysis
Not Applicable
No element with a font-size inferior or equals to 24px and not bold have been found (Set1 AND Set2 are empty)
Passed
All the elements with a font-size inferior or equals to 24px and not bold have a correct ratio and the page contains
no images (Test1 returns true for all elements AND Set2 AND Set3 are empty)
Failed
At least one element with a font-size inferior or equals to 24px and not bold have an incorrect ratio (Test1
returns false for at least one element)
Pre-qualified
In all other cases
Notes
- The background color, foreground color, font size, font weight, visibility and overlay detection are all captured at page-load time by a JavaScript extractor injected via Selenium. See Visibility & contrast extraction for the complete algorithm including sr-only / visually-hidden pattern detection, hit-test-based image overlay detection, and pseudo-element overlay detection.