Color Contrast Checker (WCAG)
Pick a foreground and background color and instantly see the WCAG 2.1 contrast ratio with pass/fail badges for AA and AAA, normal and large text. Includes a live preview.
Normal body text — The quick brown fox jumps over the lazy dog.
Large heading — Sample preview
Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.
How to use Color Contrast Checker
- Pick foreground and background colors.
- Read the contrast ratio and pass/fail badges.
- Use Swap or Invert FG to test alternates.
What is Color Contrast Checker?
WCAG 2.1 defines contrast minimums for legible text: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal (AAA), 4.5:1 for large (AAA). Large text is defined as 18pt+ or 14pt+ bold. This tool computes the ratio using the relative-luminance formula from the WCAG spec.
FAQ
- What is large text?
- 18pt+ (24px) regular weight, or 14pt+ (18.66px) bold. Most h1/h2 elements qualify.
- What about non-text UI elements?
- WCAG 2.1 requires 3:1 contrast for UI components (button borders, form-field outlines) and meaningful icons. The AA Large badge approximates this.
Related tools
People also use
- Color Palette Generator🗄️ Developer Tools
Color Palette Generator — Pick a base color and generate a harmony palette — complementary, analogous, triadic, tetradic, split-complementary, monochrom...
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
- Box Shadow Generator🗄️ Developer Tools
Box Shadow Generator — Build CSS box-shadow visually — tune offset, blur, spread, color, opacity, and inset with live preview.