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 |
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.
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.