Color Contrast Checker
Check foreground and background color combinations against WCAG AA and AAA standards. Instant contrast ratio with pass/fail for normal and large text.
Foreground (Text)
Background
The quick brown fox jumps over the lazy dog.
Large Text Aa 24px Bold
Small text at 14px — body copy, labels, descriptions.
Extra small text at 12px — captions, metadata, legal copy.
Contrast Ratio
14.97
:1
AAAWCAG AA — Normal Text
Regular text (< 18pt) ≥ 4.5:1
WCAG AA — Large Text
Bold ≥ 14pt or regular ≥ 18pt ≥ 3:1
WCAG AAA — Normal Text
Enhanced accessibility ≥ 7:1
WCAG AAA — Large Text
Enhanced large text ≥ 4.5:1
Preset Combinations
WCAG Contrast Ratio Guidelines
The Web Content Accessibility Guidelines (WCAG) define contrast thresholds as a ratio between the relative luminance of the lighter color and the darker color. A ratio of 1:1 means identical colors (zero contrast). A ratio of 21:1 is the maximum, achieved only by pure black on pure white.
| Level | Normal Text | Large Text | Notes |
|---|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 | Minimum for legal compliance in most jurisdictions |
| AAA | ≥ 7:1 | ≥ 4.5:1 | Enhanced — recommended for critical or medical UIs |
Normal Text vs Large Text Requirements
WCAG applies different thresholds depending on text size because larger letterforms are inherently easier to distinguish. Large text is defined as:
Large Text
- — Regular weight at ≥ 18pt (24px)
- — Bold weight at ≥ 14pt (≈ 18.67px)
- — Minimum ratio: 3:1 (AA), 4.5:1 (AAA)
Normal Text
- — Everything smaller than large text
- — Body copy, labels, captions, inputs
- — Minimum ratio: 4.5:1 (AA), 7:1 (AAA)
When in doubt, use the stricter 4.5:1 threshold for all text. It is easier to maintain one standard across your design system than to evaluate every text instance individually.
Why Color Accessibility Matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Beyond color blindness, contrast issues affect users with cataracts, glaucoma, macular degeneration, and low vision — an estimated 246 million people worldwide. High contrast also benefits everyone in suboptimal conditions: small screens, bright sunlight, and aging displays. Building accessible color palettes from the start avoids expensive retrofits and makes products usable for the widest possible audience.
Accessibility is also increasingly a legal requirement. In the US, the ADA and Section 508 mandate WCAG 2.1 AA compliance for federal websites and digital products. Similar requirements exist in the EU (EN 301 549), UK (Public Sector Bodies Accessibility Regulations), Canada (AODA), and Australia (DDA). WCAG AA is the safe baseline for any public-facing product.
Frequently Asked Questions
What is WCAG and why does contrast ratio matter?
WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C that defines how to make web content accessible to people with disabilities. Contrast ratio measures the difference in luminance between a foreground (text) color and its background. A higher ratio means more contrast and easier reading. Poor contrast is one of the most common accessibility failures and affects users with low vision, color blindness, or those reading in bright sunlight.
What is the difference between WCAG AA and AAA?
WCAG AA is the standard compliance level required by most accessibility laws worldwide (including ADA, Section 508, and EN 301 549). It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level — it requires 7:1 for normal text and 4.5:1 for large text. AAA is recommended for critical interfaces like medical or government applications, but may be difficult to achieve for all text on branded interfaces.
What counts as 'large text' in WCAG?
WCAG defines large text as text that is at least 18 point (24px) at normal weight, or at least 14 point (approximately 18.67px) when bold. Large text has a lower contrast threshold because larger letterforms are easier to distinguish even at lower contrast. When in doubt, design for the stricter 4.5:1 normal-text standard — it gives you a safe margin across all sizes.
How do I fix poor color contrast?
The most reliable fix is to darken your text color or lighten your background (or vice versa) until the ratio exceeds the required threshold. If you have a brand color that fails, try darkening it by 10–20% for text use. Avoid placing gray text on white or light gray backgrounds — this is one of the most common failure points in modern minimal design. You can also increase font size and weight to qualify as 'large text', which has a lower threshold.
Does color contrast apply to non-text elements?
Yes. WCAG 1.4.11 (Non-text Contrast) at Level AA requires a minimum 3:1 contrast ratio for UI components such as buttons, input borders, focus indicators, icons, and charts. This standard applies to the visual presentation of the component against adjacent colors, not the text within it. This checker focuses on text contrast (WCAG 1.4.3), but the same ratio calculation applies to UI elements.