Skip to content
All tools

Accessibility

Color Contrast Checker

Test foreground and background pairs against WCAG AA and AAA contrast thresholds.

9.76:1

AA large

Pass

AA

Pass

AAA

Pass

Contrast preview

Ideas deserve to be readable.

Test the exact relationship between foreground and background before it becomes part of the interface.

color: #111827; background: #f2b705;

Check text against its actual background

  1. Enter the foreground and background hex colors, or choose them with the color pickers. Swap them to compare the reverse treatment.
  2. For WCAG AA, normal text needs at least 4.5:1. Large text needs at least 3:1. Large means at least 18 pt, or 14 pt when bold, approximately 24 px or 18.7 px respectively.
  3. For WCAG AAA, normal text needs 7:1 and large text needs 4.5:1. Copy the colors and check the real interface in all states.

This checks two opaque sRGB colors. Photos, gradients, opacity, focus states, and disabled controls need additional review. A passing color pair does not establish accessibility or WCAG conformance for a whole page. Thresholds apply to the unrounded ratio.

WCAG contrast requirements

A simple readable text pair

.body-copy {
  color: #111827;
  background-color: #ffffff;
}

This dark text and white background have a contrast ratio of about 17.74:1, exceeding the normal-text AA and AAA thresholds. The checker shows the ratio for your chosen pair.