feat(rule): add new color-contrast-enhanced rule (WCAG AAA) (#3235)

* test commit 1 * Revert "test commit 1" This reverts commit 9f996bc. * fix(rule): allow "tabindex=-1" for rules "aria-text" and "nested-interactive" Closes issue #2934 * feat(rule): add new rule color-contrast-enhanced (WCAG AAA) Work in progress. * Work in progress. * Work in progress. * Updating shadow-dom test for WCAG AAA contrast. * Rearranging shadow-dom test. * Adding new rule color-contrast-enhanced to code-highlighting test. * adding new 'color-contrast-enhanced' rule to sticky-header test. * Revert "fix(rule): allow "tabindex=-1" for rules "aria-text" and "nested-interactive"" This reverts commit 30f0e01. * update rule-descriptions.md * fix whitespace Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * work in progress: splitting tests for contrast and the new contrast-enhanced. * work in progress: tests * work in progress: tests * work in progress: tests * adding separate tests for color-contrast-enhanced. work in progress. * update rule-descriptions.md * add test: test/integration/full/contrast-enhanced/simple.html * remove redundant tests for contrast-enhanced * remove temporary code Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
dequelabs · Nov 29, 2021 · bec20fc · bec20fc
1 parent 4bf7d35
commit bec20fc
Show file tree

Hide file tree

Showing 15 changed files with 362 additions and 3 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -116,9 +116,10 @@ Rules that do not necessarily conform to WCAG success criterion but are industry
 
 Rules that check for conformance to WCAG AAA success criteria that can be fully automated.
 
-| Rule ID                                                                                                                            | Description                                                             | Impact | Tags                             | Issue Type        | ACT Rules                                                                                              |
-| :--------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- | :----- | :------------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------- |
-| [identical-links-same-purpose](https://dequeuniversity.com/rules/axe/4.3/identical-links-same-purpose?application=RuleDescription) | Ensure that links with the same accessible name serve a similar purpose | Minor  | cat.semantics, wcag2aaa, wcag249 | needs&nbsp;review | [b20e66](https://act-rules.github.io/rules/b20e66), [fd3a94](https://act-rules.github.io/rules/fd3a94) |
+| Rule ID                                                                                                                            | Description                                                                                              | Impact  | Tags                             | Issue Type                 | ACT Rules                                                                                              |
+| :--------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------ | :------------------------------- | :------------------------- | :----------------------------------------------------------------------------------------------------- |
+| [color-contrast-enhanced](https://dequeuniversity.com/rules/axe/4.3/color-contrast-enhanced?application=RuleDescription)           | Ensures the contrast between foreground and background colors meets WCAG 2 AAA contrast ratio thresholds | Serious | cat.color, wcag2aaa, wcag146     | failure, needs&nbsp;review |                                                                                                        |
+| [identical-links-same-purpose](https://dequeuniversity.com/rules/axe/4.3/identical-links-same-purpose?application=RuleDescription) | Ensure that links with the same accessible name serve a similar purpose                                  | Minor   | cat.semantics, wcag2aaa, wcag249 | needs&nbsp;review          | [b20e66](https://act-rules.github.io/rules/b20e66), [fd3a94](https://act-rules.github.io/rules/fd3a94) |
 
 ## Experimental Rules
 

diff --git a/lib/checks/color/color-contrast-enhanced.json b/lib/checks/color/color-contrast-enhanced.json
@@ -0,0 +1,48 @@
+{
+  "id": "color-contrast-enhanced",
+  "evaluate": "color-contrast-evaluate",
+  "options": {
+    "ignoreUnicode": true,
+    "ignoreLength": false,
+    "ignorePseudo": false,
+    "boldValue": 700,
+    "boldTextPt": 14,
+    "largeTextPt": 18,
+    "contrastRatio": {
+      "normal": {
+        "expected": 7
+      },
+      "large": {
+        "expected": 4.5
+      }
+    },
+    "pseudoSizeThreshold": 0.25,
+    "shadowOutlineEmMax": 0.1
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "Element has sufficient color contrast of ${data.contrastRatio}",
+      "fail": {
+        "default": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
+        "fgOnShadowColor": "Element has insufficient color contrast of ${data.contrastRatio} between the foreground and shadow color (foreground color: ${data.fgColor}, text-shadow color: ${data.shadowColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
+        "shadowOnBgColor": "Element has insufficient color contrast of ${data.contrastRatio} between the shadow color and background color (text-shadow color: ${data.shadowColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}"
+      },
+      "incomplete": {
+        "default": "Unable to determine contrast ratio",
+        "bgImage": "Element's background color could not be determined due to a background image",
+        "bgGradient": "Element's background color could not be determined due to a background gradient",
+        "imgNode": "Element's background color could not be determined because element contains an image node",
+        "bgOverlap": "Element's background color could not be determined because it is overlapped by another element",
+        "fgAlpha": "Element's foreground color could not be determined because of alpha transparency",
+        "elmPartiallyObscured": "Element's background color could not be determined because it's partially obscured by another element",
+        "elmPartiallyObscuring": "Element's background color could not be determined because it partially overlaps other elements",
+        "outsideViewport": "Element's background color could not be determined because it's outside the viewport",
+        "equalRatio": "Element has a 1:1 contrast ratio with the background",
+        "shortTextContent": "Element content is too short to determine if it is actual text content",
+        "nonBmp": "Element content contains only non-text characters",
+        "pseudoContent": "Element's background color could not be determined due to a pseudo element"
+      }
+    }
+  }
+}
diff --git a/lib/rules/color-contrast-enhanced.json b/lib/rules/color-contrast-enhanced.json
@@ -0,0 +1,14 @@
+{
+  "id": "color-contrast-enhanced",
+  "matches": "color-contrast-matches",
+  "excludeHidden": false,
+  "enabled": false, 
+  "tags": ["cat.color", "wcag2aaa", "wcag146"],
+  "metadata": {
+    "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AAA contrast ratio thresholds",
+    "help": "Elements must have sufficient color contrast"
+  },
+  "all": [],
+  "any": ["color-contrast-enhanced"],
+  "none": []
+}
diff --git a/locales/da.json b/locales/da.json
@@ -89,6 +89,10 @@
       "description": "",
       "help": "Elementer skal have tilstrækkelig farvekontrast"
     },
+    "color-contrast-enhanced": {
+      "description": "",
+      "help": "Elementer skal have tilstrækkelig farvekontrast"
+    },
     "css-orientation-lock": {
       "description": "",
       "help": "'CSS Media queries' bør ikke bruges til at låse skærmretningen ('orientation')"
@@ -448,6 +452,23 @@
         "default": "Kan ikke udregne kontrastforhold"
       }
     },
+    "color-contrast-enhanced": {
+      "pass": "Elementet har stor farvekontrast, den er ${data.contrastRatio}",
+      "fail": "Elementet har ikke nok farvekontrast, den er ${data.contrastRatio} (forgrundsfarve: ${data.fgColor}, baggrundsfarve: ${data.bgColor}, tekststørrelse: ${data.fontSize}, teksttykkelse: ${data.fontWeight}). Forventet kontrastforhold er ${data.expectedContrastRatio}",
+      "incomplete": {
+        "bgImage": "Elementets baggrundsfarve kunne ikke detekteres på grund af et baggrundsbillede",
+        "bgGradient": "Elementets baggrundsfarve kunne ikke detekteres på grund af en baggrundsgradient",
+        "imgNode": "Elementets baggrundsfarve kunne ikke detekteres, fordi elementet indeholder et billedelement",
+        "bgOverlap": "Elementets baggrundsfarve kunne ikke detekteres, fordi det er overlappet af et andet element",
+        "fgAlpha": "Elementets forgrundsfarve kunne ikke detekteres på grund af dets gennemsigtighed",
+        "elmPartiallyObscured": "Elementets baggrundsfarve kunne ikke detekteres, fordi det er delvist dækket af et andet element",
+        "elmPartiallyObscuring": "Elementets baggrundsfarve kunne ikke detekteres, fordi det delvist dækker et andet element",
+        "outsideViewport": "Elementets baggrundsfarve kunne ikke detekteres, fordi det er udenfor sidens 'viewport'",
+        "equalRatio": "Elementet har et 1:1-kontrastforhold med baggrunden",
+        "shortTextContent": "Elementets indhold er for kort til at kunne afgøre, om indholdet ren faktisk ER tekst",
+        "default": "Kan ikke udregne kontrastforhold"
+      }
+    },
     "link-in-text-block": {
       "pass": "Links kan adskilles fra den omkringliggende tekst på anden måde end med farve",
       "fail": "Links bør skille sig ud fra den omkringliggende tekst på anden måde end med farve",

diff --git a/locales/de.json b/locales/de.json
@@ -113,6 +113,10 @@
       "description": "Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe den in der WCAG 2 als AA ausgewiesenen Kontrastgrenzwerten entspricht.",
       "help": "Elemente müssen einen ausreichenden Farbkontrast haben."
     },
+    "color-contrast-enhanced": {
+      "description": "Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe den in der WCAG 2 als AAA ausgewiesenen Kontrastgrenzwerten entspricht.",
+      "help": "Elemente müssen einen ausreichenden Farbkontrast haben."
+    },
     "css-orientation-lock": {
       "description": "Stellt sicher, dass der Inhalt nicht nur auf einer sondern auf allen spezifischen Bildschirmausrichtungen angezeigt werden kann.",
       "help": "CSS Media Queries dürfen nicht genutzt werden um die Bildschirmausrichtung zu sperren."
@@ -520,6 +524,25 @@
         "pseudoContent": "Die Hintergrundfarbe konnte aufgrund eines pseudo Elementes nicht bestimmt werden."
       }
     },
