Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards for text readability.

Colors

Foreground (Text) Color

Background Color

Text Size

Large Text (18pt+ or 14pt+ bold)

WCAG has lower requirements for large text

Contrast Ratio

21.00:1

AAA

1:14.5:1 (AA)7:1 (AAA)21:1

WCAG Compliance

AA Normal

Ratio ≥ 4.5:1

Passes for normal text

AA Large

Ratio ≥ 3:1

Passes for large text

AAA Normal

Ratio ≥ 7:1

Passes for normal text

AAA Large

Ratio ≥ 4.5:1

Passes for large text

Live Preview

Sample Heading

This is sample text to preview how your color combination will look. The quick brown fox jumps over the lazy dog.

Small text with reduced opacity

Large Text (24px)

Normal Text (16px)

Color Values

Foreground

#000000

Background

#ffffff

CSS Output

color: #000000; background-color: #ffffff;

Why Contrast Matters

Low contrast text is hard to read for everyone, and impossible for some users with visual impairments. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure text is readable.

This checker calculates the contrast ratio between your foreground and background colors, then tells you if they pass WCAG AA and AAA standards for normal and large text.

WCAG Requirements

Level AA (Minimum)

Normal text:4.5:1

Large text (18pt+):3:1

Required for most websites.

Level AAA (Enhanced)

Normal text:7:1

Large text (18pt+):4.5:1

Best practice for public content.

Tips for Better Contrast

Dark text on light backgrounds

Safest choice for readability. Near-black (#1a1a1a) on near-white (#fafafa) passes all requirements with room to spare.

Avoid pure black on pure white

#000 on #fff has maximum contrast but causes eye strain. Use #1a1a1a or #333 for reduced glare while still passing AAA.

Test in grayscale

If your design works in black and white, it'll work for colorblind users. Remove color and check if text is still readable.

Don't rely on color alone

Links should have underlines or other indicators. Error states need icons or text, not just red coloring.

Common Questions

What counts as "large text"?

18pt (24px) or larger, or 14pt (18.5px) bold. Headings usually qualify, body text doesn't. UI components like buttons have their own considerations.

Do disabled elements need contrast?

WCAG 2.1 doesn't require contrast for disabled elements, but WCAG 2.2 adds requirements. Best practice is to ensure they're still readable.

What about logos and incidental text?

Logos, decorative text, and inactive UI components are exempt. But if the text conveys information, it should be readable.

Other Free Tools

Search tools

Color Contrast Checker

Sample Heading

Why Contrast Matters

WCAG Requirements

Tips for Better Contrast

Dark text on light backgrounds

Avoid pure black on pure white

Test in grayscale

Don't rely on color alone

Common Questions

What counts as "large text"?

Do disabled elements need contrast?

What about logos and incidental text?

Other Free Tools

CSS Color Converter

CSS Color Palette Generator

Tint & Shade Generator

CSS Gradient Generator

CSS Mesh Gradient Generator

Dark Mode CSS Generator

Google Fonts Pairing Tool

Letter Spacing & Line Height Visualizer

CSS Filter Generator

CSS Button Generator

CSS Border Radius Generator

CSS Box Shadow Generator

Glassmorphism Generator

Neumorphism Generator

CSS Pattern Generator

CSS Background Noise Generator

CSS Text Shadow Generator

CSS Shape Generator

CSS Clip Path Maker

CSS Transition Previewer

Cubic Bezier Editor

CSS Animation Generator

CSS Loader Generator

CSS Grid Generator

Flexbox Playground

CSS Spacing Scale Generator

Fluid Space Calculator

Fluid Typography Calculator

PX to REM Converter

Viewport Unit Converter