Practical example
Test normal body text, placeholder text, and the hover state separately because each often uses a different foreground color.
Color Contrast Checker
Contrast ratio
–
Large heading text (24px)
Normal body text at 14-16px. Most interface copy, labels, and paragraphs fall into this category, so it has the strictest contrast requirements.
About the Color Contrast Checker
Contrast ratio measures how distinguishable text is from its background, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 / 4.5:1 at level AAA.
This checker computes the ratio from relative luminance exactly as defined by WCAG 2.x, shows pass/fail results for each level, and previews your colors on real text. HEX, RGB, and HSL notations are accepted.
How to check color contrast
- Enter the text color as HEX, RGB, or HSL, or use the color picker.
- Enter the background color the text sits on.
- Read the contrast ratio and the AA/AAA pass-fail results.
- Adjust the colors until every required check passes, then copy the report.
Accessibility tips
- Large text means at least 24px regular or about 18.66px bold — only then does the 3:1 threshold apply.
- Check hover, focus, disabled, and placeholder states — they often use lighter, failing shades.
- UI components and icons need at least 3:1 against adjacent colors (WCAG 1.4.11).
- Test dark mode separately; inverted palettes change every ratio.
Contrast checks before shipping a color palette
A passing ratio is the baseline, not the finish line. Review how the pair behaves in real UI states and conditions.
Test both themes
A pair that passes on a light background can fail after dark-mode inversion. Check every theme you ship.
Check interactive states
Hover, focus, disabled, and visited states often use lighter shades that silently fall below 4.5:1.
Do not rely on color alone
Pair color with icons, underlines, or text labels so information survives color-vision deficiencies.
Verify large-text assumptions
The relaxed 3:1 threshold only applies from 24px, or 18.66px bold. Confirm the rendered size, not the design token.
A practical example, an edge case, and a maintainer note
Edge case
A translucent foreground has different effective contrast over every background underneath it, so the hex value alone is insufficient.
Maintainer note
I use the numeric ratio as a gate, then verify focus, disabled, dark-mode, and high-contrast states in the actual component.
Related tools
You may also find these tools useful.
Color Converter
Convert HEX, RGB, RGBA, and HSL colors instantly in your browser.
Developer Misc
›
CSS Gradient Generator
Generate, parse, and preview CSS linear and radial gradients online. Free gradient generator for developers and designers.
Developer Misc
›
CSS Text Shadow Generator
Create, preview, parse, and copy CSS text-shadow values with multiple shadow layers.
Developer Misc
›
CSS Box Shadow Generator / Parser
Generate, parse, and preview CSS box-shadow values online. Adjust offset, blur, spread, color, and inset.
Developer Misc
›
Color contrast FAQ
What contrast ratio do I need for normal text?
At least 4.5:1 for WCAG AA and 7:1 for AAA. Normal means smaller than 24px regular or 18.66px bold.
What counts as large text?
Text at 24px and up, or bold text at about 18.66px and up. Large text needs 3:1 (AA) or 4.5:1 (AAA).
Which color formats can I enter?
HEX like #1f2937, short HEX, rgb()/rgba(), and hsl()/hsla(). Alpha channels are ignored for ratio math.
How is the ratio calculated?
From the WCAG relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.