Color Contrast Checker (WCAG AA/AAA)
Calculate the WCAG 2.1 contrast ratio between any foreground and background color pair and instantly check AA and AAA compliance for normal text, large text, and UI components. Supports HEX and RGB input with a live preview at each text size. All calculations run locally in your browser. No signup required.
Enter foreground and background colors to instantly calculate the WCAG contrast ratio and check AA/AAA compliance for normal text, large text, and UI components. Supports HEX and RGB input — all processing runs locally in your browser.
#000000 · rgb(0, 0, 0)
#FFFFFF · rgb(255, 255, 255)
Quick Presets
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Small text (14px) — Accessibility matters for everyone.
Large Bold Text (24px bold)
Large Normal Text (18pt / 24px)
21.00:1
Excellent — passes all WCAG AAA criteria
max 21:1
Contrast ratio: 21.00:1
| Criterion | Required Ratio | Level AA | Level AAA |
|---|---|---|---|
Normal Text Body text, labels, captions (<18pt or <14pt bold) | AA: 4.5:1 AAA: 7:1 | Pass | Pass |
Large Text Headings ≥18pt (24px) or ≥14pt bold (18.67px bold) | AA: 3:1 AAA: 4.5:1 | Pass | Pass |
UI Components Buttons, form inputs, icons, focus indicators (SC 1.4.11) | AA: 3:1 AAA: — | Pass | N/A |
All contrast calculations run 100% locally in your browser using the WCAG 2.1 relative luminance formula. Large text is defined as ≥18pt (24px) regular or ≥14pt (18.67px) bold. Full WCAG validation requires manual testing with assistive technologies and expert accessibility review.
Why Use Our Color Contrast Checker?
Instant WCAG Contrast Calculation
The color contrast checker calculates the WCAG contrast ratio and all pass/fail results on every keystroke. No button to click — enter your colors and see the results instantly.
Secure & 100% Private
All contrast calculations run entirely in your browser using the WCAG 2.1 relative luminance formula. No color data is ever sent to any server.
Full WCAG 2.1 Coverage — AA & AAA
Checks all relevant WCAG 2.1 criteria: AA and AAA for normal text, AA and AAA for large text, and AA for UI components (SC 1.4.11). Includes a live preview showing how your colors look at each text size.
100% Free — No Signup Required
Completely free with no account, no premium tier, no usage limits, and no ads blocking the interface. Check color contrast as many times as you need.
Common Use Cases for Color Contrast Checker
Web Development & UI Design
Front-end developers and UI designers use the color contrast checker to verify that text and background color combinations meet WCAG AA requirements before shipping. Catching contrast failures early prevents costly accessibility remediation.
Brand Color Validation
Designers use the color contrast checker to validate that brand colors meet accessibility standards when used as text on backgrounds. Many brand palettes fail WCAG AA — the checker identifies which combinations are safe to use.
E-commerce & Product Pages
E-commerce teams use the color contrast checker to ensure product descriptions, prices, and call-to-action buttons meet WCAG AA contrast requirements — improving readability for all users including those with low vision.
Document & Presentation Design
Content creators and presentation designers use the color contrast checker to verify that slide text, chart labels, and infographic copy are readable against their chosen backgrounds.
Mobile App Design
Mobile app designers use the color contrast checker to ensure UI elements meet WCAG AA requirements across light and dark mode themes — critical for users with visual impairments on small screens.
Accessibility Audits & Compliance
Accessibility consultants and QA teams use the color contrast checker as a quick first-pass tool during WCAG audits. It identifies contrast failures that need remediation before formal assistive technology testing.
Understanding WCAG Color Contrast
What is WCAG Color Contrast?
WCAG color contrast refers to the minimum contrast ratio between foreground (text) and background colors required by the Web Content Accessibility Guidelines (WCAG) to ensure content is readable by people with low vision or color deficiencies. The contrast ratio is calculated using the relative luminance of each color — a value derived from the linearised sRGB channel values. Ratios range from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Our browser-based color contrast checker calculates this ratio instantly and evaluates it against all relevant WCAG 2.1 success criteria.
How Our Color Contrast Checker Works
- Enter Your Colors: Type a HEX value (e.g.
#0066cc) or RGB value (e.g.rgb(0, 102, 204)) into the foreground and background fields, or use the native color picker. You can also select a preset color pair to get started quickly. - Instant Calculation: The color contrast checker calculates the WCAG 2.1 relative luminance for each color and derives the contrast ratio. All calculations run locally in your browser — no color data is ever sent to a server.
- Review Results: The results table shows pass/fail status for all relevant WCAG 2.1 criteria. The live preview shows how your colors look at normal text, large text, and UI component sizes.
WCAG 2.1 Contrast Requirements
- AA — Normal Text (4.5:1): The minimum contrast ratio for body text, labels, and captions smaller than 18pt (24px) regular or 14pt (18.67px) bold. Required for WCAG 2.1 Level AA compliance.
- AA — Large Text (3:1): The minimum contrast ratio for text at 18pt (24px) or larger regular, or 14pt (18.67px) or larger bold. Headings typically qualify as large text.
- AA — UI Components (3:1): The minimum contrast ratio for the visual presentation of UI components (buttons, form inputs, focus indicators) and graphical objects. Defined in WCAG 2.1 SC 1.4.11.
- AAA — Enhanced (7:1 / 4.5:1): The enhanced contrast requirements for AAA compliance — 7:1 for normal text and 4.5:1 for large text. AAA is the highest level and is not required for all content.
Important Limitations
The color contrast checker evaluates contrast ratios against WCAG 2.1 mathematical thresholds. Passing the contrast ratio check does not guarantee full accessibility — WCAG compliance also requires correct semantic HTML, keyboard navigation, screen reader compatibility, and other non-color factors. Additionally, the WCAG contrast formula does not account for all types of color vision deficiency. Full accessibility validation requires manual testing with assistive technologies (screen readers, magnification software) and expert accessibility review.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output — free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database — free online color name finder.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors — enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Tint & Shade Generator
Generate tints (mixed with white) and shades (mixed with black) from any base color — 5–12 steps, CSS variables, Tailwind config, and HEX list export. Free online tint and shade generator.
Frequently Asked Questions About Color Contrast Checker
A color contrast checker calculates the WCAG contrast ratio between a foreground (text) color and a background color, then evaluates whether the ratio meets WCAG 2.1 AA and AAA requirements for normal text, large text, and UI components. Our tool processes everything locally in your browser using the official WCAG 2.1 relative luminance formula.
For WCAG 2.1 Level AA: normal text requires a minimum contrast ratio of 4.5:1, large text (≥18pt or ≥14pt bold) requires 3:1, and UI components (buttons, form inputs, icons) require 3:1. For Level AAA: normal text requires 7:1 and large text requires 4.5:1.
WCAG defines large text as text that is at least 18 point (24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. Headings typically qualify as large text. Body text, labels, and captions are generally considered normal text.
WCAG AA is the standard compliance level required by most accessibility laws and guidelines (ADA, EN 301 549, AODA). It 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, 4.5:1 for large text) and is not required for all content.
No. Passing the contrast ratio check is one requirement of WCAG compliance, but full accessibility also requires correct semantic HTML, keyboard navigation, screen reader compatibility, focus management, and many other factors. The color contrast checker is a useful first-pass tool, but full WCAG validation requires manual testing with assistive technologies.
The color contrast checker supports HEX colors (#RGB, #RRGGBB, #RRGGBBAA) and RGB/RGBA values (rgb(r,g,b) and rgba(r,g,b,a)). You can also use the native color picker to select any color visually. The tool displays the HEX and RGB equivalents of your selected color.
Absolutely. All contrast calculations run 100% client-side in your browser using the WCAG 2.1 relative luminance formula. No color data is ever sent to any server and nothing leaves your device.
The WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated by linearising each sRGB channel value and applying the formula: 0.2126R + 0.7152G + 0.0722B.
Yes. The color contrast checker is 100% free with no signup required, no premium tier, no usage quotas, and no ads blocking the interface. Check color contrast as many times as you need, directly in your browser.