From bec20fcbf2f407ecab2fc6d0d829d23525989d48 Mon Sep 17 00:00:00 2001 From: Dan Tripp <88439449+dan-tripp@users.noreply.github.com> Date: Mon, 29 Nov 2021 06:37:42 -0500 Subject: [PATCH] feat(rule): add new color-contrast-enhanced rule (WCAG AAA) (#3235) * test commit 1 * Revert "test commit 1" This reverts commit 9f996bc6f54092541db77b9c3e62e2a5d9d9643e. * 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 30f0e01506979bb92600289bd242ab01d25cb8ec. * update rule-descriptions.md * fix whitespace Co-authored-by: Wilco Fiers * 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 --- doc/rule-descriptions.md | 7 +-- lib/checks/color/color-contrast-enhanced.json | 48 +++++++++++++++++++ lib/rules/color-contrast-enhanced.json | 14 ++++++ locales/da.json | 21 ++++++++ locales/de.json | 23 +++++++++ locales/es.json | 21 ++++++++ locales/eu.json | 21 ++++++++ locales/fr.json | 27 +++++++++++ locales/ja.json | 23 +++++++++ locales/ko.json | 27 +++++++++++ locales/nl.json | 12 +++++ locales/pl.json | 23 +++++++++ locales/pt_BR.json | 23 +++++++++ .../full/contrast-enhanced/simple.html | 45 +++++++++++++++++ .../full/contrast-enhanced/simple.js | 30 ++++++++++++ 15 files changed, 362 insertions(+), 3 deletions(-) create mode 100644 lib/checks/color/color-contrast-enhanced.json create mode 100644 lib/rules/color-contrast-enhanced.json create mode 100644 test/integration/full/contrast-enhanced/simple.html create mode 100644 test/integration/full/contrast-enhanced/simple.js diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md index 422f43abb3..d48a85a535 100644 --- 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 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 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 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 new file mode 100644 index 0000000000..d2de46c476 --- /dev/null +++ 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 new file mode 100644 index 0000000000..21860fc869 --- /dev/null +++ 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 index 3e967d5d94..1b2e74e441 100644 --- 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 index 3af18c0877..45304a0a55 100644 --- 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 index 8a2eb37427..5605020f93 100644 --- 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 index 7f7cc729e1..4767e9e93c 100644 --- 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", diff --git a/locales/fr.json b/locales/fr.json index a1cba7785d..a5fb70ea0b 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -117,6 +117,10 @@ "description": "Vérifier que les contrastes entre le premier plan et l’arrière-plan rencontrent les seuils de contrastes exigés par les WCAG 2 AA", "help": "Les éléments doivent avoir un contraste de couleurs suffisant" }, + "color-contrast-enhanced": { + "description": "Vérifier que les contrastes entre le premier plan et l’arrière-plan rencontrent les seuils de contrastes exigés par les WCAG 2 AAA", + "help": "Les éléments doivent avoir un contraste de couleurs suffisant" + }, "css-orientation-lock": { "description": "Vérifier que les contenus ne sont pas limités à une orientation spécifique de l’écran, et que le contenu est utilisable sous toutes les orientations de l’écran", "help": "Les CSS Media queries ne sont pas utilisées pour verrouiller l’orientation de l’écran" @@ -555,6 +559,29 @@ "pseudoContent": "La couleur d’arrière plan de l’élément n’a pu être déterminée à cause d’un pseudo-élément" } }, + "color-contrast-enhanced": { + "pass": "L’élément a un contraste de couleurs suffisant de ${data.contrastRatio}", + "fail": { + "default": "L’élément a un contraste de couleurs insuffisant de ${data.contrastRatio} (couleur d’avant plan : ${data.fgColor}, couleur d’arrière plan : ${data.bgColor}, taille de police : ${data.fontSize}, graisse : ${data.fontWeight}). Contraste de couleur attendu : ${data.expectedContrastRatio}", + "fgOnShadowColor": "L’élément a un contraste de couleurs insuffisant de ${data.contrastRatio} entre l’avant plan et la couleur de l’ombre de texte (couleur d’avant plan : ${data.fgColor}, couleur de l’ombre de texte : ${data.shadowColor}, taille de police : ${data.fontSize}, graisse: ${data.fontWeight}). Contraste de couleurs attendu : ${data.expectedContrastRatio}", + "shadowOnBgColor": "L’élément a un contraste de couleurs insuffisant de ${data.contrastRatio} entre la couleur de l’ombre de texte et l’arrière plan (couleur de l’ombre de texte : ${data.shadowColor}, couleur d’arrière plan : ${data.bgColor}, taille de police : ${data.fontSize}, graisse: ${data.fontWeight}). Contraste de couleurs attendu : ${data.expectedContrastRatio}" + }, + "incomplete": { + "default": "Impossible de déterminer le rapport de contraste", + "bgImage": "La couleur d’arrière-plan de l’élément n’a pu être déterminée à cause d’une image d’arrière-plan", + "bgGradient": "La couleur d’arrière-plan de l’élément n’a pu être déterminée à cause d’un dégradé d’arrière-plan", + "imgNode": "La couleur d’arrière-plan de l’élément n’a pu être déterminée, car l’élément contient une balise image", + "bgOverlap": "La couleur d’arrière-plan de l’élément n’a pu être déterminée, car un autre élément le chevauche", + "fgAlpha": "La couleur du texte de l’élément n’a pu être déterminée à cause d’une opacité réduite", + "elmPartiallyObscured": "La couleur d’arrière-plan de l’élément n’a pu être déterminée, car l’élément est partiellement masqué par un autre élément", + "elmPartiallyObscuring": "La couleur d’arrière-plan de l’élément n’a pu être déterminée, car il chevauche partiellement un autre élément", + "outsideViewport": "La couleur d’arrière-plan de l’élément n’a pu être déterminée, car il est à l’extérieur du viewport", + "equalRatio": "L’élément a un rapport de contraste de 1:1 avec son arrière-plan", + "shortTextContent": "Le contenu de l’élément est trop court pour déterminer s’il s’agit réellement d’un contenu textuel", + "nonBmp": "Le contenu de l’élément contient seulement des caractères non textuels", + "pseudoContent": "La couleur d’arrière plan de l’élément n’a pu être déterminée à cause d’un pseudo-élément" + } + }, "link-in-text-block": { "pass": "Les liens peuvent être distingués du texte environnant par un autre moyen que la couleur", "fail": "Les liens doivent se distinguer du texte environnant par un autre moyen que la couleur", diff --git a/locales/ja.json b/locales/ja.json index d9b354a254..a7bcaec24b 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -117,6 +117,10 @@ "description": "前景色と背景色のコントラストがWCAG 2のAAコントラスト比のしきい値を満たすことを確認します", "help": "要素には十分な色のコントラストがなければなりません" }, + "color-contrast-enhanced": { + "description": "前景色と背景色のコントラストがWCAG 2のAAAコントラスト比のしきい値を満たすことを確認します", + "help": "要素には十分な色のコントラストがなければなりません" + }, "css-orientation-lock": { "description": "コンテンツが特定のディスプレイの向きに固定されていないこと、およびコンテンツがすべてのディスプレイの向きで操作可能なことを確認します", "help": "ディスプレイの向きを固定するためにCSSメディアクエリーは使用されていません" @@ -541,6 +545,25 @@ "pseudoContent": "擬似要素のため、要素の背景色を判定することができませんでした" } }, + "color-contrast-enhanced": { + "pass": "要素には${data.contrastRatio}の十分なコントラスト比があります", + "fail": "要素のコントラスト比が不十分です ${data.contrastRatio}（前景色: ${data.fgColor}、背景色: ${data.bgColor}、フォントサイズ: ${data.fontSize}、フォントの太さ: ${data.fontWeight}）。コントラスト比${data.expectedContrastRatio}を必要とします", + "incomplete": { + "default": "コントラスト比を判定できません", + "bgImage": "背景画像のため、要素の背景色を判定できません", + "bgGradient": "背景グラデーションのため、要素の背景色を判定できません", + "imgNode": "画像ノードが含まれるため、要素の背景色を判定できません", + "bgOverlap": "他の要素と重なっているため、要素の背景色を判定できません", + "fgAlpha": "アルファ透明度により、要素の前景色を判定できません", + "elmPartiallyObscured": "他の要素により部分的に不明瞭なため、要素の背景色を判定できません", + "elmPartiallyObscuring": "他の要素と部分的に重なっているため、要素の背景色を判定できません", + "outsideViewport": "ビューポートの外にあるため、要素の背景色を判定できません", + "equalRatio": "要素のコントラスト比が背景と1:1です", + "shortTextContent": "実際のテキストコンテンツであるかを判断するには要素のコンテンツが短すぎます", + "nonBmp": "要素のコンテンツはテキストではない文字のみを含んでいます", + "pseudoContent": "擬似要素のため、要素の背景色を判定することができませんでした" + } + }, "link-in-text-block": { "pass": "リンクは色以外の方法で周囲のテキストと区別できます", "fail": "リンクは色以外の方法で周囲のテキストと区別させる必要があります", diff --git a/locales/ko.json b/locales/ko.json index fe18dbf9ae..034d487c1b 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -117,6 +117,10 @@ "description": "전경색과 배경색 사이의 대비가 WCAG 2 AA 명암비 기준치를 충족하는지 확인하세요.", "help": "엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다." }, + "color-contrast-enhanced": { + "description": "전경색과 배경색 사이의 대비가 WCAG 2 AAA 명암비 기준치를 충족하는지 확인하세요.", + "help": "엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다." + }, "css-orientation-lock": { "description": "콘텐츠가 특정 디스플레이 방향으로 고정되지 않고, 콘텐츠가 모든 디스플레이 방향에서 사용 가능한지 확인하세요.", "help": "CSS 미디어쿼리가 디스플레이 방향을 고정하기 위해 사용되지 않아야 합니다." @@ -552,6 +556,29 @@ "pseudoContent": "가상 엘리먼트로 인해 엘리먼트의 배경색이 확인될 수 없습니다." } }, + "color-contrast-enhanced": { + "pass": "엘리먼트가 ${data.contrastRatio}의 충분한 명도 대비를 가집니다.", + "fail": { + "default": "엘리먼트가 ${data.contrastRatio} (전경색: ${data.fgColor}, 배경색: ${data.bgColor}, 글꼴 크기: ${data.fontSize}, 글꼴 두께: ${data.fontWeight})의 불충분한 명도 대비를 가집니다. 기대 명암비: ${data.expectedContrastRatio}", + "fgOnShadowColor": "엘리먼트가 전경색과 그림자 색상 (전경색: ${data.fgColor}, 텍스트 그림자 색상: ${data.shadowColor}, 글꼴 크기: ${data.fontSize}, 글꼴 두께: ${data.fontWeight}) 사이에 ${data.contrastRatio}의 불충분한 명도 대비를 가집니다. 기대 명암비: ${data.expectedContrastRatio}", + "shadowOnBgColor": "엘리먼트가 그림자 색상과 배경색 (텍스트 그림자 색상: ${data.shadowColor}, 배경색: ${data.bgColor}, 글꼴 크기: ${data.fontSize}, 글꼴 두께: ${data.fontWeight}) 사이에 ${data.contrastRatio}의 불충분한 명도 대비를 가집니다. 기대 명암비: ${data.expectedContrastRatio}" + }, + "incomplete": { + "default": "명암비를 확인할 수 없습니다.", + "bgImage": "배경 이미지로 인해 엘리먼트의 배경색이 확인될 수 없습니다.", + "bgGradient": "배경 그라데이션으로 인해 엘리먼트의 배경색이 확인될 수 없습니다.", + "imgNode": "엘리먼트가 이미지 노드를 포함하기 때문에 엘리먼트의 배경색이 확인될 수 없습니다.", + "bgOverlap": "다른 엘리먼트로 겹쳐 있기 때문에 엘리먼트의 배경색이 확인될 수 없습니다.", + "fgAlpha": "알파 투명도 때문에 엘리먼트의 전경색이 확인될 수 없습니다.", + "elmPartiallyObscured": "다른 엘리먼트에 의해 부분적으로 가려 있기 때문에 배경색이 확인될 수 없습니다.", + "elmPartiallyObscuring": "다른 엘리먼트에 의해 부분적으로 겹쳐 있기 때문에 배경색이 확인될 수 없습니다.", + "outsideViewport": "엘리먼트가 뷰포트 밖에 있기 때문에 엘리먼트의 배경색이 확인될 수 없습니다.", + "equalRatio": "엘리먼트가 배경색과 1:1의 명암비를 가집니다.", + "shortTextContent": "엘리먼트 콘텐츠가 너무 짧아 실제 텍스트 콘텐츠인지 확인될 수 없습니다.", + "nonBmp": "엘리먼트 콘텐츠가 비텍스트 문자만 포함합니다.", + "pseudoContent": "가상 엘리먼트로 인해 엘리먼트의 배경색이 확인될 수 없습니다." + } + }, "link-in-text-block": { "pass": "링크가 색상 외 다른 방법으로 주변 텍스트와 구별 될 수 있습니다.", "fail": "링크가 색상 외 다른 방법으로 주변 텍스트와 구별 될 필요가 있습니다.", diff --git a/locales/nl.json b/locales/nl.json index 8870d18630..ff1f1cd8e0 100644 --- a/locales/nl.json +++ b/locales/nl.json @@ -16,6 +16,18 @@ "fgAlpha": "Element's achtergrondkleur kon niet worden bepaald vanwegen alpha transparency", "default": "Contrastkleur kon niet bepaald worden" } + }, + "color-contrast-enhanced": { + "pass": "Element heeft voldoende contrast, namelijk ${data.contrastRatio}", + "fail": "Element heeft onvoldoende contrast, ${data.contrastRatio} (Voorgrondkleur: ${data.fgColor}, achtergrondkleur: ${data.bgColor}, tekstgrootte: ${data.fontSize}, tekstdikte: ${data.fontWeight})", + "incomplete": { + "bgImage": "Element's achtergrondkleur kon niet worden bepaald vanwegen een achtergrondafbeelding", + "bgGradient": "Element's achtergrondkleur kon niet worden bepaald vanwegen een gradient kleur", + "imgNode": "Element's achtergrondkleur kon niet worden bepaald vanwegen een image node", + "bgOverlap": "Element's achtergrondkleur kon niet worden bepaald vanwegen een overlappend element", + "fgAlpha": "Element's achtergrondkleur kon niet worden bepaald vanwegen alpha transparency", + "default": "Contrastkleur kon niet bepaald worden" + } } }, "rules": { diff --git a/locales/pl.json b/locales/pl.json index be299186d2..f27606db0a 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -117,6 +117,10 @@ "description": "Kontrast między kolorami pierwszego planu i tła spełnia progi kontrastu WCAG 2 AA.", "help": "Elementy muszą mieć wystarczający kontrast kolorów." }, + "color-contrast-enhanced": { + "description": "Kontrast między kolorami pierwszego planu i tła spełnia progi kontrastu WCAG 2 AAA.", + "help": "Elementy muszą mieć wystarczający kontrast kolorów." + }, "css-orientation-lock": { "description": "Treść nie jest przypisana do żadnej konkretnej orientacji wyświetlacza i można ją obsługiwać we wszystkich orientacjach wyświetlacza.", "help": "Zapytania medialne nie są wykorzystywane do blokowania orientacji wyświetlacza." @@ -541,6 +545,25 @@ "pseudoContent": "Nie można określić koloru tła elementu, ponieważ jest to pseudoelement." } }, + "color-contrast-enhanced": { + "pass": "Element ma wystarczający kontrast kolorów ${data.contrastRatio}.", + "fail": "Element ma niewystarczający kontrast kolorów: ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Oczekiwany współczynnik kontrastu: ${data.expectedContrastRatio}.", + "incomplete": { + "default": "Nie można określić współczynnika kontrastu.", + "bgImage": "Nie można określić koloru tła elementu, ponieważ element ma obraz tła.", + "bgGradient": "Nie można określić koloru tła elementu, ponieważ element ma gradientowe tło.", + "imgNode": "Nie można określić koloru tła elementu, ponieważ element zawiera węzeł obrazu.", + "bgOverlap": "Nie można określić koloru tła elementu, ponieważ nakłada się na niego inny element.", + "fgAlpha": "Nie można określić koloru pierwszego planu elementu z powodu przezroczystości alfa.", + "elmPartiallyObscured": "Nie można określić koloru tła elementu, ponieważ jest on częściowo zasłonięty przez inny element.", + "elmPartiallyObscuring": "Nie można określić koloru tła elementu, ponieważ częściowo nakłada się on na inne elementy.", + "outsideViewport": "Nie można określić koloru tła elementu, ponieważ znajduje się on poza obszarem operacyjnym.", + "equalRatio": "Element ma współczynnik kontrastu 1:1 z tłem.", + "shortTextContent": "Treść elementu jest zbyt krótka, aby określić, czy jest to rzeczywista treść tekstowa.", + "nonBmp": "Treść elementu zawiera tylko znaki nietekstowe.", + "pseudoContent": "Nie można określić koloru tła elementu, ponieważ jest to pseudoelement." + } + }, "link-in-text-block": { "pass": "Łącza można odróżnić od otaczającego je tekstu w inny sposób niż za pomocą koloru.", "fail": "Łącza muszą być odróżnione od otaczającego je tekstu w inny sposób niż za pomocą koloru.", diff --git a/locales/pt_BR.json b/locales/pt_BR.json index b5441b9c04..31b6f1dc3f 100644 --- a/locales/pt_BR.json +++ b/locales/pt_BR.json @@ -117,6 +117,10 @@ "description": "Certifique-se de que o contraste entre as cores de primeiro plano e de fundo atenda aos limites de relação de contraste WCAG 2 AA", "help": "Os elementos devem ter contraste de cor suficiente" }, + "color-contrast-enhanced": { + "description": "Certifique-se de que o contraste entre as cores de primeiro plano e de fundo atenda aos limites de relação de contraste WCAG 2 AAA", + "help": "Os elementos devem ter contraste de cor suficiente" + }, "css-orientation-lock": { "description": "Certifique-se de que o conteúdo não está bloqueado para nenhuma orientação de tela específica, e que o mesmo seja operável em todas as orientações de tela", "help": "CSS Media queries não são usadas para bloquear a orientação de tela" @@ -544,6 +548,25 @@ "pseudoContent": "A cor de fundo do elemento não pode ser determinada devido a um pseudo-elemento" } }, + "color-contrast-enhanced": { + "pass": "O elemento tem contraste suficiente no valor de ${data.contrastRatio}", + "fail": "O elemento tem contraste insuficiente no valor de ${data.contrastRatio} (cor do primeiro plano: ${data.fgColor}, cor de fundo: ${data.bgColor}, tamanho da fonte: ${data.fontSize}, normal/negrito: ${data.fontWeight}). Contraste esperado no valor de ${data.expectedContrastRatio}", + "incomplete": { + "default": "Impossível determinar o contraste", + "bgImage": "A cor de fundo do elemento não pôde ser determinada devido a uma imagem de fundo", + "bgGradient": "A cor de fundo do elemento não pôde ser determinada devido a um gradiente de fundo", + "imgNode": "A cor de fundo do elemento não pôde ser determinada porque o elemento contém um nó de imagem", + "bgOverlap": "A cor de fundo do elemento não pôde ser determinada porque está sobreposta por outro elemento", + "fgAlpha": "A cor do primeiro plano do elemento não pôde ser determinada devido à transparência alfa", + "elmPartiallyObscured": "A cor de fundo do elemento não pôde ser determinada porque está parcialmente obscurecida por outro elemento", + "elmPartiallyObscuring": "A cor de fundo do elemento não pôde ser determinada porque está parcialmente sobreposta a outros elementos", + "outsideViewport": "A cor de fundo do elemento não pôde ser determinada porque está fora da 'viewport'", + "equalRatio": "O elemento tem um contraste de 1:1 com plano de fundo", + "shortTextContent": "O conteúdo do elemento é muito curto para determinar se é conteúdo de texto real", + "nonBmp": "O conteúdo do elemento contém apenas caracteres não textuais", + "pseudoContent": "A cor de fundo do elemento não pode ser determinada devido a um pseudo-elemento" + } + }, "link-in-text-block": { "pass": "Links pode ser distinguidos do texto ao redor de outra maneira além da cor", "fail": "Links precisam ser distinguidos do texto ao redor de outra maneira além da cor", diff --git a/test/integration/full/contrast-enhanced/simple.html b/test/integration/full/contrast-enhanced/simple.html new file mode 100644 index 0000000000..a38da200f3 --- /dev/null +++ b/test/integration/full/contrast-enhanced/simple.html @@ -0,0 +1,45 @@ + + + + Test Page + + + + + + + + + + +
+
Pass (Regular size text, 21:1)
+
Fail (Regular size text, 6:1)
+
Fail (Regular size text, 6.9:1)
+
Pass (Regular size text, 7:1)
+ +
Fail (Large text, 4.487:1)
+
Pass (Large text, 4.5:1)
+
Fail (Large text, but not quite large enough, 4.5:1)
+ +
Fail (Bold text, 4.487:1)
+
Pass (Bold text, 4.5:1)
+
Fail (Bold text, but not quite large enough, 4.5:1)
+
Fail (Bold text, but not quite bold enough, 4.5:1)
+
+ + + + + + diff --git a/test/integration/full/contrast-enhanced/simple.js b/test/integration/full/contrast-enhanced/simple.js new file mode 100644 index 0000000000..471f35158f --- /dev/null +++ b/test/integration/full/contrast-enhanced/simple.js @@ -0,0 +1,30 @@ +describe('color-contrast shadow dom test', function() { + 'use strict'; + + describe('violations', function() { + it('should find issues in simple tree', function(done) { + axe.run( + '#fixture', + { runOnly: { type: 'rule', values: ['color-contrast-enhanced'] } }, + function(err, results) { + assert.isNull(err); + assert.lengthOf(results.passes, 1); + assert.lengthOf(results.passes[0].nodes, 4); + assert.lengthOf(results.incomplete, 0); + assert.lengthOf(results.violations, 1); + assert.lengthOf(results.violations[0].nodes, 7); + assert.equal(results.violations[0].nodes[0].any[0].data.fgColor, '#556666'); + assert.equal(results.violations[0].nodes[1].any[0].data.fgColor, '#556000'); + assert.equal(results.violations[0].nodes[2].any[0].data.fgColor, '#118488'); + assert.equal(results.violations[0].nodes[3].any[0].data.fgColor, '#048488'); + assert.equal(results.violations[0].nodes[4].any[0].data.fgColor, '#118488'); + assert.equal(results.violations[0].nodes[5].any[0].data.fgColor, '#048488'); + assert.equal(results.violations[0].nodes[6].any[0].data.fgColor, '#048488'); + assert.lengthOf(results.incomplete, 0); + done(); + } + ); + }); + }); + +});