Color Contrast Checker
Check WCAG contrast ratios for text and background colors, including common HEX, RGB, RGBA, and named CSS colors. Test readability for buttons, surfaces, and labels before you ship.
Enter valid HEX, RGB, or CSS color values.
How to Read the Result
WCAG contrast compares the visible foreground color against the visible background color. If you use RGBA transparency, the checker composites transparent colors over the page background before calculating the ratio.
Quick Ratios
| Use case | Minimum ratio | Notes |
|---|---|---|
| Normal text | 4.5:1 | WCAG AA |
| Large text | 3:1 | 18pt+ or 14pt bold |
| Enhanced text | 7:1 | WCAG AAA |
AA and AAA Result Details
| WCAG level | Normal text | Large text | Current result |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | Pending |
| AAA | 7:1 | 4.5:1 | Pending |
| UI components | 3:1 | 3:1 | Pending |
UI Contrast Scenarios to Check
The same color pair can pass in one component and fail in another because font size, weight, opacity, and background treatment change the visible result. Use these scenarios as a practical QA list before approving a palette for production.
Primary buttons
Check the button label against the default, hover, pressed, and disabled fills. A brand blue that works with white text in the default state may become too pale after a hover tint or opacity rule.
Form errors and helper text
Error red often appears as small text below an input. Test the red text on the real page background, not just on pure white, and do not rely on color alone to explain the error.
Badges and status pills
Tinted status backgrounds need a much darker text color than the tint itself. Green on pale green can be readable, but medium gray on the same surface often fails at small sizes.
Dashboard tables
Tables combine row hover states, selected rows, muted labels, and secondary numbers. Test the weakest text treatment first because that is where dense interfaces usually lose readability.
Common Failing Pairs
| Pair | Why it fails in practice | Better move |
|---|---|---|
| #9CA3AF on #FFFFFF | Common for placeholders and captions, but too weak for important text. | Use a darker neutral such as #4B5563 for readable secondary copy. |
| #60A5FA on #FFFFFF | A bright link blue can look active but fail for small text on white. | Darken the same hue for links, then reserve the lighter blue for backgrounds. |
| #F87171 on #FEF2F2 | Red on red-tint alert backgrounds is often too soft for error messages. | Use a deeper error text color and keep the tint as the background only. |
Practical Decision Rules
- For body copy, navigation labels, table cells, and form text, target at least 4.5:1.
- For icons, input borders, chart marks, and focus outlines, use 3:1 as the minimum non-text target.
- If a brand color fails with white text, keep the hue but move to a darker shade before changing the whole palette.
- When opacity is involved, test the final blended color pair instead of the raw RGBA value alone.
Frequently Asked Questions
What does WCAG AA mean?
WCAG AA is the baseline accessibility target for readable text. Normal text needs at least 4.5:1 contrast.
Can I use HEX values here?
Yes. Paste HEX, RGB, or RGBA values and the checker will calculate the contrast ratio.
How are transparent colors handled?
RGBA colors are composited before the ratio is calculated, because contrast depends on the final visible color, not just the raw color code.
What counts as large text?
Large text means at least 18pt regular text or 14pt bold text. It has lower contrast requirements than normal body text.
Can I share a contrast check?
Yes. Use the copy link button to share the current foreground and background colors without changing the canonical page URL.
Using This Tool Reliably
Color pair checks
Enter the exact foreground and background colors used in the interface, then review the measured ratio for normal text, large text, and UI states.
Contrast logic
The browser calculates relative luminance from the entered color pair and reports the contrast ratio against common WCAG readability thresholds.
Example workflow
Start with the real text and surface colors, test hover or disabled states separately, then adjust lightness until important content meets the needed threshold.
Common mistakes
Do not test colors in isolation, rely on opacity without rechecking the final blended color, or assume icons and small labels can use the same contrast as large headings.
Related Color Tools
Open the next tool for this color task.
Accessible Color Combinations for Readable UI
educationalUse accessible color combinations with measured contrast examples for buttons, text, surfaces, and status states.
Hex to RGB Converter - Free Online Tool
converterTurn HEX colors into RGB values for CSS and design tools.
Color Palette Generator - Create Harmonic Palettes
generatorGenerate matching color palettes from one base color.
CSS Gradient Generator - Linear & Radial
generatorBuild a linear or radial gradient and copy the CSS.