Tiny Toolkit
Last updated: September 2025 | By the Tiny Toolkit Team

Color Contrast Checker

Test color contrast for web accessibility. Check WCAG 2.0 compliance instantly.

Choose Colors

Preview

Sample Text

The quick brown fox jumps over the lazy dog

You Might Also Like

Palette Generator

Generate harmonious color palettes. Create complementary, triadic, and analogous color schemes.

Color Picker

Pick colors and convert between HEX, RGB, and HSL formats instantly.

Percentage Calculator

Calculate percentages, increases, decreases with ease.

About Color Contrast

Why Color Accessibility Matters

According to a meta-analysis published in PubMed, approximately 8% of men and 0.5% of women have red-green color deficiency worldwide, representing over 300 million people globally. Proper color contrast ensures your content is accessible to all users, including those with color vision deficiencies.

Color contrast is critical for web accessibility. This tool helps you make sure your text is readable against its background by checking it against WCAG 2.0 standards.

What's WCAG?

WCAG (Web Content Accessibility Guidelines) is a set of recommendations for making web content more accessible. Color contrast ratios help make sure text is readable for people with visual impairments, including color blindness.

  • Level AA: Minimum contrast for most web content
  • Level AAA: Enhanced contrast for maximum accessibility
  • Normal Text: Text under 18pt (or 14pt bold)
  • Large Text: Text 18pt or larger (or 14pt bold or larger)

Contrast Ratio Requirements

Normal Text

  • AA Level: 4.5:1 minimum
  • AAA Level: 7:1 minimum
  • Applies to body text and small text
  • Most common requirement

Large Text (18pt+)

  • AA Level: 3:1 minimum
  • AAA Level: 4.5:1 minimum
  • Applies to headings and large text
  • Lower requirement due to size

Where You'll Use This

