Analyzes color contrast on web pages or raw HTML to verify compliance with WCAG contrast requirements. Provides detailed contrast ratios, identifies failing elements, and suggests color fixes that meet accessibility standards.
Best For Specific color contrast analysis
WCAG 2.1 or APCA algorithm comparison
Text size and weight considerations
Getting suggested color fixes with CSS code
Parameters URL of the page to analyze Either url or html is required, but not both.
Raw HTML content to analyze (alternative to URL) Useful for analyzing color schemes in components or templates.
Configuration options for the analysis WCAG conformance level: "AA" or "AAA"
AA : 4.5:1 for normal text, 3:1 for large textAAA : 7:1 for normal text, 4.5:1 for large text Algorithm to use:
"WCAG21" - WCAG 2.1 standard (default)"APCA" - APCA (WCAG 3.0 draft - experimental) CSS selector to scope analysis to specific section Include suggested color fixes for failing elements
Include elements that pass contrast requirements in results
Browser behavior options CSS selector to wait for before analysis
Milliseconds to wait before analysis (max 60,000ms)
Viewport dimensions Viewport height in pixels
Ignore HTTPS certificate errors (for local dev servers)
Response Whether the analysis completed successfully
The analyzed URL or "[html content]"
WCAG level used for analysis ("AA" or "AAA")
Total number of contrast issues found
List of contrast issues Always "contrast-analyzer"
Issue severity: "serious" (fails requirements) or "minor" (passes)
WCAG criterion details WCAG criterion: "1.4.3" (AA) or "1.4.6" (AAA)
WCAG level: "AA" or "AAA"
WCAG version: "2.1" or "3.0" (for APCA)
Criterion title (e.g., "Contrast (Minimum)")
Element location information CSS selector for the element
HTML snippet of the element
Human-readable description of the contrast issue
Explanation of real-world impact on users
List of remediation suggestions
User groups affected (e.g., "low-vision", "color-blind")
Detailed contrast information Foreground (text) color in rgb format
Background color in rgb format
Current contrast ratio (WCAG 2.1) or lightness (APCA)
Whether text qualifies as “large text” (18pt+ or 14pt+ bold)
Font weight (400 = normal, 700 = bold)
Suggested colors to fix the issue Suggested foreground color (hex)
Suggested background color (hex)
New contrast ratio after fix
Aggregated statistics Total text elements analyzed
Number of elements that pass
Number of elements that fail
Breakdown by text size { "normalText" : { "passing" : 18 , "failing" : 3 }, "largeText" : { "passing" : 4 , "failing" : 0 } }
Analysis duration in milliseconds
Contrast Requirements WCAG 2.1 (Standard) Level Normal Text Large Text Non-text AA 4.5:1 3:1 3:1 AAA 7:1 4.5:1 -
Large text = 18pt+ (24px) or 14pt+ bold (18.66px)APCA (WCAG 3.0 Draft) Element Type Required Lightness (Lc) Body text 75Lc Large text 60Lc Non-text 45Lc
APCA is experimental and part of the WCAG 3.0 draft. Use WCAG 2.1 for legal/regulatory compliance.
Examples Natural Language
JSON Input
WCAG AAA Level
Specific Section
APCA Algorithm
Include Passing Elements
HTML Analysis
Check the color contrast of https://example.com
Response Example { "success" : true , "target" : "https://example.com" , "wcagLevel" : "AA" , "issueCount" : 3 , "issues" : [ { "id" : "contrast-0" , "ruleId" : "color-contrast" , "tool" : "contrast-analyzer" , "severity" : "serious" , "wcag" : { "criterion" : "1.4.3" , "level" : "AA" , "principle" : "perceivable" , "version" : "2.1" , "title" : "Contrast (Minimum)" }, "location" : { "selector" : "p.subtitle" , "snippet" : "<p class= \" subtitle \" >Light gray text on white</p>" }, "message" : "Contrast ratio 2.5:1 does not meet AA requirements (4.5:1 required for normal text)" , "humanContext" : "Users with low vision or color blindness may have difficulty reading this text. The current contrast of 2.5:1 is below the AA threshold of 4.5:1." , "suggestedActions" : [ "Increase contrast ratio to at least 4.5:1" , "Consider using #767676 as the text color" ], "affectedUsers" : [ "low-vision" , "color-blind" ], "contrastData" : { "foreground" : "rgb(180, 180, 180)" , "background" : "rgb(255, 255, 255)" , "currentRatio" : 2.5 , "requiredRatio" : 4.5 , "isLargeText" : false , "fontSize" : 16 , "fontWeight" : 400 , "suggestedFix" : { "foreground" : "#767676" , "background" : "#ffffff" , "newRatio" : 4.54 } } } ], "summary" : { "total" : 25 , "passing" : 22 , "failing" : 3 , "byTextSize" : { "normalText" : { "passing" : 18 , "failing" : 3 }, "largeText" : { "passing" : 4 , "failing" : 0 } } }, "duration" : 1234 }
Use Cases Design System Validation { "url" : "https://design-system.myapp.com/colors" , "options" : { "wcagLevel" : "AA" , "includePassingElements" : true } }
Validate that your design system’s color palette meets WCAG requirements.
Compare WCAG 2.1 vs APCA Analyze the contrast of https://example.com using both WCAG 2.1 and APCA algorithms
Run twice with different contrastAlgorithm values to compare results.
{ "url" : "https://example.com" , "options" : { "selector" : "header, footer" } }
Focus on specific sections with potentially problematic color schemes.
Component Color Testing { "html" : "<button style='background: #3498db; color: #fff;'>Submit</button>" , "options" : { "wcagLevel" : "AAA" } }
Test component color combinations before implementing in production.
Use suggestFixes: true (default) to get actionable color recommendations with exact hex values and expected contrast ratios.
WCAG 2.1 vs APCA Aspect WCAG 2.1 APCA Unit Ratio (e.g., 4.5:1) Lightness contrast (Lc) Polarity Not considered Light-on-dark vs dark-on-light Status Current standard Experimental (WCAG 3.0 draft) Legal/regulatory Yes Not yet Perceptual accuracy Good Better
APCA is more perceptually accurate but not yet a legal standard. Use WCAG 2.1 for compliance, but consider APCA for future-proofing your design.
analyze-with-axe Full accessibility analysis (includes basic contrast)
analyze-with-lighthouse Lighthouse includes contrast audits
analyze-mixed Run multiple tools together
Contrast Check Prompt Guided contrast analysis workflow
