Skip to main content
Calcimator

Contrast Ratio Calculator

Check WCAG 2.1 contrast ratio between foreground and background colors.

Inputs

Results

Contrast Ratio

19.16:1

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

How the result changes with Foreground Green

Foreground GreenContrast Ratio
266.24:1
897.41:1
16611.08:1
23016.43:1

What each input means

Foreground Red
Red channel of the text/foreground color.
Foreground Green
Green channel of the text/foreground color.
Foreground Blue
Blue channel of the text/foreground color.
Background Red
Red channel of the background color.
Background Green
Green channel of the background color.
Background Blue
Blue channel of the background color.

How this is calculated

Worked example, using the default values

  1. Identify Input Parameters
    4 parameters
    Foreground Red = 255, Foreground Green = 255, Foreground Blue = 255, Background Red = 10 = 6 input(s) provided
  2. Calculate Contrast Ratio
    19.16 = 19.16
  3. Calculate AA Normal Text
    AA Normal Text
    1 = 1
  4. Calculate AA Large Text
    AA Large Text
    1 = 1

Related Calculators

The questions that sit next to this one — chosen by subject, including calculators filed under a different category.

Graphic Design

Color Mode Converter

Convert RGB color values to CMYK and HSL representations.

Graphic Design

Typography Scale Calculator

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

Accessibility & ADA

WCAG Compliance Calculator

Score your website's WCAG 2.1 compliance across contrast, alt text, keyboard navigation, and ARIA labels.

Accessibility & ADA

Color Blindness Check

Approximate RGB shifts for protanopia, deuteranopia, and tritanopia (Brettel-style simplification).

Graphic Design

Bleed & Trim Calculator

Calculate document dimensions including bleed, trim, and safe area margins.

More in Creative, Media & Design.