Contrast Ratio Calculator

FAQ

How is the ratio calculated?+

Using WCAG 2.x relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Is this different from the Contrast Checker?+

Same engine. This route emphasizes the numeric ratio; the Contrast Checker emphasizes pass/fail badges.

What color formats are accepted?+

Hex (#RRGGBB), rgb(), and hsl() syntax.

Why is the ratio capped at 21:1?+

Black on white is the maximum contrast pair in WCAG relative luminance math, producing roughly 21:1. Higher numbers do not occur for sRGB.

Does swapping foreground and background change the ratio?+

No. Contrast ratio uses the lighter and darker luminance regardless of which color is text versus background.