Color Contrast Checker
Check text and background contrast against WCAG AA and AAA, preview it, and get the closest Tailwind colors that pass. Free, in your browser.
1 · Colors
2 · Results
- Normal textUnder 24px, or under 19px bold✕ AA✕ AAA
- Large text24px and up, or 19px bold✓ AA✕ AAA
- UI componentsIcons, borders, focus rings✓ AA
Preview
Large heading text
Body text at 15px. Good contrast keeps your interface readable in sunlight, on cheap screens and for people with low vision.
Fix it
The closest colors that pass, keeping the same hue. Click one to use it.
Closest Tailwind colors that pass AA
Code
color: #7c7f87; background-color: #ffffff; /* contrast 4.01:1 */
About the Color Contrast Checker
Color Contrast Checker measures the contrast ratio between a text color and a background color and checks it against WCAG 2 for normal text, large text and UI components, at both AA and AAA.
When a pair fails, it suggests the closest passing colors that keep your hue, and lists the nearest Tailwind CSS colors that pass on your background.
When to use it
Use it when picking text, link, button and icon colors for a design system or a landing page, or when an accessibility audit flags low contrast.
How to use the Color Contrast Checker
- 1Enter a text color and a background color as hex, rgb(), hsl() or oklch(), pick them, or use the eyedropper to grab them from anywhere on screen (Chrome and Edge).
- 2Read the contrast ratio and the AA and AAA results for normal text, large text and UI components.
- 3Check the live preview of headings, body text, a button and an icon.
- 4If it fails, click a suggested fix or one of the closest Tailwind colors that pass, then copy the CSS or Tailwind classes.
Color Contrast Checker FAQ
- What contrast ratio do I need for WCAG AA?
- 4.5:1 for normal text, and 3:1 for large text (24px and up, or 19px bold) and for UI components like icons, borders and focus rings. AAA asks for 7:1 for normal text and 4.5:1 for large text.
- How is the contrast ratio calculated?
- It's the WCAG 2 formula: the relative luminance of the lighter color plus 0.05, divided by the luminance of the darker color plus 0.05. It ranges from 1:1 (same color) to 21:1 (black on white).
- How are the suggested fixes chosen?
- The tool keeps your color's hue and saturation and nudges only its lightness, in OKLCH, until it passes. That way the fix still looks like your brand color.
- What are the Tailwind suggestions?
- Every color in the Tailwind CSS v4 palette is tested against your background, and the eight that pass AA and look closest to your text color are listed, like slate-600 or blue-700.
- Can I pick a color from my website or design?
- Yes, in Chrome and Edge. Click the eyedropper next to a color field and click anywhere on your screen, including other windows like Figma. Safari and Firefox don't support it yet, so enter the hex code there.
- Is it free?
- Yes. It's free with no sign-up, and everything runs in your browser.
More free tools
All tools →CSS Gradient Generator
Linear, radial and conic gradients with up to five color stops.
Box Shadow Generator
Layered shadows with a live light and dark preview.
Glassmorphism Generator
Frosted glass cards with backdrop blur and saturation.
Border Radius Generator
Organic blob shapes by dragging, or simple rounded corners.
CSS clamp() Calculator
Fluid type that scales smoothly between two screen widths.
PX to REM Converter
Pixels to rem and back, with Tailwind classes.