+    "color-contrast-enhanced": {
+      "pass": "Das Element hat einen ausreichenden Kontrast von ${data.contrastRatio}.",
+      "fail": "Das Element hat einen unzureichenden Kontrast von ${data.contrastRatio} (Vordergrundfarbe: ${data.fgColor}, Hintergrundfarbe: ${data.bgColor}, Schriftgröße: ${data.fontSize}, Schriftstärke: ${data.fontWeight}).",
+      "incomplete": {
+        "default": "Das Kontrastverhältnis konnte nicht ermittelt werden.",
+        "bgImage": "Die Hintergrundfarbe des Elementes konnte aufgrund eines Hintergrundbildes nicht bestimmt werden.",
+        "bgGradient": "Die Hintergrundfarbe des Elementes konnte aufgrund eines Hintergrundfarbverlaufes nicht bestimmt werden.",
+        "imgNode": "Die Hintergrundfarbe des Elementes konnte nicht bestimmt werden, da das Element einen Image Node enthält.",
+        "bgOverlap": "Die Hintergrundfarbe des Elementes konnte nicht bestimmt werden, da es von einem anderen Element überlagert wird.",
+        "fgAlpha": "Die Vordergrundfarbe des Elementes konnte aufgrund der Alpha-Transparenz nicht ermittelt werden.",
+        "elmPartiallyObscured": "Die Hintergrundfarbe des Elements konnte nicht bestimmt werden, da es teilweise von anderen Elementen überdeckt wird.",
+        "elmPartiallyObscuring": "Die Hintergrundfarbe des Elements konnte nicht bestimmt werden, da es teilweise andere Elemente überdeckt.",
+        "outsideViewport": "Die Hintergrundfarbe des Elements konnte nicht bestimmt werden, da es sich außerhalb des Viewports befindet.",
+        "equalRatio": "Das Element hat einen 1:1 Kontrast mit der Hintergrundfarbe.",
+        "shortTextContent": "Der Inhalt des Elements ist zu kurz um zu bestimmen ob es sich wirklich um Textinhalt handelt.",
+        "nonBmp": "Das Element enthält ausschließlich Nicht-Text Zeichen.",
+        "pseudoContent": "Die Hintergrundfarbe konnte aufgrund eines pseudo Elementes nicht bestimmt werden."
+      }
+    },
     "link-in-text-block": {
       "pass": "Links können vom umgebenenden Text auf unterschiedliche Art und Weise unterschieden werden.",
       "fail": "Links können (abgesehen von einer farblichen Kennzeichnung) nicht vom umgebenden Text unterschieden werden.",

diff --git a/locales/es.json b/locales/es.json
@@ -85,6 +85,10 @@
       "description": "Garantiza que el contraste entre colores de primer plano y fondo cumple los límites de la ratio para contraste WCAG 2 AA",
       "help": "Los elementos deben tener un contraste de colores suficiente"
     },
