Click2Tool

Contrast Checker

Make sure your text is readable against its background (WCAG)

How to use the Contrast Checker

  1. Enter your details in the fields above.
  2. See your results instantly - free, no signup.
  3. Copy, share or bookmark the result.

What Is the Contrast Checker?

Web accessibility isn't optional - it's essential. The Contrast Checker measures the contrast ratio between two colors and evaluates them against WCAG (Web Content Accessibility Guidelines) standards at both AA and AAA levels.

Poor contrast makes text unreadable for people with visual impairments and creates a bad experience for everyone. This tool ensures your color choices meet accessibility standards.

How It Works

Select or enter hex values for your foreground (text) color and background color. The tool instantly calculates the contrast ratio and shows pass/fail results for WCAG AA and AAA standards at both normal and large text sizes.

A live preview panel shows exactly how your text will look against the background, so you can make visual judgments alongside the numerical score. Adjust either color until you achieve the required contrast ratio.

Understanding WCAG Standards

  • WCAG AA Normal Text: Requires a contrast ratio of at least 4.5:1. This is the minimum standard for most web content.
  • WCAG AA Large Text: Requires 3:1 for text 18px+ or bold 14px+.
  • WCAG AAA Normal Text: Requires 7:1. This is the enhanced standard for maximum accessibility.
  • WCAG AAA Large Text: Requires 4.5:1. Enhanced standard for large text.

For most websites, meeting AA standards is the recommended minimum. AAA is ideal for text-heavy content like articles and documentation.

Accessibility Best Practices

  1. Always check contrast before finalizing your color scheme.
  2. Don't rely solely on color to convey information - use icons, patterns, or labels too.
  3. Test with both light and dark mode color schemes.
  4. Pay special attention to placeholder text, which is often too low-contrast.
  5. Use this tool alongside our Color Palette Generator to build accessible-first color systems.

Useful for

  • Verifying that your website color choices meet accessibility standards
  • Checking text readability before finalizing a design system
  • Ensuring dark mode and light mode both pass WCAG requirements
  • Validating color combinations for users with visual impairments

Who should use it

  • Web designers and developers building accessible interfaces
  • Brand designers checking if brand colors work for digital use
  • Product teams ensuring their apps meet accessibility compliance
  • Anyone working on websites that serve the general public

Common mistakes to avoid

  • Only checking one color combination and assuming the rest of the palette is fine
  • Forgetting to check placeholder text, links, and disabled state colors
  • Ignoring dark mode - light mode passes don't guarantee dark mode passes
  • Testing on a high-end monitor and forgetting how colors look on cheap screens

When not to use it

  • For decorative elements or non-text graphics where contrast is less critical
  • When checking print colors - this tool works with screen (hex) colors only
  • If you need comprehensive accessibility audits beyond color contrast

Frequently asked questions

What contrast ratio should I aim for?

At minimum, aim for 4.5:1 for normal text (WCAG AA). For important content like body text, aim for 7:1 (WCAG AAA). Large headings can pass with lower ratios.

Is accessibility legally required?

In many jurisdictions, yes. The ADA (US), EAA (EU), and similar laws in other countries increasingly require digital accessibility. WCAG AA is the most commonly referenced standard.

Do these standards apply to mobile apps?

Yes. WCAG standards apply to all digital interfaces - websites, mobile apps, and software. The contrast requirements are the same regardless of device.

Related Design Tools

See all Design Tools