Color Contrast Checker

Make your text readable for everyone

Check the contrast ratio between a text and background color against WCAG AA and AAA standards, with a live preview and hex or RGB input.

Low-contrast text is one of the most common accessibility failures. This checker computes the exact contrast ratio between your text and background colors using the official WCAG relative-luminance formula, then tells you whether it passes AA (4.5:1 for normal text, 3:1 for large) and the stricter AAA (7:1 and 4.5:1). A live preview shows real text on your chosen colors.

Features

WCAG AA & AAA pass/fail results
Live contrast ratio calculation
Hex and RGB input with color pickers
Live text preview on your colors
Normal and large text thresholds
Runs locally in your browser

How to use Color Contrast Checker

1
Choose the text color
Pick or type the foreground color.
2
Choose the background
Pick or type the background color.
3
Read the ratio
See the contrast ratio and AA/AAA results.
4
Adjust
Tweak the colors until they pass.

Common use cases

Verify UI text meets WCAG accessibility
Check button and link contrast
Audit a brand color palette
Fix low-contrast marketing copy

Detailed guide

Enter colors any way you like

Use the color pickers or type hex codes and rgb() values directly, the tool parses both. As you adjust either color, the ratio and pass/fail badges update instantly, so you can nudge a shade until it complies. Everything runs locally, making it a fast companion while designing UI, themes and marketing pages.

What the WCAG contrast levels mean

WCAG 2 measures contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). Level AA, the usual legal and industry baseline, requires at least 4.5:1 for normal text and 3:1 for large text, meaning 24px regular or about 18.66px bold and above. Level AAA raises those to 7:1 and 4.5:1. User interface parts such as input borders, focus rings and icons that carry meaning need at least 3:1 against their surroundings. The ratio is calculated from the relative luminance of each colour, so two colours that look different can still fail if they're equally bright, which is common with red on green.

Fixing a failing colour pair

When a pair fails, change lightness rather than hue: darken the text or lighten the background in small steps until the ratio passes, and the colour will still feel like your brand. Brand colours in the mid-tones, such as a medium orange or teal, often can't carry white text at AA. In that case use the brand colour for large headings, borders or backgrounds and set body text in a darker shade. Test placeholder text and disabled states too, since they are often too faint. Remember the ratio doesn't account for thin fonts or text on images, so leave extra margin in those cases.

Frequently asked questions

What contrast ratio do I need to pass WCAG?

For AA, normal text needs 4.5:1 and large text 3:1. For the stricter AAA, normal text needs 7:1 and large text 4.5:1. Large text is roughly 18pt, or 14pt bold.

How is the contrast ratio calculated?

It uses the WCAG relative-luminance formula for both colors, then divides the lighter luminance (plus 0.05) by the darker (plus 0.05), giving a value from 1:1 to 21:1.

Can I enter RGB as well as hex?

Yes: type hex codes like #1e293b or rgb(30, 41, 59), or use the color pickers. Both formats are parsed instantly.

Is it free?

Yes, completely free with no signup, running entirely in your browser.

How do I check if two colors are accessible together?

Enter the text and background hex values; the checker computes the contrast ratio and shows whether it passes WCAG AA and AAA for normal and large text.

Why does color contrast matter for accessibility?

Low contrast makes text hard to read for people with low vision or color blindness. Meeting the WCAG ratios keeps content legible for everyone and is a common accessibility and SEO requirement.

Make your text readable for everyone

Features

How to use Color Contrast Checker

Choose the text color

Choose the background

Read the ratio

Adjust

Common use cases