Color Contrast Analyzer

Check and improve your website's accessibility

Contrast Ratio 21:1
WCAG AA (Normal Text) Pass Requires 4.5:1
WCAG AA (Large Text) Pass Requires 3:1
WCAG AAA (Normal Text) Pass Requires 7:1
WCAG AAA (Large Text) Pass Requires 4.5:1

Color Adjustments

Adjust colors to meet WCAG requirements

Foreground Adjustments

0%
0%

Background Adjustments

0%
0%

Suggested Accessible Colors

Preview Mode

Heading Text Sample

This is large text (18px+ or 14px+ bold). Large text requires a lower contrast ratio of 3:1 for AA and 4.5:1 for AAA compliance.

This is normal body text. Regular text requires a contrast ratio of at least 4.5:1 for WCAG AA and 7:1 for WCAG AAA compliance. Good contrast ensures readability for users with visual impairments.

This is small text (12px). Small text should maintain high contrast for readability.

This is a link example

Card Title

Card content with your selected colors.

Badge Tag

Welcome to Our Website

Experience the best with accessible design

Our Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Color Information

Foreground

HEX: #000000

RGB: rgb(0, 0, 0)

HSL: hsl(0, 0%, 0%)

Luminance: 0.000

Background

HEX: #FFFFFF

RGB: rgb(255, 255, 255)

HSL: hsl(0, 0%, 100%)

Luminance: 1.000