Color Contrast Checker

Quick Answer

Black (#000000) on white (#FFFFFF) has a contrast ratio of 21:1, which passes all WCAG levels. Dark gray (#333333) on white (#FFFFFF) has a ratio of 12.63:1, also passing all levels.

Colors

Foreground (Text) Color

Background Color

Preview

Common Examples

Input	Result
#000000 on #FFFFFF	21:1 (passes AA, AAA, AA Large, AAA Large)
#FFFFFF on #0000FF	8.59:1 (passes AA, AAA, AA Large, AAA Large)
#767676 on #FFFFFF	4.54:1 (passes AA, fails AAA)
#FF0000 on #FFFFFF	3.99:1 (fails AA Normal, passes AA Large)
#999999 on #FFFFFF	2.85:1 (fails AA, fails AAA, passes neither level)

How It Works

The WCAG 2.1 contrast ratio measures the perceived brightness difference between two colors. It uses relative luminance, a weighted sum of the linearized sRGB channels that models human vision.

Step 1: Convert Hex to Linear RGB

Each hex channel (0 to 255) is divided by 255 to get a value from 0 to 1. If the result is 0.04045 or less, divide by 12.92. Otherwise, apply the formula: ((value + 0.055) / 1.055) ^ 2.4. This converts from sRGB gamma space to linear light values.

Step 2: Calculate Relative Luminance

L = 0.2126 x R + 0.7152 x G + 0.0722 x B

The weights reflect human sensitivity to green (highest), red (medium), and blue (lowest). The result is a value from 0 (black) to 1 (white).

Step 3: Calculate Contrast Ratio

Contrast Ratio = (L_lighter + 0.05) / (L_darker + 0.05)

The 0.05 offset prevents division by zero and accounts for ambient light. The result ranges from 1:1 (identical colors) to 21:1 (black on white).

WCAG Thresholds

AA Normal text: 4.5:1 minimum
AA Large text: 3:1 minimum (large = 18pt or 14pt bold)
AAA Normal text: 7:1 minimum
AAA Large text: 4.5:1 minimum

Worked Example

For #767676 on #FFFFFF: The hex value 0x76 = 118. Linear R = ((118/255 + 0.055) / 1.055)^2.4 = 0.1845. Since all three channels are 0x76, L = 0.2126(0.1845) + 0.7152(0.1845) + 0.0722(0.1845) = 0.1845. White has L = 1.0. Contrast = (1.0 + 0.05) / (0.1845 + 0.05) = 1.05 / 0.2345 = 4.48:1. This barely fails the AA Normal threshold of 4.5:1. The color #767676 (with a ratio of approximately 4.54:1) is widely recognized as the lightest gray that passes AA on white.

Related Calculators

CSS Gradient Generator

Generate linear and radial CSS gradient declarations with a live preview.

Type Scale Calculator

Generate a modular type scale with CSS custom properties from a base size and ratio.

Frequently Asked Questions

What contrast ratio is required for WCAG AA compliance?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These thresholds apply to both foreground text and meaningful UI components.

What is the difference between AA and AAA compliance?

AA is the minimum recommended level for web accessibility. AAA is the enhanced level with stricter requirements: 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance, as AAA can be difficult to achieve with complex color palettes.

Why does green contribute most to luminance?

The relative luminance formula weights green at 0.7152, red at 0.2126, and blue at 0.0722. These weights reflect the spectral sensitivity of human cone cells. Human vision is most sensitive to green wavelengths, moderately sensitive to red, and least sensitive to blue.

Can I use this checker for non-text elements?

Yes. WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 contrast ratio for UI components (buttons, form fields, icons) and graphical objects that convey information. This is the same threshold as AA Large text.

What is the lightest gray that passes AA on white?

The commonly cited answer is #767676, which produces a contrast ratio of approximately 4.54:1 against white (#FFFFFF). This is the lightest pure gray that meets the 4.5:1 AA Normal threshold.