About

Insufficient color contrast is the most common accessibility violation on the web. The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios between text and its background: 4.5:1 for normal text (Level AA) and 7:1 for enhanced readability (Level AAA). Large text (≥18pt or ≥14pt bold) receives relaxed thresholds. Failing these ratios exposes organizations to legal liability under ADA, Section 508, and EN 301 549. This tool computes the exact contrast ratio CR from the relative luminance L of two sRGB colors using the W3C-specified linearization formula. It does not approximate. Results match the official WCAG reference algorithm to full floating-point precision.

The tool also generates the nearest compliant color when your pair fails a threshold. Note: this calculation assumes colors are rendered on a standard sRGB display. Transparency compositing against unknown backgrounds is not handled. If either color uses alpha, composite it against white first.

Formulas

The contrast ratio between two colors is derived from their relative luminance values. First, each sRGB channel is linearized from its gamma-compressed form:

c_lin =

{

c_sRGB12.92 if c_sRGB ≤ 0.04045(c_sRGB + 0.0551.055)^2.4 otherwise

where c_sRGB is the 8-bit channel value divided by 255. Relative luminance is then:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

The contrast ratio CR is computed as:

CR = L₁ + 0.05L₂ + 0.05

where L₁ is the greater luminance and L₂ is the lesser. The ratio ranges from 1:1 (identical) to 21:1 (black on white). Variable definitions: c_sRGB = gamma-compressed channel value in [0, 1]; c_lin = linearized channel value; R_lin, G_lin, B_lin = linearized red, green, blue channels; L = relative luminance in [0, 1]; CR = contrast ratio.

Reference Data

WCAG Level	Text Type	Min Ratio	Font Size Threshold	Applies To
AA	Normal text	4.5:1	< 18pt (24px)	Body copy, labels, inputs
AA	Large text	3:1	≥ 18pt or ≥ 14pt bold	Headings, large UI text
AA	UI components	3:1	N/A	Icons, borders, focus indicators
AAA	Normal text	7:1	< 18pt	Maximum readability
AAA	Large text	4.5:1	≥ 18pt	Enhanced large text
AA (1.4.11)	Non-text contrast	3:1	N/A	Graphical objects, charts
Common Color Pairs & Their Ratios
Black on White		21:1	Maximum possible contrast
White on White		1:1	Minimum possible (invisible)
#777 on White		4.48:1	Fails AA normal by 0.02
#767676 on White		4.54:1	Lightest gray passing AA normal
#595959 on White		7.0:1	Darkest gray just passing AAA
Navy (#003366) on White		11.1:1	Strong accessible dark blue
Red (#FF0000) on White		4.0:1	Fails AA normal
Green (#00FF00) on White		1.37:1	Extremely poor contrast
Blue (#0000FF) on White		8.59:1	Passes AAA
#757575 on #FAFAFA		4.36:1	Fails AA normal on near-white

Frequently Asked Questions

Pure red has a relative luminance of approximately 0.2126 (since only the R channel contributes at coefficient 0.2126). Against white (L = 1.0), the contrast ratio is roughly 4.0:1, which falls below the 4.5:1 AA threshold. To pass, darken red to approximately #CC0000 (4.63:1).

sRGB is not linear. A pixel value of 128 does not produce half the light of 255. The gamma decompression exponent of 2.4 (with the linear segment below 0.04045) corrects for this. Skipping linearization and averaging raw RGB values directly produces incorrect luminance values, often underestimating contrast for mid-tones by 10 - 30%.

Yes. The formula is color-agnostic. It operates purely on luminance. Two colors can be visually distinct in hue (e.g., blue vs. orange) yet have nearly identical luminance, yielding a ratio near 1:1. Hue difference alone does not guarantee readability for users with low vision or color blindness.

Large text is defined as ≥ 18pt (24px) regular weight, or ≥ 14pt (18.66px) bold. These thresholds assume a standard serif or sans-serif font. Decorative or thin-weight fonts may need to be treated as normal text even at larger sizes because their stroke width reduces effective contrast.

WCAG does not define contrast for transparent colors directly. You must composite the semi-transparent foreground onto the actual background using the alpha blending formula: C_out = α × C_fg + (1 − α) × C_bg. Then test the resulting opaque color against the background. This tool composites alpha colors against white if alpha is detected.

Yes, this is common. A ratio of 5.5:1 passes AA normal (≥ 4.5) but fails AAA normal (≥ 7.0). AAA conformance is recommended for long-form reading and critical interfaces (medical, legal, government). Most design systems target AA as the mandatory baseline and AAA as aspirational.