visual-ai-assertions 0.10.0 → 0.11.0

package/README.md

@@ -253,10 +253,10 @@ await ai.elementsVisible(screenshot, ["Submit button", "Nav bar", "Footer"]);
 // Check that UI elements are hidden
 await ai.elementsHidden(screenshot, ["Loading spinner", "Error modal"]);
 
-// Accessibility checks (contrast, readability, interactive visibility)
+// Accessibility checks (contrast, readability, interactive visibility, color blindness, color-alone meaning)
 await ai.accessibility(screenshot);
 await ai.accessibility(screenshot, {
-  checks: [Accessibility.CONTRAST, Accessibility.READABILITY],
+  checks: [Accessibility.CONTRAST, Accessibility.COLOR_BLINDNESS, Accessibility.COLOR_ALONE],
 });
 
 // Layout checks (overlap, overflow, alignment)

package/dist/index.cjs

@@ -142,7 +142,11 @@ var Accessibility = {
   /** Detects text that is cut off, overlapping, too small, or obscured */
   READABILITY: "readability",
   /** Detects interactive elements that are not visually distinct */
-  INTERACTIVE_VISIBILITY: "interactive-visibility"
+  INTERACTIVE_VISIBILITY: "interactive-visibility",
+  /** Detects color choices likely to be indistinguishable to viewers with common color vision deficiencies */
+  COLOR_BLINDNESS: "color-blindness",
+  /** Detects information conveyed by color alone, without a non-color cue (icon, text, pattern, position) */
+  COLOR_ALONE: "color-alone"
 };
 
 // src/errors.ts
@@ -467,12 +471,16 @@ var ALL_CHECKS = Object.values(Accessibility);
 var ACCESSIBILITY_ROLE = "Evaluate this screenshot for visual accessibility. Focus on what you can actually perceive \u2014 apparent contrast levels, text legibility, and visual distinctiveness of interactive elements.";
 var ACCESSIBILITY_EDGE_RULES = [
   "Do not state specific contrast ratios. Describe contrast as 'appears sufficient' or 'appears low'.",
-  "Dark mode and light mode themes are both valid. Do not flag a valid dark theme as a contrast issue."
+  "Dark mode and light mode themes are both valid. Do not flag a valid dark theme as a contrast issue.",
+  "Purely decorative color (branding, backgrounds, gradients) is not a color-blindness or color-alone issue \u2014 only flag color usage that carries meaning a user must perceive to use the interface.",
+  "Only evaluate color cues that are visible in the screenshot. Do not assume hover/focus state colors exist if they are not shown."
 ];
 var CHECK_STATEMENTS = {
   [Accessibility.CONTRAST]: "All text and interactive elements appear to have sufficient color contrast \u2014 text is clearly readable against its background",
   [Accessibility.READABILITY]: "All text is readable \u2014 no text is cut off, overlapping, too small to read, or obscured by background images",
-  [Accessibility.INTERACTIVE_VISIBILITY]: "All interactive elements (buttons, links, inputs) are clearly identifiable and visually distinct from non-interactive content"
+  [Accessibility.INTERACTIVE_VISIBILITY]: "All interactive elements (buttons, links, inputs) are clearly identifiable and visually distinct from non-interactive content",
+  [Accessibility.COLOR_BLINDNESS]: "Information conveyed by color remains distinguishable to viewers with common color vision deficiencies \u2014 status indicators, chart series, and other meaningful color pairings do not rely on hue combinations that are commonly confused (e.g., red/green, blue/purple)",
+  [Accessibility.COLOR_ALONE]: "Information conveyed by color is also conveyed through at least one non-color cue \u2014 text labels, icons, shapes, patterns, underlines, or position accompany any color-based meaning (e.g., required fields, error states, chart legends, link styling)"
 };
 function buildAccessibilityPrompt(options) {
   const checks = options?.checks ?? [...ALL_CHECKS];