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.
Color Contrast Checker FAQ
My brand color fails AA. Do I have to change it?
No. Keep the original for large headings, since 3:1 is enough for 18pt+ or 14pt bold text. Logos are exempt from contrast rules, and decorative elements do not need a text contrast pass. Darken a second text variant of the same hue until it hits 4.5:1 for body copy, then keep two tokens: brand color and brand-text color.
Do placeholder text and disabled buttons need to pass?
No for disabled controls, yes for placeholder text. Disabled controls are exempt under WCAG. Users read placeholder text as real content, so hold it to 4.5:1. Light gray placeholders around #999 on white sit near 2.8:1 and fail.
What contrast do charts and icons need?
Charts and icons need 3:1 contrast against adjacent colors under WCAG 2.1 success criterion 1.4.11 for non-text contrast. That covers icons, chart lines, form input borders, and focus indicators. Test each pair in this checker like a large-text pair. 3:1 is the bar.
Does dark mode need its own contrast check?
Yes, test the dark pair separately. The numbers do not carry over when colors flip: a gray that just clears 4.5:1 on white can slide to about 4:1 once it sits on near-black. Pure white on pure black scores 21:1 and still reads badly, because the glare makes letters smear for a lot of people. Something like #E6E6E6 on #121212 lands near 15:1 and is easier on the eyes.
How do I check text sitting on a photo or a gradient?
Test the worst spot, not the average. Grab the hex of the lightest patch the text crosses using the color picker on this site, drop it into the background field here, and see whether the pair still clears 4.5:1. If it fails, put a scrim behind the text, meaning a semi-transparent dark layer over the image, then sample the color again with the scrim in place. That blended color is what the eye actually gets.
Is AA enough, or should I aim for AAA?
AA is the working standard. Accessibility audits and legal complaints reference it, and 4.5:1 on body text keeps almost everyone reading comfortably. AAA at 7:1 earns its keep where people read for minutes at a stretch, like documentation or a long article. Holding a whole interface to AAA usually collapses the palette down to near-black on white, so spend it where the reading happens.
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.