Contrast Ratio Calculator

Contrast ratio measures how readable text is against its background on a luminance scale from 1:1 (identical colors) to 21:1 (black on white). WCAG 2.x uses relative luminance computed from sRGB hex values — not hue or saturation alone. Two blues with the same lightness can behave differently if one is closer to mid-gray, which is why eyeballing color pairs fails accessibility review.

Level AA requires at least 4.5:1 for normal body text and 3:1 for large text (18 pt regular or 14 pt bold and larger). Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. Non-text UI components and graphical objects need 3:1 against adjacent colors under WCAG 2.1 success criterion 1.4.11 — this calculator focuses on text pairs but the same ratio math applies.

Enter foreground (text) and background hex values. Order does not change the ratio — #333 on #FFF equals #FFF on #333 mathematically, though only one pairing is usable for typography. Invalid hex returns a dash until both fields parse.

Worked example with the default fields: foreground #333333 on background #FFFFFF. Dark gray on white yields about 12.63:1 — well above AA and AAA for normal text. Summary shows “Passes WCAG AA normal text.” AA large and AAA rows all read Pass. For a near-miss gray like #767676 on white, ratio drops to about 4.54:1 — barely passing AA normal.

Brand palettes often ship accent colors that fail on white — fix with darker shades for text roles while keeping brighter accents for large headlines or icons above 18 pt. Do not rely on font weight alone to rescue low contrast; bold helps qualification for “large text” thresholds but thin small caps still count as normal text.

Common mistakes include checking hex swatches while real UI uses semi-transparent overlays (alpha lowers effective contrast), ignoring focus ring colors, and testing only pure black #000 instead of softened body copy grays. Another error is assuming green/red status colors are readable by default — many fail against white or dark gray backgrounds.

This tool is a math check, not a legal compliance audit. Real accessibility reviews cover focus order, keyboard paths, motion, and non-color status indicators. Always test with users and assistive tech when shipping production UI.

Limits: sRGB hex pairs only — no alpha compositing, gradients, or text over photography unless you sample a flat color. Subpixel antialiasing and colored text shadows can shift perceived contrast slightly from the calculated ratio.