What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

How is contrast ratio calculated?

Contrast ratio is calculated using relative luminance values of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).

Why does color contrast matter?

Sufficient contrast ensures text is readable for people with visual impairments, color blindness, or those viewing screens in bright sunlight. It is a legal requirement in many jurisdictions for public websites.

Color Contrast Checker

Check foreground and background color contrast for WCAG 2.1 accessibility compliance. AA and AAA levels for normal and large text with fix suggestions.

Share:𝕏 f in ↗

Foreground (Text)

rgb(55, 65, 81)

Background

rgb(255, 255, 255)

Large Text Preview

This is how normal body text looks with these colors. The quick brown fox jumps over the lazy dog.

Smaller text (14px) for captions and fine print. Readability matters for all text sizes.

ButtonFilledLink Text

10.31:1

Excellent (4/4 checks pass)

AAMinimum Level

Normal text (4.5:1)✓ Pass

Large text (3:1)✓ Pass

UI components (3:1)✓ Pass

AAAEnhanced Level

Normal text (7:1)✓ Pass

Large text (4.5:1)✓ Pass

Quick Presets

About WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with visual impairments, including color blindness and low vision.

AA Normal: 4.5:1 contrast ratio (body text, 16px)
AA Large: 3:1 contrast ratio (18px+ bold or 24px+)
AAA Normal: 7:1 contrast ratio (enhanced readability)
AAA Large: 4.5:1 contrast ratio (enhanced, large text)

Most accessibility laws worldwide reference WCAG AA as the minimum standard. AAA is recommended but not strictly required.

Frequently Asked Questions

📖 Related Articles

📖How-To Guides-6 min read

Understanding Color Theory for Web Design: A Practical Guide

Learn color theory fundamentals for web design. Understand color harmony, contrast ratios, accessibility, and how to choose the perfect color palette.

🧠Explainers-6 min read

CSS Box Shadow: The Complete Design Guide

Master CSS box-shadow with practical examples. Subtle cards, neumorphism, layered shadows, glows, and performance tips for modern web design.

Related Tools

🎨

Color Blindness Checker

Test your color palette against 7 types of color vision deficiency. See how your chosen colors appear to people with protanopia, deuteranopia, tritanopia, and more.

👁️

Color Blindness Simulator

Upload images to see how they look through different types of color vision deficiency. Supports protanopia, deuteranopia, tritanopia, and achromatopsia with split-view comparison.

👁️

Color Blindness Simulator

Simulate how colors appear to people with color vision deficiency. Test designs for accessibility.

🎨

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats instantly.

🌈

Color Palette Generator

Generate harmonious color palettes. Analogous, complementary, triadic, monochromatic, and random schemes.

🌈

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients. Copy CSS code instantly.