WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA & AAA standards. Get a full accessibility report with safe color alternatives.
| Criterion | Required | Your ratio | Result |
|---|---|---|---|
| AA — Normal Text | 4.5:1 | ||
| AA — Large Text | 3:1 | ||
| AA — UI Components | 3:1 | ||
| AAA — Normal Text | 7:1 | ||
| AAA — Large Text | 4.5:1 |
Colors outlined in green pass WCAG AA (4.5:1). Click any to apply as foreground.
| Level | Text size | Min ratio |
|---|---|---|
| AA | Normal (<18pt) | 4.5:1 |
| AA | Large (18pt+) | 3:1 |
| AA | UI components | 3:1 |
| AAA | Normal (<18pt) | 7:1 |
| AAA | Large (18pt+) | 4.5:1 |
How to Check Color Contrast
- Enter your foreground color — click the color swatch to open the color picker, or type a hex code (e.g.
#ffffff) directly into the input field. - Enter your background color — same process for the background. Click "Swap Colors" to reverse them at any time.
- Read the contrast ratio — the large number updates instantly. A green number means passing; orange means partial pass (large text only); red means failing all WCAG levels.
- Check the WCAG report table — each row shows a specific criterion (AA normal text, AAA large text, etc.) with pass/fail status.
- Copy the full report — click "Copy Full Report" to get a plain-text summary you can paste into a design review, ticket, or audit document.
- Use the safe color grid — if your foreground fails, the "Safe Foreground Colors" panel shows 40 colors sorted by contrast ratio. Green-outlined swatches pass AA.
- Try quick pairs — click any "Quick Accessible Pairs" card to instantly load a known high-contrast combination.
What counts as "large text"?
WCAG defines large text as 18pt (24px) or larger in regular weight, or 14pt (approximately 18.67px) bold or larger. For most body text on the web, apply the 4.5:1 AA normal text requirement.
The WCAG Contrast Ratio Formula
The WCAG contrast ratio is defined in the WCAG 2.1 specification as:
Step 1 — Convert hex to linear RGB
Each RGB channel (0–255) is normalized to 0–1, then linearized to remove gamma encoding:
Step 2 — Compute relative luminance
Relative luminance uses perceptual weightings — green contributes most to perceived brightness (71.52%), red is next (21.26%), blue is least (7.22%):
Step 3 — Compute the ratio
Order L1 as the lighter (higher luminance) and L2 as the darker:
The + 0.05 offset prevents division by zero for pure black (L=0) and ensures the ratio for identical colors equals 1:1, and for black-on-white equals 21:1.
Example: white on black
What is WCAG and Why Does Contrast Matter?
WCAG (Web Content Accessibility Guidelines) is a set of international standards published by the W3C. The current active version is WCAG 2.1, with 2.2 finalized in 2023. Contrast requirements appear under Success Criterion 1.4.3 (Minimum Contrast) and 1.4.6 (Enhanced Contrast).
Low contrast text is one of the most common accessibility failures on the web. It affects:
- People with low vision — estimated 246 million people worldwide have moderate-to-severe vision impairment
- Color blind users — ~8% of males and 0.5% of females have some form of color vision deficiency
- Situational limitations — reading on a bright screen outdoors, viewing on an old monitor, or cognitive fatigue all reduce effective contrast perception
- Aging users — the pupil diameter shrinks and lens yellows with age, effectively reducing perceived contrast
WCAG Conformance Levels
| Level | Normal Text | Large Text | UI Components | Status |
|---|---|---|---|---|
| A | No requirement | No requirement | No requirement | Minimum |
| AA | 4.5:1 | 3:1 | 3:1 | Legally required (most jurisdictions) |
| AAA | 7:1 | 4.5:1 | Not defined | Best practice |
Legal requirements
In many countries, WCAG AA is legally enforceable under accessibility laws:
- USA: ADA (Americans with Disabilities Act) and Section 508 of the Rehabilitation Act
- EU: Web Accessibility Directive (Directive 2016/2102) — applies to all public sector websites and apps
- UK: Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018
- Canada: AODA (Accessibility for Ontarians with Disabilities Act)
- Australia: Disability Discrimination Act 1992 + WCAG 2.1 AA for government websites
WCAG 3.0 and APCA
The upcoming WCAG 3.0 draft replaces the current contrast formula with APCA (Advanced Perceptual Contrast Algorithm), which accounts for font weight, size, and polarity (light-on-dark vs dark-on-light). APCA is more perceptually accurate but is not yet legally required. This tool currently implements the WCAG 2.1 formula, which remains the legal standard.
WCAG contrast ratio measures the luminance difference between a foreground color (usually text) and its background. A ratio of 1:1 means both colors are identical; 21:1 is the maximum (pure black on white). It matters because low-contrast text is difficult or impossible to read for users with low vision, color blindness, or situational impairments like bright sunlight.
WCAG 2.1 AA requires: 4.5:1 for normal text (under 18pt regular or 14pt bold), 3:1 for large text (18pt+ regular or 14pt+ bold), and 3:1 for non-text UI components and graphical objects that convey information. This is the most widely legally enforced standard.
AA is the minimum legal standard. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text. W3C notes that AAA cannot always be achieved for all content, particularly photographs or complex visuals. It is recommended for critical informational text like warnings, legal notices, and instructions.
Yes. Under WCAG 1.4.11 (Non-text Contrast, Level AA), graphical objects and UI components that convey meaning — including icons, charts, focus indicators, and form boundaries — require a minimum 3:1 contrast ratio against adjacent colors. Text within images still requires 4.5:1 (AA) or 3:1 if large.
No. Decorative images and text that serve no informational purpose are explicitly exempt under WCAG 1.4.3. This includes CSS background patterns, watermarks, and disabled UI controls. However, if a decorative element is the only way to convey information, it is no longer decorative and the requirement applies.
Contrast ratio measures luminance difference — brightness contrast — which is independent of hue. This means two colors that appear very different to trichromatic vision (e.g. red and green) can still fail contrast if they have similar luminance. Always check contrast ratio regardless of whether colors appear "obviously different" to you.
Relative luminance is a perceptual measure of brightness, normalized to a 0–1 scale where 0 is absolute black and 1 is the brightest white. It is calculated from linearized (gamma-corrected) RGB values using the formula: L = 0.2126R + 0.7152G + 0.0722B. These coefficients reflect how the human eye perceives red, green, and blue brightness.
Use the brand color as an accent or background, but choose a compliant text color for body copy. Common approaches: darken the brand color for text use (increase lightness contrast), use the brand color only for large headings (3:1 threshold is lower), or reserve the brand color for non-text elements like borders and icons. The "Safe Foreground Colors" panel in this tool shows passing alternatives.
Yes. Light mode and dark mode are separate visual states and each must independently meet contrast requirements. A color pair that passes in light mode may fail in dark mode if you swap backgrounds. Many design systems explicitly define separate light and dark token values to ensure both modes are compliant.
APCA (Advanced Perceptual Contrast Algorithm) is the new contrast method proposed for WCAG 3.0. It accounts for font weight, font size, and whether text is light-on-dark or dark-on-light — factors the current WCAG 2.1 formula ignores. APCA is more perceptually accurate but is not yet legally required. WCAG 3.0 is still in development as of 2026. Use the WCAG 2.1 formula (used in this tool) for all legal compliance work.