Color Contrast Checker
Verify that your text and background color combinations meet WCAG 2.2 contrast requirements. Enter any two colors to instantly see your contrast ratio and pass/fail results for AA, AAA, large text, and UI components.
Sample Heading
This is what body text looks like with these color choices. Make sure it is easy to read.
Small text (14px) is harder to read at low contrast.
Normal Text AA (4.5:1)
Minimum for body text (WCAG 1.4.3)
Normal Text AAA (7:1)
Enhanced for body text (WCAG 1.4.6)
Large Text AA (3:1)
18pt / 14pt bold minimum (WCAG 1.4.3)
Large Text AAA (4.5:1)
18pt / 14pt bold enhanced (WCAG 1.4.6)
UI Components (3:1)
Non-text contrast (WCAG 1.4.11)
Understanding WCAG Color Contrast Requirements
Color contrast is one of the most common accessibility issues on the web. The Web Content Accessibility Guidelines (WCAG) 2.2 define specific contrast ratios that text and UI elements must meet so that people with low vision, color deficiencies, or age-related vision changes can read and interact with your content.
Contrast ratios range from 1:1 (no contrast, such as white text on a white background) to 21:1 (maximum contrast, black on white). WCAG defines minimum thresholds depending on the size of the text and the conformance level you are targeting.
SC 1.4.3 — Contrast (Minimum) · Level AA
Normal text must have a contrast ratio of at least 4.5:1. Large text (18pt or 14pt bold) must have a contrast ratio of at least 3:1. This is the baseline requirement that most accessibility laws reference.
SC 1.4.6 — Contrast (Enhanced) · Level AAA
For enhanced accessibility, normal text requires a contrast ratio of at least 7:1 and large text requires 4.5:1. While AAA is not required by any regulation, it benefits the widest range of users.
SC 1.4.11 — Non-text Contrast · Level AA
UI components (form inputs, buttons, focus indicators) and meaningful graphical objects must have a contrast ratio of at least 3:1 against adjacent colors. This was introduced in WCAG 2.1 and carried forward into WCAG 2.2.
What Counts as Large Text?
Large text is at least 18 points (24px) at regular weight, or at least 14 points (approximately 18.66px) if bold. Large text gets a lower contrast threshold because bigger characters are inherently easier to read.
How the Contrast Ratio Is Calculated
The WCAG contrast ratio formula works in three steps. First, each sRGB color channel is linearized: values at or below 0.04045 are divided by 12.92; values above are transformed using ((sRGB + 0.055) / 1.055) ^ 2.4. Next, relative luminance is calculated as L = 0.2126R + 0.7152G + 0.0722B. Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 is the darker. This produces a value between 1:1 and 21:1.
Frequently Asked Questions
What contrast ratio does WCAG require for normal text?
WCAG 2.2 Success Criterion 1.4.3 (Level AA) requires a minimum contrast ratio of 4.5:1 for normal-sized text. For Level AAA conformance under SC 1.4.6, the requirement increases to 7:1. Most accessibility laws, including the ADA and the European Accessibility Act, reference Level AA as the compliance target.
What counts as large text in WCAG?
Large text is defined as text that is at least 18pt (24px) at normal weight, or at least 14pt (approximately 18.66px) if bold. Large text has a lower minimum contrast requirement — 3:1 for AA and 4.5:1 for AAA — because larger characters are easier to distinguish at lower contrast levels.
How is the contrast ratio calculated?
The WCAG relative luminance formula linearizes each sRGB color channel, then combines them as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker. This produces a value between 1:1 (identical colors) and 21:1 (pure black on pure white).
What is WCAG 1.4.11 Non-text Contrast?
WCAG 1.4.11 (Level AA) applies to user interface components and graphical objects, not just text. Form input borders, button outlines, icons that convey meaning, and focus indicators must all achieve at least a 3:1 contrast ratio against their adjacent colors. This criterion was added in WCAG 2.1 and remains in WCAG 2.2.
Does this tool check my entire website for contrast issues?
This tool checks individual color pairs that you enter manually. To automatically scan every element on your website for contrast failures and other WCAG 2.2 violations, use the CompliaScan site scanner. It crawls your pages, tests each text element against its computed background, and reports every contrast issue along with fix suggestions.
Are there any exceptions to the contrast requirements?
Yes. WCAG exempts a few cases: logotypes (text that is part of a logo or brand name), incidental text (text in inactive UI components, purely decorative text, or text that is not visible to anyone), and large-scale text (which has the lower 3:1 threshold). Placeholder text in form fields is not exempt and must meet contrast requirements if it conveys meaningful information.
Check Your Entire Site for Contrast Issues
Checking colors one pair at a time? Our automated scanner tests every text element on your pages against WCAG 2.2 contrast requirements and finds issues you might miss. Free scan, no signup required.
Scan Your Website FreeGet Color Contrast Tips in Your Inbox
Receive actionable accessibility insights, WCAG updates, and contrast best practices.
Related Resources
WCAG Checker
Scan your full website for WCAG 2.2 Level AA violations including contrast issues, missing alt text, and more.
ADA Compliance Checker
Check your site against ADA requirements based on WCAG 2.2 Level AA standards.
WCAG 2.2 Compliance Guide
Learn about every WCAG 2.2 success criterion and how to meet each one with practical examples.
View Pricing
Upgrade for full-site scanning, monitoring, PDF reports, and more. Plans start free.