Contrast Ratio Calculator

Check WCAG 2.1 contrast ratio between foreground and background colors.

Foreground Red

Foreground Green

Foreground Blue

Background Red

Background Green

Background Blue

Tab to move between fields

Contrast Ratio

19.16:1

AA Normal Text1

AA Large Text1

AAA Normal Text1

AAA Large Text1

How to Use This Calculator

Enter the Foreground RGB values (text or icon color) and Background RGB values.
Review the Contrast Ratio expressed as X:1.
Check WCAG AA compliance: 4.5:1 required for normal text, 3:1 for large text (18pt+ or 14pt bold).
Check WCAG AAA compliance: 7:1 required for normal text, 4.5:1 for large text.
Adjust your foreground or background color until the ratio meets the target accessibility standard.

Ad Placeholder

Related Calculators

Convert RGB color values to CMYK and HSL representations.

Generate a modular type scale from a base font size and ratio.

Generate harmonious limited color palettes from a base color.

Ad Placeholder