Web Design

  • Body text: #333333 on #FFFFFF = 12.6:1 (AAA pass, excellent readability)
  • Blue button: White text (#FFFFFF) on #1E3A8A = 8.6:1 (AAA compliant)
  • Failed example: #CCCCCC on #FFFFFF = 1.6:1 (needs #767676 or darker)
  • Link color: #0066CC on white = 5.9:1 (AA pass, good for accessibility)

Brand & Marketing

  • Logo color combinations
  • Marketing material readability
  • Presentation accessibility
  • Social media graphics

App Development

  • UI element visibility
  • Dark mode compatibility
  • Alert and error messages
  • Mobile app accessibility

Compliance

  • ADA compliance testing
  • Section 508 requirements
  • WCAG 2.0/2.1 validation
  • Accessibility audits

Why This Matters

  • Accessibility: Makes content readable for users with visual impairments
  • Legal Compliance: Meets ADA and WCAG legal requirements
  • Better UX: Everyone can read your content more easily
  • Professional Quality: Shows you care about details and inclusivity
  • SEO Benefits: Better accessibility can improve search rankings

Pro Tips

  • Aim for AA level as a minimum standard
  • Test your colors on actual devices and in different lighting
  • Use the swap button to test both light and dark themes
  • Consider users with color blindness - high contrast helps everyone
  • Document your color choices for design systems

Color Vision Deficiency Explained

Types of Color Blindness

Color blindness changes how people see colors. Red-green color blindness is most common, but there are other types too.

  • Deuteranomaly: Reduced green sensitivity (most common)
  • Protanomaly: Reduced red sensitivity
  • Tritanomaly: Reduced blue sensitivity (rare)
  • Achromatopsia: Complete color blindness (very rare)

Impact on Design

Good contrast makes sure everyone can read your content no matter how they perceive color. High contrast ratios work for everyone.

  • Don't rely solely on color to convey information
  • Use patterns, icons, or text labels as backups
  • High contrast benefits users with low vision
  • Test designs with color blindness simulators

How Contrast Ratios Are Calculated

The Math Behind Contrast

Contrast ratios use the relative luminance of colors, not just RGB values. The formula takes into account how human eyes see brightness differently across the color spectrum.

  • Relative luminance formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B
  • Human eyes are most sensitive to green light (71.52% weight)
  • Blue has the least impact on perceived brightness (7.22%)
  • Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 > L2
  • Values range from 1:1 (white on white) to 21:1 (black on white)

Accessibility Standards Evolution

WCAG Version History

Web Content Accessibility Guidelines have evolved to meet modern web design needs while staying backward compatible.

  • WCAG 1.0 (1999): First formal web accessibility guidelines
  • WCAG 2.0 (2008): Introduced contrast ratio requirements
  • WCAG 2.1 (2018): Added mobile and low vision enhancements
  • WCAG 2.2 (2023): Additional cognitive accessibility criteria
  • WCAG 3.0 (in development): Advanced perceptual contrast model

Legal Requirements Worldwide

United States
ADA (Americans with Disabilities Act) and Section 508 require accessible digital content for government and public websites.

  • Federal websites must meet WCAG 2.0 AA
  • Many states enforce accessibility laws
  • Private sector increasingly adopting standards

Europe & International
European Accessibility Act (EAA) and other international standards mandate digital accessibility.

  • EU: EN 301 549 standard (based on WCAG 2.1)
  • UK: Equality Act 2010
  • Canada: AODA (Accessibility for Ontarians)

Design Best Practices

Getting High Contrast

Smart color choices keep your design readable and good-looking. Here are proven techniques for accessible color schemes.

  • Use dark text (#000000 to #333333) on light backgrounds (#FFFFFF to #F5F5F5)
  • Or light text (#FFFFFF to #F0F0F0) on dark backgrounds (#000000 to #222222)
  • Avoid pure black on pure white (can cause eye strain)
  • Use slightly off-white (#FAFAFA) and off-black (#1A1A1A)
  • Test colored text with the 4.5:1 ratio requirement
  • Increase font weight if contrast is borderline

Dark Mode Considerations

Dark mode requires careful contrast management. What works in light mode may fail in dark mode and vice versa.

  • Pure white on pure black creates eye strain (halation effect)
  • Use #E0E0E0 to #F0F0F0 text on #121212 to #1E1E1E backgrounds
  • Reduce saturation of colored text in dark mode
  • Test both themes separately for compliance
  • Consider user preference (auto dark mode)

Common Contrast Failures

Failed Combinations

  • Light gray: #CCCCCC on #FFFFFF = 1.6:1 ratio (FAIL - too faint to read)
  • Yellow: #FFFF00 on #FFFFFF = 1.07:1 (FAIL - nearly invisible)
  • Pure blue: #0000FF on #000000 = 2.4:1 (FAIL - needs lighter blue)
  • Red on green: 3.2:1 ratio (FAIL for colorblind, indistinguishable)

Passing Alternatives

  • Dark gray: #595959 on #FFFFFF = 7:1 (AAA pass for normal text)
  • Gold: #AA8800 on #FFFFFF = 4.5:1 (AA pass, minimum acceptable)
  • Light blue: #5B9BD5 on #000000 = 7.2:1 (AAA pass, great contrast)
  • Black on white: #000000 on #FFFFFF = 21:1 (maximum possible contrast)

Advanced Accessibility Techniques

Non-Text Contrast (WCAG 2.1)

WCAG 2.1 introduced requirements for non-text elements like UI components, graphics, and interactive elements.

  • UI components: 3:1 minimum contrast with adjacent colors
  • Form inputs: Clear visual boundary against background
  • Focus indicators: Must have 3:1 contrast ratio
  • Graphical objects: Icons and meaningful graphics need 3:1
  • Exception: Logos and decorative elements exempt

Testing Beyond Automated Tools

Automated contrast checkers are important, but complete accessibility testing needs multiple approaches.

  • Test on real devices in various lighting conditions
  • Use browser DevTools accessibility audits
  • Simulate color blindness with browser extensions
  • Get feedback from users with disabilities
  • Test with screen readers (they announce color info)
  • Consider cognitive load and reading comprehension

Building Accessible Color Systems

Design systems should include pre-tested accessible color combinations to keep things consistent across products.

  • Document passing combinations for developers
  • Create semantic color tokens (primary, secondary, error, success)
  • Include both light and dark mode variants
  • Provide contrast ratios in design documentation
  • Use automated testing in CI/CD pipelines
  • Regular audits as brand colors evolve

Frequently Asked Questions

What is WCAG and why does it matter?

WCAG (Web Content Accessibility Guidelines) ensures websites are accessible to everyone, including people with visual impairments. Meeting WCAG standards is often legally required.

What contrast ratio do I need for accessibility?

For normal text, aim for 4.5:1 (AA level) or 7:1 (AAA level). For large text (18pt+), 3:1 (AA) or 4.5:1 (AAA) is acceptable. Our checker shows compliance for all levels.

Why does my color combination fail WCAG?

Colors with insufficient contrast make text hard to read, especially for people with low vision or color blindness. Adjust lightness/darkness to increase contrast ratio.

Can I test dark mode colors?

Yes! Use our swap button to quickly test both light and dark color schemes. Ensure both meet accessibility standards for your website or app.

What happens if I don't meet WCAG standards?

Non-compliant sites may face legal issues, lose users with accessibility needs, and have poorer SEO. Good contrast benefits all users, not just those with visual impairments.