Design

Contrast Ratio Calculator

Check WCAG contrast ratio between any two colors. See AA and AAA pass/fail status for normal and large text.

Quick Answer

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Enter your foreground and background colors to check compliance.

Check Contrast

Enter foreground and background colors in hex format.

The quick brown fox jumps over the lazy dog

This is how your text will look with these color choices. Check the contrast ratio below.

About This Tool

The Contrast Ratio Calculator is an essential accessibility tool for web designers, developers, and content creators. It calculates the WCAG (Web Content Accessibility Guidelines) contrast ratio between any foreground and background color pair and instantly shows whether the combination meets AA and AAA conformance levels for both normal and large text. Use it during the design phase to ensure your color palette is accessible to all users, including those with visual impairments.

What Is Contrast Ratio?

Contrast ratio is a numerical measure of the difference in perceived brightness between two colors. It is calculated using the relative luminance of each color — a value that accounts for how the human eye perceives different wavelengths of light (we are most sensitive to green, less to red, and least to blue). The formula yields a ratio between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, black on white). Higher ratios mean more visible, readable text.

WCAG Conformance Levels

WCAG 2.1 defines two conformance levels for color contrast. Level AA is the minimum standard that most organizations should meet. It requires a 4.5:1 ratio for normal-sized text and 3:1 for large text (18pt/24px regular or 14pt/18.66px bold). Level AAA is the enhanced standard that provides the best readability. It requires 7:1 for normal text and 4.5:1 for large text. While AAA for all content is ideal, it is often impractical for complex designs — most guidelines recommend AAA for body text and AA for secondary elements.

The Science Behind Relative Luminance

The contrast ratio formula is grounded in color science. First, each RGB color channel (0-255) is converted from sRGB gamma-encoded space to linear light values using an inverse transfer function. Then relative luminance is calculated as a weighted sum: L = 0.2126R + 0.7152G + 0.0722B. These weights come from the CIE 1931 color matching functions and reflect the spectral sensitivity of human cone cells. Green contributes the most to perceived brightness (71.52%), followed by red (21.26%), then blue (7.22%). This is why pure green (#00FF00) appears much brighter than pure blue (#0000FF) at the same hex intensity.

Common Accessibility Mistakes

The most common contrast failure is light gray text on white backgrounds — often used for placeholder text, captions, or disabled states. Even gray as dark as #767676 barely passes AA at 4.54:1. Other frequent failures include colored text on colored backgrounds (blue on purple, orange on yellow), text over images without an overlay, and gradient backgrounds where contrast varies across the element. Always test the worst-case point in a gradient, not just the average. Placeholder text and disabled states should still meet at least 3:1 for usability, even though WCAG does not strictly require it.

Beyond Contrast Ratio

While contrast ratio is the primary WCAG metric, true color accessibility involves more considerations. Color should never be the only means of conveying information (WCAG 1.4.1) — always pair color indicators with text, icons, or patterns. Test your palette with color blindness simulators to ensure meaning is preserved for users with deuteranopia, protanopia, and tritanopia. Consider font weight and size: thin fonts need higher contrast than bold fonts at the same size. And remember that contrast needs increase in bright ambient light (sunlight) and on lower-quality displays.

Frequently Asked Questions

What is WCAG contrast ratio and why does it matter?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for people with visual impairments, including color blindness and low vision. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is difficult for everyone to read in poor lighting conditions, on low-quality displays, or on mobile devices in sunlight. Meeting WCAG contrast requirements is a legal obligation under many accessibility laws (ADA, Section 508, EN 301 549) and is essential for inclusive design.
What are the WCAG AA and AAA contrast requirements?
WCAG defines two conformance levels for contrast. Level AA (minimum) requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance as the baseline, with AAA for critical content like body text. Logos and decorative text are exempt from these requirements. UI components and graphical objects need at least 3:1 contrast against adjacent colors.
How is the contrast ratio calculated?
The contrast ratio is calculated using relative luminance values of the two colors. First, each color's sRGB values (0-255) are converted to linear RGB by applying an inverse gamma function. Then relative luminance is computed as L = 0.2126*R + 0.7152*G + 0.0722*B (these coefficients reflect human perception — we are most sensitive to green, then red, then blue). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white).
What text size counts as 'large text' in WCAG?
WCAG defines large text as 18 points (24px) or larger at regular weight, or 14 points (approximately 18.66px) or larger at bold weight (700+). Large text has relaxed contrast requirements because larger characters are inherently easier to read. In CSS terms, this means text at font-size: 24px or larger, or bold text at font-size: 18.66px or larger. Note that some typefaces appear smaller than others at the same point size due to their x-height, so these thresholds are guidelines — when in doubt, use the stricter normal-text requirements.
Does contrast ratio apply to colors beyond black and white?
Absolutely. Contrast ratio applies to any pair of colors — text color versus background color. Common failures include light gray text on white backgrounds, blue text on dark blue backgrounds, and red text on green backgrounds (especially problematic for color-blind users). Even saturated, vibrant colors can fail contrast checks — for example, bright orange (#FF6600) on white has only a 3.07:1 ratio, failing AA for normal text. Always check your actual color combinations rather than assuming that 'colorful' means 'visible.'
How do I fix low contrast without changing my brand colors?
You have several options. First, darken or lighten your brand color slightly — often a small shift (10-20% darker for light backgrounds) is enough to pass AA without visible brand change. Second, use your brand colors for large text, headings, or accents where the 3:1 threshold applies, and use higher-contrast colors for body text. Third, add a semi-transparent overlay between text and background images to boost contrast. Fourth, use your brand palette's darkest and lightest variants for text-on-background combinations. Tools like this calculator let you experiment with hex values until you find the sweet spot between brand fidelity and accessibility compliance.

You might also like

Tax & Finance

Self-Employment Tax Estimator

Calculate your quarterly SE tax payments and deductions.

⏱ 2 minFinance

Compound Interest Calculator

See how your money grows with compound interest over time.

⏱ 1 minCareer

Freelance Rate Calculator

Find your ideal hourly, daily, and project rates.

⏱ 3 min