WCAG Compliance Report
Enter the colours from your design palette - text, background, accent, link, and more - and get a comprehensive WCAG 2.1 accessibility compliance report instantly. Every foreground-background pair is evaluated against AA and AAA contrast criteria for normal text, large text, and UI components. The report shows your overall compliance score, per-pair ratings with pass/fail details, and usage recommendations for non-passing combinations. Perfect for design system validation, accessibility audits, and compliance documentation. Fully private, 100% free, and no signup required.
Sample Palettes
Palette Colors
| Pair | Colors | Ratio | Rating | Normal Text | Large Text | UI | ||
|---|---|---|---|---|---|---|---|---|
on | Text / Foreground on Background | 17.06:1 | AAA | AA AAA | AA AAA | |||
on | Background on Text / Foreground | 17.06:1 | AAA | AA AAA | AA AAA | |||
on | Text / Foreground on Accent | 5.10:1 | AA | AA AAA | AA AAA | |||
on | Accent on Text / Foreground | 5.10:1 | AA | AA AAA | AA AAA | |||
on | Text / Foreground on Link | 4.30:1 | AA Large | AA AAA | AA AAA | |||
on | Link on Text / Foreground | 4.30:1 | AA Large | AA AAA | AA AAA | |||
on | Background on Link | 3.97:1 | AA Large | AA AAA | AA AAA | |||
on | Link on Background | 3.97:1 | AA Large | AA AAA | AA AAA | |||
on | Background on Accent | 3.34:1 | AA Large | AA AAA | AA AAA | |||
on | Accent on Background | 3.34:1 | AA Large | AA AAA | AA AAA | |||
on | Accent on Link | 1.19:1 | Fail | AA AAA | AA AAA | |||
on | Link on Accent | 1.19:1 | Fail | AA AAA | AA AAA | |||
Pair Recommendations
Text / Foreground on Accent
Safe for body text and large text at AA level
Accent on Text / Foreground
Safe for body text and large text at AA level
Text / Foreground on Link
Safe for large text (≥18pt or ≥14pt bold) and UI components only
Link on Text / Foreground
Safe for large text (≥18pt or ≥14pt bold) and UI components only
Why Use Our WCAG Compliance Report?
Instant Full-Palette Compliance Report
The WCAG compliance report computes contrast ratios for every foreground-background pair in your palette instantly as you type. No button to press - add or change any colour and the entire report updates in real time, showing pass/fail for all WCAG 2.1 criteria.
Comprehensive Criteria Coverage
Every colour pair is evaluated against WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum - AA), 1.4.6 (Contrast Enhanced - AAA), and 1.4.11 (Non-text Contrast - AA). Results are shown for normal text, large text, and UI components with a clear pass/fail indicator for each.
100% Private Browser Processing
All contrast calculations happen locally in your browser using JavaScript. Your colour palette values never leave your device and are never sent to any server - completely safe for proprietary brand colours and client projects.
Free & No Signup Required
Generate unlimited WCAG compliance reports with no signup, no subscription, and no usage caps. The tool is completely free forever with no ads blocking the interface.
Common Use Cases for WCAG Compliance Report
Design System Validation
Design system maintainers use the WCAG compliance report to validate that every colour token in the system meets accessibility standards. Enter the full palette - text, background, accent, link, success, error, and warning - and get a complete compliance matrix for all combinations.
CSS Theme Development
Frontend developers use the WCAG compliance report to verify that their light and dark theme colour palettes pass accessibility requirements before deployment. The report catches contrast issues early, preventing accessibility regressions in production.
Accessibility Auditing
Accessibility auditors use the WCAG compliance report to quickly evaluate the colour contrast of an entire design system. The comprehensive pair-by-pair analysis identifies exactly which colour combinations fail and at what level, streamlining the remediation process.
Compliance Documentation
Accessibility consultants use the WCAG compliance report to generate documentation for VPAT (Voluntary Product Accessibility Template) reports and accessibility conformance statements. The copy-to-clipboard function makes it easy to include results in formal documentation.
Brand & Marketing Design
Brand designers use the WCAG compliance report to ensure that marketing materials, landing pages, and brand guidelines use colour combinations that meet accessibility standards without compromising brand identity.
SaaS & E-commerce Platforms
Product teams use the WCAG compliance report to validate that their entire UI colour system - from buttons and links to form states and alerts - provides sufficient contrast for all users, reducing legal risk and improving conversion rates for users with visual impairments.
Understanding the WCAG Compliance Report
What Is a WCAG Compliance Report?
A WCAG compliance report evaluates whether the colour combinations in a design palette meet the contrast requirements defined in the Web Content Accessibility Guidelines (WCAG) 2.1. Given a set of colours - typically text, background, accent, link, and other UI colours - the report computes the contrast ratio for every meaningful foreground-background pair and checks it against WCAG thresholds for normal text (AA: 4.5:1, AAA: 7:1), large text (AA: 3:1, AAA: 4.5:1), and UI components (AA: 3:1). The result is a comprehensive matrix showing exactly which colour combinations pass or fail each criterion.
How Our WCAG Compliance Report Works
- Enter your colour palette: Start with the four essential colours - text, background, accent, and link - by typing HEX values or using the colour picker. Add optional colours like heading, border, success, error, and warning as needed. You can also load a sample palette to see how the report works.
- Contrast ratios are calculated: The tool converts every colour to its sRGB components and calculates the relative luminance using the WCAG 2.1 formula. For each unique foreground-background pair, the contrast ratio is computed as (L₁ + 0.05) / (L₂ + 0.05) where L₁ is the lighter luminance. The result is a value between 1:1 (no contrast) and 21:1 (maximum contrast).
- Report is generated instantly: Each colour pair is evaluated against all five WCAG criteria (normal text AA and AAA, large text AA and AAA, UI components AA). The report shows an overall compliance score, per-pair ratings, and usage recommendations for pairs that don't pass all criteria. All processing happens entirely in your browser - no data is ever uploaded.
WCAG Contrast Criteria Explained
- Normal Text - AA (4.5:1): The minimum contrast ratio required for body text under 18pt (or 14pt bold). This is the most common accessibility requirement and is mandated by most accessibility laws worldwide, including ADA, EN 301 549, and AODA.
- Normal Text - AAA (7:1): An enhanced contrast ratio for normal text that provides better readability for users with visual impairments. AAA is recommended for essential content but is not required for general WCAG compliance.
- Large Text - AA (3:1): A reduced contrast requirement for text that is at least 18pt or 14pt bold, since larger characters are easier to distinguish. Large text that passes 3:1 is considered acceptable for AA compliance.
- Large Text - AAA (4.5:1): The enhanced contrast requirement for large text. Large text passing 4.5:1 meets AAA standards.
- UI Components - AA (3:1): Applies to graphical objects and UI components (buttons, form fields, icons) where the visual information needs to be distinguishable. This is defined in WCAG 2.1 Success Criterion 1.4.11.
Reading Your Compliance Report
The overall compliance score shows the percentage of colour pairs that pass WCAG AA for normal text - this represents the strictest commonly required criterion. A score of 100% means every colour combination in your palette is safe for body text use. The per-pair table gives you the exact contrast ratio and pass/fail status for each criterion. Pairs marked AA Large can be used for large text and UI elements but not for body text. Pairs marked Fail should not be used together for any text or interactive element. Use the recommendations section to understand the limitations of each non-passing pair and plan your colour adjustments.
Related Accessibility & Color Tools
Color Contrast Checker
Check WCAG 2.1 contrast ratio between any two colours with AA/AAA pass/fail for normal text, large text, and UI components. Live preview with HEX and RGB input.
Color Palette Generator
Generate 5-colour palettes from a base colour using harmony rules. Lock individual colours and regenerate. Export as CSS, SCSS, or Tailwind.
HEX to RGB Converter
Convert any HEX colour code to RGB and RGBA values instantly with live colour preview and channel bars.
CSS Named Colors Reference
Browse, search, and copy all 148 CSS named colours with HEX, RGB, and HSL values. Filter by 12 colour families.
Frequently Asked Questions About WCAG Compliance Report
A WCAG compliance report evaluates the colour contrast of a design palette against the Web Content Accessibility Guidelines (WCAG) 2.1. It checks every foreground-background colour combination against five contrast criteria - normal text AA (4.5:1) and AAA (7:1), large text AA (3:1) and AAA (4.5:1), and UI components AA (3:1) - and generates a comprehensive pass/fail matrix.
The contrast ratio is calculated using the WCAG 2.1 relative luminance formula. Each colour is converted to its linearised sRGB values, and relative luminance is computed as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is then (L₁ + 0.05) / (L₂ + 0.05) where L₁ is the lighter of the two luminances. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
At minimum, include your main text colour and background colour. For a comprehensive report, add your accent/primary colour, link colour, heading colour, border colour, and any state colours (success, error, warning). The more colours you include, the more thorough the compliance analysis will be.
Yes. All contrast calculations and compliance evaluations happen 100% client-side in your browser using JavaScript. Your colour palette values are never sent to any server, never stored, and never transmitted anywhere. The tool is completely private and suitable for proprietary brand colours and confidential client projects.
WCAG AA is the standard compliance level required by most accessibility laws (ADA, EN 301 549, AODA). AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level with stricter requirements - 7:1 for normal text and 4.5:1 for large text. AAA is recommended for essential content but not required for general web compliance.
A pair rated "AA Large" passes the WCAG AA threshold for large text (3:1) and UI components (3:1) but fails the stricter normal text requirement (4.5:1). This means the colour combination can be safely used for headings, buttons, and other large elements - but not for body text, captions, or other small content.
Yes. Use the "Copy Report as Text" button to copy the complete report including the overall score, per-pair contrast ratios, and pass/fail status for each criterion. This output can be included in VPAT reports, accessibility conformance statements, and design system documentation.
Yes. The tool is 100% free with no signup required, no premium features, and no usage limits. Generate unlimited compliance reports without any restrictions or hidden costs.