No Login Data Private Local Save

Color Contrast Ratio Tester - Online WCAG AA/AAA Check

17
0
0
0

🎹 Color Contrast Ratio Tester

Check your color combinations against WCAG 2.1 AA/AAA accessibility standards in real-time.

HEX
RGB: 51, 51, 51 HSL: 0°, 0%, 20%
HEX
RGB: 255, 255, 255 HSL: 0°, 0%, 100%
Quick Colors:
Click a swatch, then use Shift+Click for background.

Large Heading Text

This is normal body text for readability testing. The quick brown fox jumps over the lazy dog.

Small caption text ‱ 12px equivalent ‱ Secondary information

Button Outline
12.63
:1 Contrast Ratio
PoorModerateGoodExcellent
AA Normal
✅ Pass
≄ 4.5:1
AA Large
✅ Pass
≄ 3:1
AAA Normal
✅ Pass
≄ 7:1
AAA Large
✅ Pass
≄ 4.5:1
UI Components: Pass (≄3:1)
Preset Combinations
About WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable for users with visual impairments, including those with low vision or color blindness.

  • AA Normal Text: 4.5:1 minimum (text under 18pt/24px regular, or under 14pt/18.7px bold)
  • AA Large Text: 3:1 minimum (text at least 18pt/24px regular, or 14pt/18.7px bold)
  • AAA Normal Text: 7:1 minimum (enhanced contrast for higher accessibility)
  • AAA Large Text: 4.5:1 minimum
  • UI Components: 3:1 minimum for interactive elements, icons, and graphical objects (AA)
How It's Calculated

Contrast ratio is derived from the relative luminance of each color, following the formula defined in WCAG 2.1:

  1. Convert HEX to sRGB (0-255) and normalize to 0-1.
  2. Apply gamma correction: if value ≀ 0.03928, divide by 12.92; otherwise, apply power of 2.4.
  3. Calculate relative luminance: L = 0.2126×R + 0.7152×G + 0.0722×B
  4. Compute ratio: (L₁ + 0.05) / (L₂ + 0.05) where L₁ is the lighter color.

This tool performs all calculations in real-time as you adjust colors.

Frequently Asked Questions

Color contrast ratio measures the difference in brightness between two colors—typically foreground text and its background. A higher ratio means better readability. It matters because over 2.2 billion people worldwide have some form of vision impairment. Proper contrast ensures your content is accessible to everyone, including users with low vision, color blindness, or those viewing screens in bright sunlight. It's also a legal requirement under ADA and Section 508 in many jurisdictions.

WCAG AA is the widely-accepted minimum standard for web accessibility. It requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Most organizations aim for AA compliance. WCAG AAA is the enhanced, gold-standard level requiring 7:1 for normal text and 4.5:1 for large text. AAA is harder to achieve across all designs but provides the best readability. For context, pure black on pure white (#000/#FFF) achieves a 21:1 ratio—far exceeding both standards.

WCAG defines large text as: at least 18 point (24px) with regular weight, or at least 14 point (approximately 18.7px) with bold weight (700+). This distinction exists because larger and bolder text is inherently easier to read, so it requires a lower minimum contrast ratio (3:1 for AA, 4.5:1 for AAA) compared to normal-sized body text.

Pure red (#FF0000) on white has a contrast ratio of approximately 4.0:1—just below the AA threshold of 4.5:1. While it may seem readable to you, many users with red-green color blindness (the most common type, affecting ~8% of males) or reduced contrast sensitivity will struggle. The WCAG formula accounts for human visual perception using relative luminance, where green contributes most (71.5%) to perceived brightness and blue contributes very little (7.2%). Red falls in between, often resulting in lower-than-expected ratios.

To fix low contrast: (1) Darken your text color or lighten your background—even small adjustments can push the ratio past the threshold. (2) Increase font size or weight to qualify as "large text" (lower requirement of 3:1). (3) Add a subtle text shadow or semi-transparent overlay behind text. (4) Use this tool to experiment with HSL adjustments—shifting hue while keeping similar luminance values won't help; you need to adjust lightness. (5) Consider using an accessible color palette generator for your brand colors.

Yes—partially. UI components and graphical objects (icons, form borders, focus indicators, chart elements) must meet a minimum 3:1 contrast ratio against their adjacent colors under WCAG 2.1 AA. However, decorative images that convey no information are exempt. Logos and brand elements also have some flexibility, though accessible alternatives are encouraged. For informational images containing text, the text within the image should ideally meet the same contrast standards.

The most frequent mistakes include: Gray text on light backgrounds (e.g., #999 on #FFF = 2.85:1, failing AA)—this is extremely common in form placeholders and captions. Light text on bright colored backgrounds (e.g., white on yellow or light blue). Insufficient contrast on hover/focus states—interactive elements must remain distinguishable. Thin fonts at small sizes—lighter font weights (300 or less) dramatically reduce perceived contrast. Orange or yellow call-to-action buttons with white text—these almost always fail. Always test your designs!

Yes, this contrast checker is 100% free with no registration required. All calculations happen directly in your browser using JavaScript—no data is sent to any server. Once the page loads, the tool works entirely offline. You can use it as many times as you need for web design, app development, branding projects, or accessibility audits. Bookmark this page for quick access whenever you're choosing colors!

This tool accepts HEX color codes (3-digit shorthand like #FFF or 6-digit like #FFFFFF, with or without the # prefix). It also displays the equivalent RGB and HSL values for your convenience, making it easy to transfer color values between design tools like Figma, Sketch, Adobe XD, or directly into your CSS code. You can use the native color picker for visual selection or type HEX values manually.

In many countries, digital accessibility is legally mandated. In the US, ADA Title III and Section 508 require accessible design for public-facing websites and government platforms. The European Accessibility Act (EAA) will require WCAG 2.1 AA compliance for many digital products by 2025. Canada, Australia, and the UK have similar laws. Non-compliance can result in lawsuits—thousands of ADA-related cases are filed annually. Using a tool like this helps you proactively meet these legal obligations.
WCAG 2.1 Contrast Ratio Quick Reference
Level Text Type Min Ratio Example Use Case
AA Normal Text 4.5:1 Body paragraphs, labels, menu items, form fields
AA Large Text 3:1 Headings ≄24px, bold text ≄18.7px
AA UI / Graphics 3:1 Icons, input borders, focus indicators, charts
AAA Normal Text 7:1 Enhanced readability for all users
AAA Large Text 4.5:1 Enhanced readability for large text
🔧 Related Tools