Contrast Ratio Calculator

About the Contrast Ratio Calculator

The Contrast Ratio Calculator checks whether your text and background color combinations meet WCAG (Web Content Accessibility Guidelines) standards. Adequate color contrast is essential for readability, especially for users with visual impairments, color blindness, or those viewing content in challenging lighting conditions. It is one of the simplest accessibility checks you can do before a design goes live. It also helps you balance accessibility with the visual style you want to keep. A quick ratio check can prevent a palette from looking good in mockups but failing in real use, which saves time during design review.

WCAG 2.1 defines specific contrast ratio requirements: Level AA requires 4.5:1 for normal text and 3:1 for large text, while Level AAA requires 7:1 for normal text and 4.5:1 for large text. These ratios are calculated from the relative luminance of the foreground and background colors.

This calculator accepts colors in hex, RGB, and HSL formats, calculates contrast ratios, and clearly indicates pass/fail status for all WCAG levels. It also suggests the closest compliant color alternatives when your chosen combination fails, helping you maintain your design aesthetic while meeting accessibility requirements.

When This Page Helps

Use this calculator when you need to check whether a foreground and background pair is readable and WCAG-compliant. It is helpful during design review, component creation, and accessibility audits. That makes it easier to catch contrast failures before they reach users and to choose accessible alternatives before a palette is finalized.

How to Use the Inputs

1. Enter the foreground (text) color in hex format (e.g., #333333)
2. Enter the background color in hex format (e.g., #FFFFFF)
3. Review the calculated contrast ratio
4. Check the pass/fail indicators for WCAG AA and AAA levels
5. Use the color preview to visually verify readability
6. Try preset color combinations to see common examples
7. Adjust colors using the suggested alternatives if needed

Example Calculation

Tips & Best Practices

• Never use light gray text on white backgrounds — it's the most common accessibility failure
• Pure black on pure white (21:1) can cause eye strain; try #333 on #FFF (12.6:1) instead
• Large text (18pt+) has lower contrast requirements, allowing more design flexibility
• Test your colors with this calculator before committing to a design system
• Consider both light and dark mode contrast when designing color palettes
• Automated contrast checkers catch about 30% of accessibility issues — manual testing is also needed

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, developed by the W3C. Contrast requirements ensure that text is readable by people with moderately low vision (roughly 20/40 acuity) without assistive technology. The guidelines define two conformance levels with different ratio thresholds.

Level AA (minimum) requires 4.5:1 contrast for normal text and 3:1 for large text. Level AAA (enhanced) requires 7:1 and 4.5:1 respectively. Large text is defined as 18pt (24px) or 14pt bold (18.66px bold). Many countries have laws requiring AA compliance for government and public-facing websites.

The Science of Color Perception

Human color perception is not uniform across the visible spectrum. We're most sensitive to green light, moderately sensitive to red, and least sensitive to blue. The sRGB luminance formula (0.2126R + 0.7152G + 0.0722B) reflects these perceptual weights. Additionally, the gamma correction in sRGB encoding must be linearized before calculating luminance, which is why the formula includes the piecewise power function.

Designing Accessible Color Systems

Building an accessible color palette requires systematic thinking. Start by choosing your primary, secondary, and accent colors, then verify that every text/background combination in your design meets at least AA standards. Many design systems include accessibility metadata for each color, indicating which combinations are compliant. Tools like this calculator should be integrated into your design workflow from the start, not applied as an afterthought.

Frequently Asked Questions

• What contrast ratio do I need for WCAG compliance?

  AA level: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). AAA level: 7:1 for normal text, 4.5:1 for large text. AA is the minimum legal requirement in many jurisdictions.

• What is relative luminance?

  Relative luminance is a measure of a color's brightness on a scale from 0 (black) to 1 (white), weighted by human perception (green contributes most, blue least). It accounts for the nonlinear gamma curve of sRGB displays.

• Do WCAG contrast requirements apply to images?

  WCAG contrast requirements primarily apply to text and text images. However, WCAG 2.1 added requirements for non-text contrast (icons, form controls) at 3:1 minimum. That means many interface elements need contrast checks too, especially when an image is being used to communicate information instead of decoration.

• How does color blindness affect contrast?

  Color contrast ratio is based on luminance, not hue, so it accounts for most color vision deficiency scenarios. However, you should also avoid relying solely on color to convey information.

• Is 4.5:1 enough for all users?

  While 4.5:1 meets AA requirements, higher contrast is better. AAA (7:1) provides better readability for users with moderate visual impairments. Some experts recommend targeting 7:1 whenever possible.

• What about dark mode?

  The same contrast requirements apply to dark mode. White (#FFFFFF) on pure black (#000000) gives 21:1 but can cause eye strain. Consider off-white on dark gray (e.g., #E0E0E0 on #1A1A1A) for better comfort.