Color Contrast Checker

What is a Color Contrast Checker?

This tool calculates the contrast ratio between a foreground (text) color and a background color, then checks whether the combination meets WCAG 2.0 accessibility guidelines at AA and AAA levels. It also simulates color blindness, suggests fixes for failing pairs, and exports code in multiple formats.

How to Check Color Contrast

Picking Colors

• Color A (foreground/text) and Color B (background) each have a hex input and a color picker.
• Shade Scale below each picker lets you fine-tune lightness. Click any shade to apply it instantly.
• Color Wheel adjusts the hue of Color A visually. The complementary color is shown below it — click to apply it as Color B.
• Swap reverses Color A and Color B.

What the Results Mean

Result	What it shows
Contrast Ratio	The calculated ratio (1:1 to 21:1). Higher is better.
A11y Score	An accessibility score out of 100 based on the contrast ratio.
WCAG AA / AAA	Pass or fail for Normal Text and Large Text at each level.
Preview	A live preview showing heading, body text, button, badge, input, and card with your colors.
Fix Suggestion	When contrast fails AA, a clickable card suggests the nearest passing shade with its ratio. Click to apply.

WCAG Thresholds

Level	Normal Text	Large Text
AA	4.5:1 minimum	3:1 minimum
AAA	7:1 minimum	4.5:1 minimum

• Normal text: below 18pt (or below 14pt bold)
• Large text: 18pt and above (or 14pt bold and above)

Extra Features

• Undo / Redo — step through your color changes.
• Share Result — copies a URL with the current colors embedded. Anyone opening it sees the same pair.
• Pin — save up to 8 color pairs for side-by-side comparison. Click a pinned pair to reload it.
• Brand Colors — 8 real-world brand palettes (Spotify, Slack, GitHub, etc.) with their contrast ratios. Click any to load it.
• A11y Check — simulates 4 types of color blindness (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) with the effective contrast ratio for each.
• Code Output — generates ready-to-paste code in CSS, Tailwind 4, Tailwind 3, Flutter, and React. Collapsible section, open by default.
• Randomize / Clear All — generate a random accessible color pair, or reset to defaults.

Good Examples

Example 1: Gray Text on White — a Common Mistake

Light gray text on a white background looks subtle but fails accessibility.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 — AA Fail
• Fix Suggestion recommends shade 600 (#595959) for 4.9:1 — AA Pass. Click to apply.

Example 2: Verifying a Brand Palette

Click Spotify in the Brand Colors section.

• Color A: #191414 (black), Color B: #1DB954 (green)
• Contrast Ratio: 4.9:1 — AA Pass, AAA Fail
• Pin this pair, then try LinkedIn (#ffffff on #0A66C2, 4.7:1) and compare.

Example 3: Designing a Dark Mode

Finding a readable text color for a dark navy background.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 — AA and AAA Pass
• Open A11y Check to confirm all 4 color blindness types also pass.

Example 4: Developer Workflow — Code Export

After finding a good pair, expand Code Output and select your framework:

• CSS: custom properties --fg and --bg
• Tailwind 4: arbitrary color values
• React: inline style object

Copy the snippet directly into your project.

Key Tips

• Start with Brand Colors. If you are checking an existing brand, click it from the preset list instead of typing hex values manually.
• Use Fix Suggestion. When contrast fails, do not guess — click the suggestion card to jump to the nearest passing shade automatically.
• Pin pairs to compare. When choosing between several color options, pin each one. You can reload and compare them side by side.
• Check color blindness too. A pair that passes WCAG can still be hard to distinguish for color-blind users. Open the A11y Check section to verify.
• Share your decision. Use Share Result to send the exact color pair URL to a designer or reviewer.

Formula

WCAG 2.0 defines contrast ratio using relative luminance:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variable	Meaning
$CR$	Contrast Ratio
$L_1$	Relative luminance of the lighter color
$L_2$	Relative luminance of the darker color

Relative luminance is calculated from sRGB values after linearization: $L = 0.2126R + 0.7152G + 0.0722B$

Frequently Asked Questions

Should I aim for AA or AAA?

AA is the minimum legal standard in most countries. AAA provides better readability but is harder to achieve across all design elements. A practical approach: AA for body text, AAA for critical information like warnings or errors.

Does passing WCAG guarantee accessibility for color-blind users?

WCAG contrast ratio checks luminance, not hue distinction. A pair can pass WCAG but look identical to someone with color blindness. Use the A11y Check section to verify, and always supplement color with icons or text labels.

What code formats does this tool support?

CSS custom properties, Tailwind CSS v3 and v4 (arbitrary values), Flutter Color() objects, and React inline styles. Select the format from the toggle in the Code Output section.

Can I save and share my color pairs?

Yes. Pin saves up to 8 pairs locally for comparison. Share Result copies a URL with the colors embedded — anyone opening it sees the exact same pair.