What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text to be readable. AA requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA requires 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

It uses relative luminance (perceived brightness) of each color. The formula is: (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker colors. This follows the WCAG 2.1 specification.

What is the difference between AA and AAA?

AA is the minimum for accessibility compliance. AAA is enhanced and stricter — it requires higher contrast ratios (7:1 vs 4.5:1 for normal text). Most sites target AA. AAA is preferred for sites with older users or low-vision audiences.

Can I pick colors from my screen?

Yes. Click the eyedropper icon in the color picker windows to sample any pixel from your screen using the EyeDropper API (Chrome/Edge). Useful for checking existing designs or competitor sites.

Contrast Checker | WCAG 2.1 Accessibility | Free Online Tool

Text Color

#FFFFFF

Background Color

#000000

Large Text (18pt+)

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

Contrast Ratio

21:1

AA Normal

4.5:1

—

AA Large

3:1

—

AAA Normal

7:1

—

AAA Large

4.5:1

—

Understanding WCAG Contrast

The Web Content Accessibility Guidelines define contrast requirements to ensure text is readable for all users.

AA - Minimum Compliance

The legal minimum for web accessibility in most jurisdictions. Requires 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ bold or 24pt+ regular). Most commercial websites target this level.

AAA - Enhanced Compliance

The gold standard for accessibility. Requires 7:1 for normal text and 4.5:1 for large text. Recommended for government sites, healthcare, education, and sites serving older or low-vision users.

Large Text Definition

WCAG defines large text as 18pt (24px) or larger when bold, or 24pt (32px) or larger regardless of weight. Large text gets relaxed ratio requirements because it's inherently more readable.

How It's Calculated

Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's relative luminance. Uses sRGB gamma correction. The scale is logarithmic. A ratio of 3:1 means the lighter is 3x brighter than the darker.

Related Color Tools

More free color tools for designers and developers.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK with bidirectional live editing.

Color Picker

Pick colors from your screen with the draggable picker and eyedropper tool.

Palette From Image

Extract a color palette from any image to build accessible color schemes.

FAQ

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) 2.1 defines the minimum contrast ratios needed for text to be readable by people with visual impairments. AA requires 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. These are the legal standards referenced by ADA, Section 508, and EU accessibility directives.

The checker uses the WCAG 2.1 relative luminance formula. First, each color's sRGB values are linearized (gamma correction). Then relative luminance is computed: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The ratio is: (Lighter + 0.05) / (Darker + 0.05). This gives a value from 1:1 (identical) to 21:1 (pure white on pure black).

WCAG defines large text as 18pt (24px) or larger when bold, or 24pt (32px) or larger regardless of font weight. Large text has relaxed ratio requirements (3:1 for AA, 4.5:1 for AAA) because larger text is inherently easier to read even at lower contrast.

Yes. Click either the Text Color or Background Color trigger to open the draggable color picker. Use the eyedropper icon in the picker title bar to sample any pixel from any application or website. This is perfect for checking existing designs against WCAG standards.

Yes, completely free with no limits, no sign-up, and no ads. All calculations run in your browser. Use it for accessibility audits, design reviews, or any project requiring WCAG compliance checks.