WCAG AA Contrast Checker
Verify that your foreground and background color pairs meet WCAG AA contrast minimums. This tool calculates contrast ratios entirely in your browser with instant results.
Color Contrast Checker
Check the contrast ratio between two colors for WCAG 2.1 accessibility compliance. Ensure your text is readable for all users.
Contrast Ratio
14.68:1
Excellent
Live Preview
Large Text (24px bold)
Normal body text at 16px. This is what most of your content will look like. Make sure it's easy to read for all users, including those with visual impairments.
Small text at 14px — captions, footnotes, and secondary content.
WCAG 2.1 Compliance
Presets
About WCAG Color Contrast
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with moderately low vision or color deficiencies.
AA Normal Text requires a contrast ratio of at least 4.5:1. This applies to body text under 18pt (24px) or under 14pt (18.66px) bold.
AA Large Text requires at least 3:1. Large text is defined as 18pt+ (24px+) or 14pt+ (18.66px+) bold.
AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text. This is recommended for long-form content and critical UI.
UI Components like icons, borders, and form controls require at least 3:1 contrast against adjacent colors (WCAG 2.1 Success Criterion 1.4.11).
The contrast ratio is calculated using the relative luminance of each color. The formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.
What is WCAG AA?
WCAG AA is the mid-level conformance standard in the Web Content Accessibility Guidelines published by the W3C. For normal text, AA requires a contrast ratio of at least 4.5:1 between foreground and background colors. For large text (18pt or 14pt bold), the requirement is 3:1. Meeting AA is the most common legal and organizational accessibility target worldwide.
Common use cases
Designers check WCAG AA compliance when selecting brand colors, building design systems, or creating UI mockups. Developers verify compliance during code review or QA testing. Meeting AA contrast is often required for government websites, educational platforms, and any organization subject to ADA, Section 508, or EN 301 549 regulations.
Frequently Asked Questions
What contrast ratio is needed for WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above).
Is WCAG AA enough for accessibility compliance?
WCAG AA is the standard most regulations reference, including ADA and Section 508 in the US. It covers the majority of users with low vision and is considered sufficient for most websites and applications.
Related Inspect Tools
Date Format Tester
Test date format patterns for strftime, date-fns, Moment.js, Go, and Java with live preview and token reference
Dockerfile Validator
Validate and lint Dockerfiles for syntax errors, security issues, best practices, and layer optimization
Kubernetes YAML Validator
Validate Kubernetes manifests for syntax, required fields, best practices, security, and resource limits
OpenAPI / Swagger Validator
Validate OpenAPI 3.x and Swagger 2.0 specs for structure, paths, schemas, security, and best practices