+    "color-contrast-enhanced": {
+      "description": "Garantiza que el contraste entre colores de primer plano y fondo cumple los límites de la ratio para contraste WCAG 2 AAA",
+      "help": "Los elementos deben tener un contraste de colores suficiente"
+    },
     "css-orientation-lock": {
       "description": "Garantiza que el contenido no está bloqueado en ninguna orientación de pantalla específica, y que el contenido es manejable en cualquier orientación de pantalla",
       "help": "Las 'CSS Media queries' no se usan para bloquear la orientación de pantalla"
@@ -439,6 +443,23 @@
         "default": "Imposible determinar la ratio de contraste"
       }
     },
+    "color-contrast-enhanced": {
+      "pass": "El elemento tiene un contraste de color suficiente de ${data.contrastRatio}",
+      "fail": "El elemento tiene un contraste de color insuficiente de ${data.contrastRatio} (color de primer plano: ${data.fgColor}, color de fondo: ${data.bgColor}, tamaño de fuente: ${data.fontSize}, grosor de fuente: ${data.fontWeight}). Ratio de contraste esperado: ${data.expectedContrastRatio}",
+      "incomplete": {
+        "bgImage": "El color de fondo del elemento no se pudo determinar debido a una imagen de fondo",
+        "bgGradient": "El color de fondo del elemento no se pudo determinar debido a un degradado de fondo",
+        "imgNode": "El color de fondo del elemento no se pudo determinar porque el elemento contiene un nodo de imagen",
+        "bgOverlap": "El color de fondo no se pudo determinar porque tiene otro elemento superpuesto",
+        "fgAlpha": "El color de fondo no se pudo determinar debido a una transparencia alfa",
+        "elmPartiallyObscured": "El color de fondo no se pudo determinar porque está parcialmente oculto por otro elemento",
+        "elmPartiallyObscuring": "El color de fondo del elemento no se pudo determinar porque se superpone parcialmente a otros elementos",
+        "outsideViewport": "El color de fondo del elemento no se pudo determinar porque está fuera de la ventana gráfica ('viewport')",
+        "equalRatio": "El elemento tiene una ratio de contraste 1:1 con el fondo",
+        "shortTextContent": "El contenido del elemento es demasiado corto para determinar si es contenido de texto propiamente dicho",
+        "default": "Imposible determinar la ratio de contraste"
+      }
+    },
     "link-in-text-block": {
       "pass": "Los enlaces se pueden distinguir respecto al texto adyacente de forma ajena al color",
       "fail": "Es necesario distinguir los enlaces respecto al texto adyacente de una forma ajena al color",

diff --git a/locales/eu.json b/locales/eu.json
@@ -85,6 +85,10 @@
       "description": "Lehen planoko eta hondoko koloreen arteko kontrasteak WCAG 2 AA kontrasterako ratioaren mugak betetzen dituela bermatzen du.",
       "help": "Elementuek kolore-kontraste nahikoa izan behar dute"
     },
