Skip to main content
SiteIndex
DeveloperReady to use

WCAG Color Contrast Checker

Check the contrast ratio between two colors against WCAG AA and AAA accessibility thresholds.

Guide

Interactive workspace

No account required
Color Contrast Checker

At 18px regular this counts as normal text — AA requires 4.5:1, and this pair passes.

The quick brown fox jumps over the lazy dog
Contrast ratio
14.68:1
AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass
UI components (3:1)Pass

The UI components check (WCAG 1.4.11) covers non-text elements such as borders, icons and focus indicators, which need 3:1 against adjacent colors.

Color blindness simulation

Protanopia (red-blind)Aa15.42:1
Deuteranopia (green-blind)Aa15.58:1
Tritanopia (blue-blind)Aa13.61:1
Achromatopsia (no colour)Aa14.74:1

Simulations are approximations of how the pair may look; the ratio is recalculated from the simulated colors.

How to use it

  1. Enter text and background colors as 3/4/6/8-digit HEX, rgb(), hsl(), or CSS color names, or use the labeled pickers.
  2. Read the ratio and normal/large-text AA and AAA results.
  3. Swap colors to compare the reverse combination and test the actual design context.
What is Color Contrast Checker?

Check the contrast ratio between two colors against WCAG AA and AAA accessibility thresholds.

How it works

SiteIndex computes the relative luminance of your foreground and background colors and derives the WCAG contrast ratio, then flags whether it passes AA and AAA thresholds for normal and large text.

WCAG AA vs AAA contrast thresholds

WCAG 2.x success criterion 1.4.3 requires at least 4.5:1 for normal text at AA and 3:1 for large text. AAA raises those minimums to 7:1 for normal text and 4.5:1 for large text. Large text means at least 18pt regular or 14pt bold.

  • Black (#000000) on white (#ffffff) is 21:1, so it passes AA and AAA for normal and large text.
  • Mid-gray (#767676) on white (#ffffff) is about 4.54:1, so it passes AA for normal text and AAA for large text, but not AAA for normal text.

In Figma, select the text and background layers and copy their HEX values from the color fields, then paste those colors into this checker. The ratio is calculated from the exact values you enter. See the WCAG contrast minimum criterion for the normative definition.

Common uses
  • Confirm body text meets WCAG AA contrast before shipping a design.
  • Check large heading text against the more lenient AAA large-text threshold.
  • Compare a few color pairs to find an accessible combination.
Limitations
  • Checks colors under WCAG 2 contrast-ratio thresholds; it is not APCA or a full accessibility audit.
  • Alpha inputs are composited over white before checking. This does not model translucent layers over your actual background.
  • Large-text classification must match the real font size/weight, not the tool preview.
Frequently asked questions
What ratio counts as passing?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.

Related tools

Color Converter
Convert colors between HEX, RGB, and HSL in real time.
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually and copy the generated background or text gradient code.
Border Radius Generator
Adjust each corner radius independently and copy the resulting CSS border-radius declaration.
Image Palette Extractor
Sample an image in your browser to find its most frequent colors, then click a swatch to copy its HEX value.
Box Shadow Generator
Design layered CSS box shadows with a live preview and copy the generated box-shadow declaration.
CSS Button Generator
Style a button with live colors, spacing, corners, hover, and keyboard focus, then copy CSS and HTML.