BBuildQuill
Color Tools

Color Contrast Checker

Check WCAG AA and AAA contrast ratios between any two colors to ensure your design is accessible.

The quick brown fox jumps over the lazy dog

Normal body text at 16px - sample preview

Small text (12px) - harder to read at low contrast

Contrast Ratio

14.63:1

Pass

AA Normal Text

min 4.5:1

Pass

AA Large Text

min 3:1

Pass

AAA Normal Text

min 7:1

Pass

AAA Large Text

min 4.5:1

Common Presets

How to Use Color Contrast Checker

1

Pick foreground and background colors

Use the color pickers or enter hex codes for your text color and background color.

2

Read the contrast ratio

The contrast ratio is calculated instantly and compared against WCAG AA and AAA standards.

3

Check the pass/fail results

See which WCAG levels pass for normal text, large text, and UI components.

Why Check Color Contrast?

Verify that your text-and-background color combinations meet WCAG accessibility standards. This tool calculates the contrast ratio and shows pass/fail results for AA and AAA compliance at both normal and large text sizes.

  • Calculates WCAG contrast ratio between any two colors
  • Shows pass/fail for AA and AAA at normal and large text sizes
  • Live preview of text on your chosen background
  • Swap foreground and background with one click
  • Pick colors visually or type HEX codes
  • Instant updates as you adjust colors

Frequently Asked Questions

What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with low vision. A ratio of 4.5:1 is required for normal text (AA), and 7:1 for enhanced accessibility (AAA).
What counts as large text?
Large text is defined as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text has lower contrast requirements because it is easier to read.
What ratio should I aim for?
For most body text, aim for at least 4.5:1 (AA). For headings and decorative text, 3:1 (AA Large) is acceptable. Aim for 7:1 for the best accessibility (AAA).

Related Tools

Color Picker

Pick colors visually and get HEX, RGB, and HSL values with a palette generator.

Color Palette Generator

Generate harmonious color palettes from any base color. Complementary, triadic, analogous, and more.

HEX to RGB

Convert HEX color codes to RGB values.

RGB to HEX

Convert RGB color values to HEX codes.