+    "color-contrast-enhanced": {
+      "description": "Lehen planoko eta hondoko koloreen arteko kontrasteak WCAG 2 AAA kontrasterako ratioaren mugak betetzen dituela bermatzen du.",
+      "help": "Elementuek kolore-kontraste nahikoa izan behar dute"
+    },
     "css-orientation-lock": {
       "description": "Bermatzen du edukia ez dagoela blokeatuta pantailako orientazio espezifiko batean, eta edukia maneiagarria dela pantailako edozein orientabidetan.",
       "help": "'CSS Media query'ak ez dira erabiltzen pantailaren orientazioa blokeatzeko "
@@ -439,6 +443,23 @@
         "default": "Ezinezkoa da kontraste-ratioa zehaztea"
       }
     },
+    "color-contrast-enhanced": {
+      "pass": "Elementuak ${data.contrastRatio}-ko kolore-kontraste nahikoa du",
+      "fail": "Elementuaren ${data.contrastRatio}-ko kolore-kontrastea ez da nahikoa (ehen planoaren kolorea: ${data.fgColor}, hondoaren kolorea: ${data.bgColor}, letra-iturriaren tamaina: ${data.fontSize}, letra-iturriaren lodiera: ${data.fontWeight}). Espero den kontraste-ratioa: ${data.expectedContrastRatio}",
+      "incomplete": {
+        "bgImage": "Elementuaren hondoko kolorea ezin izan da zehaztu, hondoko irudi batengatik",
+        "bgGradient": "Elementuaren hondoko kolorea ezin izan da zehaztu hondoko degradatu baten ondorioz",
+        "imgNode": "Elementuaren hondoaren kolorea ezin izan da zehaztu, elementuak irudi-nodo bat duelako.",
+        "bgOverlap": "Hondoko kolorea ezin izan da zehaztu, gainjarritako beste elementu bat duelako",
+        "fgAlpha": "Hondoko kolorea ezin izan da zehaztu alfa gardentasun baten ondorioz",
+        "elmPartiallyObscured": "Hondoaren kolorea ezin izan da zehaztu, beste elementu batek partzialki ezkutatzen duelako",
+        "elmPartiallyObscuring": "Elementuaren hondoaren kolorea ezin izan da zehaztu, beste elementu batzuei partzialki gainjartzen baitzaie.",
+        "outsideViewport": "Elementuaren hondoko kolorea ezin izan da zehaztu, leiho grafikotik kanpo dagoelako ('viewport')",
+        "equalRatio": "Elementuak 1:1 kontraste-ratioa du hondoarekin",
+        "shortTextContent": "Elementuaren edukia laburregia da testu-edukia bera den zehazteko",
+        "default": "Ezinezkoa da kontraste-ratioa zehaztea"
+      }
+    },
     "link-in-text-block": {
       "pass": "Estekak ondoko testuarekiko bereiz daitezke, koloretik kanpo",
       "fail": "Alboko testuarekiko loturak koloretik kanpo bereizi behar dira",