abledom 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -130,6 +130,14 @@ declare class FocusableElementLabelRule extends ValidationRule {
     validate(element: HTMLElement): ValidationResult | null;
 }
 
+declare class ContrastRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
 /*!
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
@@ -220,4 +228,4 @@ declare function matchesSelector(element: HTMLElement, selector: string): boolea
 declare function isDisplayNone(element: HTMLElement): boolean;
 declare function isElementVisible(element: HTMLElement): boolean;
 
-export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };
+export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };

package/dist/index.d.ts

@@ -130,6 +130,14 @@ declare class FocusableElementLabelRule extends ValidationRule {
     validate(element: HTMLElement): ValidationResult | null;
 }
 
+declare class ContrastRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
 /*!
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
@@ -220,4 +228,4 @@ declare function matchesSelector(element: HTMLElement, selector: string): boolea
 declare function isDisplayNone(element: HTMLElement): boolean;
 declare function isElementVisible(element: HTMLElement): boolean;
 
-export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };
+export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };

package/dist/index.js

@@ -25,6 +25,7 @@ __export(index_exports, {
   AbleDOM: () => AbleDOM,
   AtomicRule: () => AtomicRule,
   BadFocusRule: () => BadFocusRule,
+  ContrastRule: () => ContrastRule,
   CustomNotifyRule: () => CustomNotifyRule,
   ExistingIdRule: () => ExistingIdRule,
   FindElementRule: () => FindElementRule,
@@ -96,7 +97,7 @@ var ValidationRule = class {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/ui.css
-var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
+var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: auto;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
 
 // src/ui/domBuilder.ts
 var DOMBuilder = class {
@@ -154,7 +155,7 @@ var DOMBuilder = class {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/close.svg
-var close_default = function buildSVG(parent) {
+var close_default = (function buildSVG(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
@@ -165,10 +166,10 @@ var close_default = function buildSVG(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/help.svg
-var help_default = function buildSVG2(parent) {
+var help_default = (function buildSVG2(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
@@ -179,10 +180,10 @@ var help_default = function buildSVG2(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/log.svg
-var log_default = function buildSVG3(parent) {
+var log_default = (function buildSVG3(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("polyline", { "points": "4 7 9 12 4 17" }, void 0, "http://www.w3.org/2000/svg");
@@ -191,10 +192,10 @@ var log_default = function buildSVG3(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/reveal.svg
-var reveal_default = function buildSVG4(parent) {
+var reveal_default = (function buildSVG4(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
@@ -209,10 +210,10 @@ var reveal_default = function buildSVG4(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/bug.svg
-var bug_default = function buildSVG5(parent) {
+var bug_default = (function buildSVG5(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("ellipse", { "cx": "10", "cy": "12", "rx": "4", "ry": "5", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -237,10 +238,10 @@ var bug_default = function buildSVG5(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/hideall.svg
-var hideall_default = function buildSVG6(parent) {
+var hideall_default = (function buildSVG6(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -251,10 +252,10 @@ var hideall_default = function buildSVG6(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
-var muteall_default = function buildSVG7(parent) {
+var muteall_default = (function buildSVG7(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -267,10 +268,10 @@ var muteall_default = function buildSVG7(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
-var showall_default = function buildSVG8(parent) {
+var showall_default = (function buildSVG8(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -279,47 +280,47 @@ var showall_default = function buildSVG8(parent) {
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
-var aligntopleft_default = function buildSVG9(parent) {
+var aligntopleft_default = (function buildSVG9(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "3", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopright.svg
-var aligntopright_default = function buildSVG10(parent) {
+var aligntopright_default = (function buildSVG10(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "11", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomright.svg
-var alignbottomright_default = function buildSVG11(parent) {
+var alignbottomright_default = (function buildSVG11(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "11", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomleft.svg
-var alignbottomleft_default = function buildSVG12(parent) {
+var alignbottomleft_default = (function buildSVG12(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "3", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
   builder.closeTag();
   builder.closeTag();
   return parent.firstElementChild;
-};
+});
 
 // src/ui/ui.ts
 var pressedClass = "pressed";
@@ -1618,6 +1619,147 @@ var FocusableElementLabelRule = class extends ValidationRule {
   }
 };
 
+// src/rules/contrast.ts
+function hexToRgb(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((x) => x + x).join("");
+  }
+  if (hex.length !== 6) {
+    return null;
+  }
+  const num = parseInt(hex, 16);
+  return [num >> 16 & 255, num >> 8 & 255, num & 255];
+}
+function parseColor(color) {
+  color = color.trim();
+  if (color.startsWith("#")) {
+    return hexToRgb(color);
+  }
+  const rgbMatch = color.match(
+    /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)$/
+  );
+  if (rgbMatch) {
+    return [
+      parseInt(rgbMatch[1], 10),
+      parseInt(rgbMatch[2], 10),
+      parseInt(rgbMatch[3], 10)
+    ];
+  }
+  return null;
+}
+function luminance([r, g, b]) {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+}
+function contrastRatio(l1, l2) {
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+function isTransparent(color) {
+  if (!color) {
+    return true;
+  }
+  color = color.trim();
+  if (color === "transparent" || color === "rgba(0, 0, 0, 0)") {
+    return true;
+  }
+  const rgbaMatch = color.match(/^rgba?\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)$/);
+  if (rgbaMatch && parseFloat(rgbaMatch[1]) === 0) {
+    return true;
+  }
+  return false;
+}
+var ContrastRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "ContrastRule");
+    __publicField(this, "anchored", true);
+  }
+  accept(element) {
+    if (!isElementVisible(element)) {
+      return false;
+    }
+    const hasDirectTextContent = Array.from(element.childNodes).some((node) => {
+      var _a;
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = (_a = node.textContent) == null ? void 0 : _a.trim();
+        return text && text.length > 0;
+      }
+      return false;
+    });
+    return hasDirectTextContent;
+  }
+  validate(element) {
+    const win = this.window;
+    if (!win) {
+      return null;
+    }
+    const style = win.getComputedStyle(element);
+    const fg = parseColor(style.color);
+    if (!fg) {
+      return null;
+    }
+    const hasChildWithDifferentColor = Array.from(element.children).some(
+      (child) => {
+        var _a;
+        if (child instanceof HTMLElement && ((_a = child.textContent) == null ? void 0 : _a.trim())) {
+          const childStyle = win.getComputedStyle(child);
+          const childColor = parseColor(childStyle.color);
+          if (childColor && (childColor[0] !== fg[0] || childColor[1] !== fg[1] || childColor[2] !== fg[2])) {
+            return true;
+          }
+        }
+        return false;
+      }
+    );
+    if (hasChildWithDifferentColor) {
+      return null;
+    }
+    let bg = null;
+    let el = element;
+    let depth = 0;
+    const maxDepth = 50;
+    while (el && depth < maxDepth) {
+      const bgColor = win.getComputedStyle(el).backgroundColor;
+      if (!isTransparent(bgColor)) {
+        const parsedBg = parseColor(bgColor);
+        if (parsedBg) {
+          bg = parsedBg;
+          break;
+        }
+      }
+      el = el.parentElement;
+      depth++;
+    }
+    if (!bg) {
+      bg = [255, 255, 255];
+    }
+    const l1 = luminance(fg);
+    const l2 = luminance(bg);
+    const ratio = contrastRatio(l1, l2);
+    const fontSize = parseFloat(style.fontSize);
+    const fontWeight = style.fontWeight;
+    const isBold = fontWeight === "bold" || fontWeight === "bolder" || parseInt(fontWeight, 10) >= 700;
+    const isLarge = fontSize >= 24 || fontSize >= 18.66 && isBold;
+    const minRatio = isLarge ? 3 : 4.5;
+    if (ratio < minRatio) {
+      return {
+        issue: {
+          id: "contrast",
+          message: `Text contrast ratio is ${ratio.toFixed(2)}:1, which is below the minimum of ${minRatio}:1 (text: rgb(${fg.join(", ")}), background: rgb(${bg.join(", ")})) on ${element.tagName}`,
+          element,
+          help: "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
+        }
+      };
+    }
+    return null;
+  }
+};
+
 // src/rules/existingid.ts
 var ExistingIdRule = class extends ValidationRule {
   constructor() {
@@ -1869,6 +2011,7 @@ var CustomNotifyRule = class extends ValidationRule {
   AbleDOM,
   AtomicRule,
   BadFocusRule,
+  ContrastRule,
   CustomNotifyRule,
   ExistingIdRule,
   FindElementRule,