WCAG Color Contrast Checker

Test foreground and background color combinations for WCAG 2.1 accessibility compliance. See AA and AAA pass/fail results, preview text at multiple sizes, simulate color blindness, and get instant fix suggestions.

RGB: 51, 51, 51HSL: 0, 0%, 20%
RGB: 255, 255, 255HSL: 0, 0%, 100%

Accepts HEX (#333), RGB (rgb(51,51,51)), or HSL (hsl(0,0%,20%))

Contrast Ratio
12.63:1
Excellent
1:13:14.5:17:121:1

Live Preview

Normal text (16px) — The quick brown fox jumps over the lazy dog. This is how your body text will look to users on your website.

Large text (24px bold) — Heading Preview

Icon samples
Link text sample

WCAG Compliance

LevelNormal TextLarge TextUI Components
AA (minimum)✓ Pass
4.5:1
✓ Pass
3:1
✓ Pass
3:1
AAA (enhanced)✓ Pass
7:1
✓ Pass
4.5:1
N/A

Color Blindness Preview

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Here is how your color combination appears under common types.

Sample Aa

The quick fox

Deuteranopia

Red-green (most common)

12.6:1

Sample Aa

The quick fox

Protanopia

Red-green

12.6:1

Sample Aa

The quick fox

Tritanopia

Blue-yellow

12.6:1

Pro Tips

  • Test all states: Check hover, focus, active, and disabled states. A color that passes in its default state may fail in hover.
  • Don't rely on color alone: WCAG 1.4.1 says color should not be the only way to convey information. Use icons, underlines, or patterns alongside color.
  • Placeholder text matters: Form input placeholders are often light gray. Test them against your input backgrounds.
  • Large text threshold: “Large text” means 18px (24px CSS) regular weight or 14px (18.66px CSS) bold. Larger text gets a lower contrast requirement because it's inherently easier to read.
  • Test with real content: Don't just test solid colors. Your actual content may have gradients, images, or semi-transparent overlays that reduce effective contrast.

100% Private

All calculations happen in your browser. No colors or data are sent to any server.

Related Tools

Color Picker

Pick and convert colors in HEX, RGB, HSL

Color Palette Generator

Generate harmonious color palettes

Color Converter

Convert between HEX, RGB, HSL, CMYK

CSS Gradient Generator

Create beautiful CSS gradients

What Is WCAG Color Contrast?

The Web Content Accessibility Guidelines (WCAG) are the international standard for making web content accessible to people with disabilities. WCAG 2.1 defines specific minimum contrast ratios between text and background colors to ensure readability. These ratios are calculated using the relative luminance of two colors, which accounts for the human eye's different sensitivity to red, green, and blue light. A contrast ratio of 1:1 means two identical colors (no contrast), while 21:1 is the maximum possible contrast (pure black on pure white). These standards are referenced by accessibility laws worldwide, including the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and the European EN 301 549.

AA vs AAA Compliance Explained

WCAG defines two compliance levels. Level AA is the minimum standard most organizations must meet: 4.5:1 for normal text (under 18pt or under 14pt bold), and 3:1 for large text and user interface components like form borders and icons. Level AAA is the enhanced standard: 7:1 for normal text and 4.5:1 for large text. While AAA is not required by most laws, it is strongly recommended for government websites, healthcare applications, and any content targeting users with visual impairments. Achieving AAA does not mean your colors must be boring — with careful palette selection, vibrant designs can meet the highest standards.

Why Accessibility Matters

Approximately 1 in 12 men (8%) and 1 in 200 women have some form of color vision deficiency. Beyond color blindness, low contrast text is harder to read for older adults (the lens yellows with age), users in bright outdoor environments, and anyone with a low-quality or poorly calibrated display. 96% of the top 1 million websites have detectable accessibility errors, with low contrast text being the most common issue (found on 83% of home pages). Making your content accessible is not only a legal requirement — it improves usability for all users, can boost SEO (search engines favor accessible sites), and expands your potential audience.

How Contrast Ratio Is Calculated

The WCAG contrast ratio formula has three steps. First, each sRGB color channel (0-255) is converted to linear light using gamma correction: values below 0.04045 are divided by 12.92, while higher values use the formula ((C + 0.055) / 1.055)^2.4. Second, the relative luminance is calculated as L = 0.2126R + 0.7152G + 0.0722B, where the weights reflect human visual sensitivity (most sensitive to green, then red, least to blue). Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. The 0.05 offset prevents division by zero and accounts for ambient light.

Frequently Asked Questions

What is WCAG color contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability. Approximately 1 in 12 men and 1 in 200 women have color vision deficiency, and low contrast text is harder to read for everyone in bright sunlight, on low-quality displays, or with aging eyes. Meeting WCAG contrast standards is legally required under the ADA, Section 508, and the European EN 301 549.

What is the difference between WCAG AA and AAA?

WCAG Level AA is the minimum accessibility standard, requiring a contrast ratio of 4.5:1 for normal text, and 3:1 for large text (18pt or 14pt bold) and UI components. Level AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. Most organizations aim for AA compliance as a baseline, while AAA is recommended for content targeting users with visual impairments.

How is the contrast ratio calculated?

The contrast ratio uses the WCAG relative luminance formula. Each sRGB color channel is linearized using gamma correction, then weighted (R: 0.2126, G: 0.7152, B: 0.0722) to compute luminance. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. This produces a value from 1:1 (identical) to 21:1 (black on white).

What color formats does this tool support?

This tool accepts HEX codes (3 or 6 digits, with or without #), RGB values in the format rgb(R, G, B), and HSL values in the format hsl(H, S%, L%). All formats are auto-converted and displayed simultaneously. You can also use the visual color picker to select colors.

What if my colors fail the contrast check?

When your color combination fails WCAG AA, the tool automatically suggests 3-4 alternative foreground colors that maintain a similar hue but pass the 4.5:1 threshold. Click any suggestion to apply it instantly. You can also try the swap button to test the reverse combination.

What are the color blindness simulations?

The tool simulates three common types of color vision deficiency: Deuteranopia (red-green, affecting ~6% of males), Protanopia (red-green, ~1% of males), and Tritanopia (blue-yellow, rare). These simulations help you verify that your color combination remains distinguishable for users with these conditions.

Related Tools

Color Picker

Pick and convert colors in HEX, RGB, HSL, CMYK

Color Palette Generator

Generate harmonious color palettes

Color Converter

Convert between all color formats

CSS Gradient Generator

Create beautiful CSS gradients

Last updated: March 2026