Color Contrast Checker
Large Text — 18pt / 24px
Click or tap to edit this text. Use this area to test contrast for headings, titles, and prominent UI elements. Large text requires lower contrast ratios under WCAG guidelines but should remain clearly readable.
Normal Text — 16px. This paragraph simulates body text commonly used in interfaces and content layouts. Adjust colors to verify whether the combination meets WCAG AA or AAA requirements for normal text.
Contrast Ratio
11.50:1
Passes all WCAG levels for all text sizes
Pass
AA Normal Text
≥ 4.5:1
Passes WCAG AA for normal text
Pass
AA Large Text
≥ 3:1
Passes WCAG AA for large text
Pass
AAA Normal Text
≥ 7:1
Passes WCAG AAA for normal text
Pass
AAA Large Text
≥ 4.5:1
Passes WCAG AAA for large text
AAA Pass
Passes all WCAG levels for all text sizes
11.50:1
| RGB | 255, 255, 255 | |
| HSL | 0°, 0%, 100% |
| RGB | 30, 58, 95 | |
| HSL | 214°, 52%, 25% |
WCAG and ADA Contrast Requirements
WCAG 2.1 defines minimum contrast ratios to ensure readable text for users with visual impairments. Normal text requires a contrast ratio of at least 4.5:1 for AA compliance, while large text requires 3:1. AAA standards apply higher thresholds for enhanced accessibility.
This contrast checker helps evaluate color combinations commonly reviewed during ADA accessibility audits for websites, applications, and digital products.
| Level | Normal Text | Large Text |
|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4.5:1 |
Large text is defined as 18pt (24px) and above, or 14pt (approximately 18.66px) bold and above. Everything smaller is considered normal text.
Supported Color Inputs
The tool supports HEX, RGB, and HSL color values for both foreground and background colors. Numeric inputs allow precise control over individual channels, while live previews reflect changes instantly. Contrast results are shown as numeric ratios with clear pass or fail indicators for normal and large text sizes.
AAA Pass
Passes all WCAG levels for all text sizes
11.50:1
| RGB | 255, 255, 255 | |
| HSL | 0°, 0%, 100% |
| RGB | 30, 58, 95 | |
| HSL | 214°, 52%, 25% |
How the Color Contrast Checker Works
Use the contrast checker above to verify that your text and background color combinations meet WCAG 2.1 accessibility standards. Enter colors using HEX codes, RGB values, or HSL values, and the tool instantly calculates the contrast ratio and shows pass or fail results for both AA and AAA compliance levels.
The editable preview area lets you test your own content at different text sizes to see exactly how the color combination looks in practice. Results update in real time as you adjust either color, making it easy to find accessible combinations that work for your design.
Visualize Before You Decide
Preview how paint colors and design ideas may look in a real space before committing. Visual comparisons can help narrow options and reduce costly mistakes.
Refine Your Choice with Free Tools
Use technical color tools to narrow options before visualizing your final design.
Color Matcher
Match paint colors across brands by name, photo, or code.
Global Color Database
Explore 12,500+ paint colors with technical values.
Color Visualizer
Preview paint colors on room scenes or your own photos.
Match From Photo
Extract colors from photos to refine your choices.
Compare Colors
Compare undertones and lightness side by side.
RGB to Paint
Convert digital colors into paint options.
HEX to Paint
Match web colors to real paints.
Image Color Picker
Pick colors from any image with a magnifier.
Color Wheel
Explore color harmonies interactively.
Color Chart
Browse 140+ named CSS colors.
Palette Generator
Generate harmonious color schemes.
Palette from Image
Extract palettes from any photo.
Gradient Generator
Create CSS gradients visually.
Contrast Checker
Check WCAG accessibility compliance.