What is a good contrast ratio for accessibility?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced accessibility (AAA level). Large text (18pt or 14pt bold) has lower requirements: 3:1 for AA and 4.5:1 for AAA.

How do I check if my colors meet WCAG guidelines?

Enter your foreground (text) and background colors using the color pickers or by typing HEX codes. The tool instantly calculates the contrast ratio and shows whether your combination passes AA and AAA levels for both normal and large text.

What is the difference between WCAG AA and AAA?

WCAG AA is the minimum accessibility standard required by most regulations. It requires 4.5:1 contrast for normal text. WCAG AAA is the enhanced standard with stricter requirements (7:1 for normal text), providing better readability for users with vision impairments.

How can I fix low contrast colors?

Our tool provides color suggestions that maintain your color palette while meeting accessibility requirements. You can darken light colors or lighten dark colors, or use the suggested alternatives shown below the contrast results.

Color Contrast Checker

Professional WCAG accessibility contrast checker. Test color combinations for AA/AAA compliance, preview text readability, and get color suggestions to meet accessibility guidelines.

Choose Your Colors

Enter the text color and background color you want to test for accessibility compliance.

Text Color

The color of your text/foreground

Swap

Background Color

The color behind your text

Random

Contrast Ratio 21.00:1 Excellent Contrast

AA Normal Text 4.5:1 required Pass

AAA Normal Text 7:1 required Pass

AA Large Text 3:1 required Pass

AAA Large Text 4.5:1 required Pass

Live Preview

Simulate:

Heading Text (24px Bold)

This is regular body text at 16px. Good contrast ensures that all users, including those with visual impairments, can read your content comfortably.

This is small text at 12px - harder to read with low contrast.

This is a link - should also be readable

Tip: Try using the vision simulation above to see how your color combination looks to people with color blindness. About 8% of men and 0.5% of women have some form of color vision deficiency.

What is WCAG?

WCAG (Web Content Accessibility Guidelines) sets standards for making web content accessible. Level AA is the standard requirement, while AAA is the highest level of accessibility.

Requirements

Normal Text AA 4.5:1

Normal Text AAA 7:1

Large Text AA 3:1

Large Text AAA 4.5:1

UI Components 3:1

Color Information

Text Color #000000

Text RGB rgb(0, 0, 0)

Background Color #FFFFFF

Background RGB rgb(255, 255, 255)

Text Luminance 0.000

BG Luminance 1.000

Need help fixing low contrast? Below are color alternatives that maintain your brand look while meeting WCAG accessibility standards.

Click any color swatch to instantly apply it and see the result.

Adjust Text Color

Darker options:

Lighter options:

Adjust Background Color

Lighter options:

Darker options:

CSS Variables

:root {
  --text-color: #000000;
  --bg-color: #FFFFFF;
  /* Contrast Ratio: 21:1 (AAA) */
}

JSON Data

{
  "foreground": "#000000",
  "background": "#FFFFFF",
  "contrastRatio": 21,
  "compliance": {
    "normalAA": true,
    "normalAAA": true
  }
}

Quick Presets Click any preset to test it instantly

WCAG Contrast Requirements

Normal Text AA Minimum 4.5:1 contrast ratio

Normal Text AAA Minimum 7:1 contrast ratio

Large Text AA Minimum 3:1 (18pt+ or 14pt bold)

Large Text AAA Minimum 4.5:1 (18pt+ or 14pt bold)

UI Components Minimum 3:1 for non-text elements

Keyboard Shortcuts

S Swap colors

R Random colors

C Copy ratio

Esc Reset colors

Why Color Contrast Matters

Color contrast is fundamental to web accessibility. Adequate contrast between text and background colors ensures content is readable for everyone, including users with visual impairments, color blindness, or those viewing content in challenging lighting conditions.

The Web Content Accessibility Guidelines (WCAG) 2.1 establish specific contrast ratio requirements that websites must meet to be considered accessible. Compliance is not just good practice—it's often a legal requirement under laws like the ADA, Section 508, and EN 301 549.

How to Use the Color Contrast Checker

Enter Your Colors

Use the color pickers or type HEX codes for your foreground (text) and background colors. The preview updates in real-time.

Check Compliance

View the contrast ratio and compliance badges. Green indicates passing, red indicates failing WCAG requirements.

Get Suggestions

If your colors don't meet requirements, check the Suggestions tab for accessible alternatives that maintain your color palette.

Export Results

Export your accessible color combination as CSS variables, JSON data, or download a full accessibility report.

Key Features

WCAG 2.1 Compliance

Test against the latest accessibility standards with AA and AAA level checking.

Live Preview

See exactly how your text will appear with real-time preview including different text sizes.

Smart Suggestions

Get color alternatives that meet accessibility requirements while staying close to your original palette.

Vision Simulation

Preview how your colors appear to users with different types of color blindness.

Export Reports

Download accessibility reports or export color data in CSS and JSON formats.

Instant Results

All calculations happen instantly in your browser—no server processing needed.