What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability, especially for users with low vision or color blindness.

What contrast ratio do I need for WCAG AA?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). These are the minimum standards for most websites and are legally required in many jurisdictions under accessibility laws like ADA, Section 508, and EN 301 549.

What is the difference between WCAG AA and AAA?

AAA is a stricter standard: 7:1 for normal text and 4.5:1 for large text (compared to AA requirements of 4.5:1 and 3:1). AAA is recommended for content intended for elderly users or those with significant visual impairments. Most websites target AA compliance as the practical minimum.

How is the contrast ratio calculated?

The contrast ratio uses the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance is calculated from sRGB values using the formula: 0.2126R + 0.7152G + 0.0722B (after gamma correction). This weights green most heavily because human vision is most sensitive to green light.

What counts as large text in WCAG?

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.66px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because larger characters are inherently easier to read.

Can I use this for dark mode design?

Yes. Enter your dark mode background color (e.g., #1F2937) and your text color (e.g., #E5E7EB). The tool shows the same AA/AAA compliance ratings. Tip: pure white (#FFFFFF) on very dark backgrounds can cause halation (glowing effect) for some users — a slightly off-white text color like #F3F4F6 is often more comfortable while still passing AAA.

Back

Color Contrast Checker

WCAG 2.1 defines minimum contrast ratios for text readability: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), 4.5:1 for large text (AAA). The ratio is calculated as (L1 + 0.05) / (L2 + 0.05) using relative luminance. Black on white is 21:1 (maximum). Most accessibility laws require at least AA compliance.

Check WCAG 2.1 color contrast ratios between foreground and background colors. Shows AA and AAA compliance for normal and large text. Live preview with swap and preset colors.

Works OfflineDark ModeNo Ads

Colors

Foreground (text) color

Background color

Contrast Ratio

—: 1

Normal Text

(below 18pt / 14pt bold)

Fail

AA: 4.5:1 | AAA: 7:1

Large Text

(18pt+ / 14pt+ bold)

Fail

AA: 3:1 | AAA: 4.5:1

Preview

Large Text Preview

Normal text preview — The quick brown fox jumps over the lazy dog.

Small text preview — 0123456789 ABCDEF

Quick Presets

How to Use

1
Enter foreground color
Use the color picker or type a hex code like #1F2937 for the text color
2
Enter background color
Use the color picker or type a hex code like #FFFFFF for the background
3
Read the contrast ratio
The ratio (e.g., 14.72:1) shows how much contrast exists between the two colors
4
Check WCAG compliance
See AA and AAA pass/fail badges for both normal text and large text
5
Preview the result
The preview section shows your text and background colors together at different sizes

Frequently Asked Questions

What is WCAG color contrast?: WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability, especially for users with low vision or color blindness.
What contrast ratio do I need for WCAG AA?: WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). These are the minimum standards for most websites and are legally required in many jurisdictions under accessibility laws like ADA, Section 508, and EN 301 549.
What is the difference between WCAG AA and AAA?: AAA is a stricter standard: 7:1 for normal text and 4.5:1 for large text (compared to AA requirements of 4.5:1 and 3:1). AAA is recommended for content intended for elderly users or those with significant visual impairments. Most websites target AA compliance as the practical minimum.
How is the contrast ratio calculated?: The contrast ratio uses the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance is calculated from sRGB values using the formula: 0.2126R + 0.7152G + 0.0722B (after gamma correction). This weights green most heavily because human vision is most sensitive to green light.
What counts as large text in WCAG?: Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.66px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because larger characters are inherently easier to read.
Can I use this for dark mode design?: Yes. Enter your dark mode background color (e.g., #1F2937) and your text color (e.g., #E5E7EB). The tool shows the same AA/AAA compliance ratings. Tip: pure white (#FFFFFF) on very dark backgrounds can cause halation (glowing effect) for some users — a slightly off-white text color like #F3F4F6 is often more comfortable while still passing AAA.